I used a single media query, kicking in once the screen width surpasses 568px. The reasoning is the rest of the code is responsive & I don't need many breakpoints (for multiple screen sizes).
I wonder if this is truly responsive. I used px lengths for padding and margins, using the spacing on the figma design. I feel there's a better way to do that, but I am not sure what it is.
I would use Tailwind next time I make this and see how that goes.
What challenges did you encounter, and how did you overcome them?I was stuck on how to get the .ttf files for font working in CSS, then I searched about that and found CSS Font Face that helped me solve it.
This is great! If you want the text in the Instructions section to wrap like in the design, consider increasing the width of your main element to 50 rem from 40 rem.
Excellent work man! If you want, you could personalise it to use a different color scheme & remove / add links.
The text color for this section: "These languages are the backbone of every website, defining structure, content, and presentation." is off compared to the design. If you check the Figma, you will see the color applied to that section. I suggest using a CSS class so you can reuse the styling.
The font appears small compared to the design too, causing the solution to appear smaller compared to the design. You may want to use a CSS reset or simply add:
html {
font-size: 100%
}
to the top of your CSS file. This way, your page inherits the font size from the users browser. In other places, you can set font-size using rem instead of px so font size dynamically changes based on the user's font.
I am proud of completing the task. I would like to fix the width and height of the paragragh 1 "Improve your front-end skills by building projects". I would like to add media queries.
What challenges did you encounter, and how did you overcome them?I faced many challenges one of which was to put the component in the center of the page. I tried out a few things and took help from chatGPT by asking a doubt very specific to what I wanted.
What specific areas of your project would you like help with?This looks great! The only difference is the font/text. If you wish to make it pixel perfect, you could reduce the spacing between the letters in the text.
