@koeno100
Posted
Hi! This is a nice first try at this challenge. The design looks similar to the one given and you're quite close with the dimensions. The colours match as well and while the structure could be closer to the original, it looks good overall!
A few comments from my side:
- You have restricted the width of the container to 1440px and 375px. The problem this creates is that this will only center the card when viewing this on a device that has a width of 1440px or 375px. For example, on my screen, which is 1920px wide, the card is much more to the left.
I believe the challenge meant that 1440px and 375px were used as references for responsive design so you can compare it at those widths, but instead try to make the result responsive by having the card stay in the center of the page, regardless of the screen resolution. You can do this by getting rid of
width: 1440pxin the body selector and then usingmargin: 0 autowith some additional code (Check this for reference) or use a flexbox and justify/align the card to the center. (Using a 125px top/bottom margin only works in certain resolutions, but for it to be truly responsive, you want the card to be centered at all times.) - 'Outfit' is not a default font, so you have to import it first from Google Fonts by downloading it from there, or simply adding
@import url('https://fonts.googleapis.com/css2?family=Outfit');to your CSS file. - Use semantic HTML! In this case you have a main section and a footer, so you can easily use the
<main>and<footer>elements instead of divs.
Those are the main things I have to say so far. Have a look at these things and see if you can improve your design!
Marked as helpful
@Bakek-lang
Posted
@koeno100
Thank you for very well written feedback. I will look into the points you mentioned and do my best to improve the work.
About the semantic HTML, is there any particular reason why i should use <main> instead of <section>?
@koeno100
Posted
@Bakek-lang you're welcome! As far as my understanding goes, <main> is the container of your page where all the main content goes. If you have a considerable amount of information on a page that somehow belongs together, for example a blog post or article, you can use the <section> element to bring more structure into your page.
Say you have a place with an article about why semantic HTML is important and you have 3 arguments, you could structure this as follows: you have a <main> element with an <article> element, which you can then split up into several <section> elements per structural unit, such as your introduction, one for each argument and your conclusion. If you have a whole bunch of articles on a page, you can then group those together again into a bigger <section> element.
So basically, <main> is the big container of the main content of your page, while <section> breaks your page up into smaller sections with content that's related. Since this page is very simple and doesn't contain a lot of different information, it's sufficient to just use <main> since there's no necessity here to break the page up into smaller sections
@Bakek-lang
Posted
@koeno100 That makes a lot of sense. Thank you.
