Build a Website Design System

Get Help Make & Deploy a Website
#1

I am doing the ‘Build a Website Design System’ project from Codecademy’s frontend path and I have tried to duplicate the example site and build an identical site on my own but did not succeed.

My version of the site is almost similar but for some reason, the elements on my site appear bigger in size despite the fact that I used almost the same CSS for my HTML as the Codecademy version.

I cannot point out the source that causes this difference in size/weight between my site and the provided site.

Any help would be appreciated, thanks!

#2

The provided site specifies a min-height of 100px for the divs with the colors. Once you add that, I think your site will be a spot on replication

#3

Thank you for your comment but the min-height addition did not change much. The difference is noticeable throughout the whole page, not just the colors’ divs. Even the borders, which should have the same thickness (2px), do not look the same between my site and the provided site. The borders on my page are way thicker. Same with fonts too…

#4

Your borders appear the same size to me. Yours are a darker color though because you used the color keyword grey while the Codecademy site uses a hexidecimal code.

Check you spelling and capitalization of your fonts.

The only other thing I see is you <h2>s in the bottom section. You are currently styling both of them, though I believe the Codecademy site only styles the second one.

#5

The only difference between the two for me is the height of the box. Any chance you have magnification set to be different on your two tabs?

two-sites
two-sites1590×966 76.9 KB

and after I set yours to have the min-height:

after-fix
after-fix1590×966 48.7 KB

#6

The color of the border has a slight difference in the 2nd one as you can see, but the thickness is the same. The grey color they use is #a2a2a6

#7

Thank you guys so much! now that I reopened the sites they appear the way you guys are describing them. This was not the case the other day, I guess back then I changed something in my chrome dev tools box which made the two sites appear differently, and now they look good.

1 Like