Feedback on a CLR course challenge
I solved challenge2 of the flexbox challenge of the CRL course.
How did I do it regarding naming and my css ?
Code: https://codepen.io/RoelofWobben/pen/PoMPzOd
8 Replies
I think this is good stuff, roelof!
Remember DRY - Don't Repeat Yourself.
Since all the text in your
aside is white and centered, you can eliminate the .white class altogether and put those properties under aside. After that change, .white h2 is then just a repetition of .white and isn't adding further functionality. You can put the aside properties into a class for your <aside> element, maybe something like .side-content or .sidebar.
Additionally, you have .content with the property display: flex, but this can be omitted as it's not doing anything; it only has one flex child, <div class="container row">, which takes up all the available space. <main> and <aside> are flex children of <div class="container row"> (.row makes it the flex parent), and have room to move around as needed. ⭐Thanks a lot for the very good feedback
@Rebecca one little problem.
The h2 in the aside is now not white
Any hint how to solve that
My bad, for some reason that worked when I tried it out.
I would remove the color on
h2, and make a class to change the color of the single <h2> in the main section rather than for each one in the <aside>, it’s easier to let those inherit the white color.NO problem.
I will try it after im back from work
so something like this : https://codepen.io/RoelofWobben/pen/PoMPzOd ?
Yep! My only other suggestion is, instead of having classes with names like
brown or white, name them something more specific so others know what it is.
For example, instead of just div we have the container class, or the hero class which tells you what it is.
Consider something else instead of brown or white in the future.
Great work!Thanks any suggesties for better names
I find here primary and secondary also not good names
no padding on aside?
i just name like section_1, hero_primary, secondary_section_2
Please use #conquering-responsive-layout to post your solutions