@Jo-with-vision
Posted
Hi,
Congrats on completing the challenge. I like how you have customised the design!
Here are some tips after looking at your code (it is not exhaustive, hopefully you will get more feedback from more experience coders):
- Consider keeping your styles in an external stylesheet and linking to your stylesheet using the
<link>
element in the<head>
section of your html. - Consider if the semantic tags you have used describe the content in the most meaningful way. For example, you could consider making your main container a
<main>
element. You can definitely cut down on your<div>
elements; a lot of them (if not all of them) aren't needed to style the project. - Reconsider the use of an
<h2>
for your location text. It is not a heading, so a<p>
element would do just fine. - It is usual to put
box-sizing: border-box;
on the universal selector*
, if you intended it to act as a CSS reset - Consider
min-height: 100vh
, instead ofheight: 100vh
- Try to use responsive units like rem/em instead of px.
🔥Happy Coding and great design concept!
p.s. With regards to measuring - I am in the same boat as I don't currently have a Pro subscription. Taking out a Pro subscription would mean access to the Figma design files that contain the exact measurements. You could also open the images you get with the free account into Figma and draw little boxes between the elements and see what the size of the boxes is to get an idea of the padding/margins etc.
Marked as helpful