AmeerMoustafa / qr-code

First challenge for frontendmentor.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Frontend Mentor - QR code component

First challenge for frontendmentor.io, I needed more HTML, CSS and responsive design practice while continuing to learn JS. This website was a great place to do it!

Second attempt - August 20/2023:

Re-doing every Frontend mentor challenge I've done so far, Just for practice. This was definitely much easier than it was the first time. Efficiency has definitely increased by a massive margin and I didn't run into any of the problems I ran into on my first attempt with this challenge. Overall the progress is very visible.

Screenshot

image

My process:

  • Desktop first Workflow
  • Responsive Design
  • Flexbox

What I learned:

My process remained the same but I learned a ton between the first and second time attempting this challenge.

  • Setting a height ruined responsiveness and was unecessary, allowed me to write less media queries.
  • Using CSS variables for colors will make large projects easier to maintain.
  • Generally got better at writing cleaner CSS and eliminating redundancy.

Helpful resources:

Box Shadow Generator CSS - Helped me generate shadows

live Site

About

First challenge for frontendmentor.io


Languages

Language:CSS 61.9%Language:HTML 38.1%