Nice work on this challenge and congrats on submitting your first solution! Here are a couple of pointers after taking a look at your code:
Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
The responsive side of your project could do with a review. From 376px up to small desktop size, the layout doesn't fit the screen creating a horizontal scrollbar. Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain. It is also simpler than mixing both min-width and max-width, as you've done.
I hope these pointers help. Let me know if you have any questions. Keep up the great work!
Hey Jacquend, good effort on this challenge. To remove the underline on the links you can set text-decoration: none; on the anchor tags. On those footer links, you've currently got anchor tags as direct children of ul elements. Lists should only ever have li elements as children, so this needs refactoring.
As Adarsh mentioned, I'd recommend starting with the Newbie challenges and work your way up. It will definitely help build up your skills. Keep it up!
It's your float declarations that are throwing off the look of your solution. If you are going to use float you'd need it on the 2nd and 3rd .card elements as opposed to the .content and footer elements.
However, I'd recommend that you look into Flexbox and CSS Grid for laying out elements, as opposed to float. You can find some tutorials for these on the /resources page.
Great work on this challenge! What's the issue with the social icons? They look fine to me. The only thing missing is a circular border, which you could achieve with a border-radius, border and padding.
Latest Comments
RE: prisnak's "Solution using CSS and HTML" solution
Nice work on this challenge and congrats on submitting your first solution! Here are a couple of pointers after taking a look at your code:
376pxup to small desktop size, the layout doesn't fit the screen creating a horizontal scrollbar. Have you ever tried usingmin-widthmedia queries instead ofmax-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain. It is also simpler than mixing bothmin-widthandmax-width, as you've done.I hope these pointers help. Let me know if you have any questions. Keep up the great work!
RE: Jacquend Barnett's "Desktop first website using HTML and CSS" solution
Hey Jacquend, good effort on this challenge. To remove the underline on the links you can set
text-decoration: none;on the anchor tags. On those footer links, you've currently got anchor tags as direct children ofulelements. Lists should only ever havelielements as children, so this needs refactoring.As Adarsh mentioned, I'd recommend starting with the Newbie challenges and work your way up. It will definitely help build up your skills. Keep it up!
RE: peaky-qp's "Single Price Grid Component - Basic HTML and CSS" solution
It's your
floatdeclarations that are throwing off the look of your solution. If you are going to usefloatyou'd need it on the 2nd and 3rd.cardelements as opposed to the.contentandfooterelements.However, I'd recommend that you look into Flexbox and CSS Grid for laying out elements, as opposed to
float. You can find some tutorials for these on the/resourcespage.RE: Alfian Akmal Hanantio's "Four card feature section using React, Typescript, Mobile-First" solution
Awesome work, Alfian! Yeah, I'd set a
max-widthon the cards to keep it looking like the design for desktop. Keep up the great work!RE: Awesome Bassey's "Fylo Landing Page With Two Column Layout" solution
Great work on this challenge! What's the issue with the social icons? They look fine to me. The only thing missing is a circular border, which you could achieve with a
border-radius,borderandpadding.A great next step would be to try making the project responsive. If you've not looked into this yet, here's a great tutorial on building responsive sites from Udacity.
I hope that helps!