Just noticed you're missing a h1 too.
Overall, really good though, especially considering you've done this with floats.
1
Design comparison
Solution retrospective
This is a practice using floats before I tackle flexbox which is probably a better solution.
I would just like some feedback on the structure of my HTML & CSS. Are there any efficiencies I could make to make it more understandable?
Community feedback
P
Robert McGovern• 1,095
@tarasis
Posted
👋 Rich
The desktop version looks fab. Mobile version is nearly there, there should be padding at the bottom of the top 2 boxes. Right now on my phone the button in the middle box is smack against the bottom edge of its box.
Your HTML & CSS seem clear and well laid out. I’d rename “clr” to “clearFloat” so it’s explicit what is being cleared without having to find it in the CSS
Congrats on your first challenge.
🖖
1
Roman Filenko• 3,335
@rfilenko
Posted
Hi Rich, congrats on submitting this challenge, looks really great. Just a few notes for future improvements:
- use only one file for styles, add changes for tablet, desktop with mediaqueries;
- try not to use id's for styling purposes (highers specificity, hard to overwrite);
- consistent values for sizing, margins,paddings, etc;
- flexbox and css grid are modern techniques for layouts;
- add transition to button for smoother hover effect.
Cheers, Roman😀
0
Rich Keyzor• 25
@Web-Dev-Rich
Posted
@rfilenko thanks for your feedback. I put my desktop styles in a separate file so it only loads the styles if viewed on a desktop not needed on mobile size. Does that make sense?
1
@Web-Dev-Rich ah I see, hadn't spotted that in the HTML - you've really got me thinking now! :)
I'd probably load the large screen one at a smaller breakpoint to ensure tablets are covered, but it has potential to be a good way to save on bytes for those really small screens.
The one thing I'd worry about on larger projects is the cascade. Because CSS is all about the order of things... So any 'helper classes' - if any are used - (e.g. classes designed to force a css property on any element, like .margin-bottom--large)... if they were included in the mobile stylesheet, they could be overwritten by the desktop styles. So anything global and essental like that would have to be included in a third stylesheet.
Definitely an interesting idea though!
0
Roman Filenko• 3,335
@rfilenko
Posted
@Web-Dev-Rich hi, those two css will be loaded no matter screen size. It may not be an issue in smaller projects, but in large one can be noticeable.
Roman
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord