Survey Form/Tribute page CSS feedback

Code Feedback
1

Hello guys!

I finally decided to complete the certifications here in freeCodeCamp.org after 3 years of indecisiveness , and I’m proud to say that I have a 12 day strike now :smiley:

Anyway, I wanted to see if I could get some feedback, mainly on the CSS part of my projects, because most of the time I feel that I use “band-aid” solutions in order to make my CSS workable.

Do any of you have any tips on how to make my CSS code clearer and cleaner?

Here are the two projects I have finished so far:

Survey Form

Tribute Page

Thanks in advance for taking time of your day to help a noobie like me n_n

1 Like
2

The one thing that I could suggest would be using and learning to use / rely on the cascading model of CSS in dealing with inheritance, beaning that if an element is inside of a parent and the style is being applied to the parent already, you can inherit the style, etc.

The way your code is written, there seems to be a good amount that can be cleaned up because you’re already receiving some of those properties from the parent, and so you don’t need to define them on the children. You can just go through your css and comment stuff out (ctrl+/) and see what is actually affecting which areas.

Also you can right click and choose inspect, or f12 on most browsers, to open the dev tools, and in there you can click the tab for styles, where you can (at least in Chrome) hover over different elements / items on the page and it will show all the css properties currently active on an element and whether they’re inherited or overwritten etc.

Remember that what is written on the bottom in CSS is what will take priority over the stuff on the top, so if you set a property at the top, but you don’t want it later, you can simply overwrite it, otherwise it will Cascade down.

Hope this helps.

For any CSS stuff, definitely check out Keven Powell on youtube as well. https://www.youtube.com/kepowob

But overall, pages look fine, and code works. Good job! Keep it up

2 Likes
3

Thank you for your input!

I see what you mean about the parent style. Specially, in the part of the figure element.

I used Web Docs as reference for that, but I do think I could have used less lines on that. I’m going to take note of that in the future :smiley:

Your words have gave me much to think and reflect about. Hope you don’t mind if I reread them from time to time :sweat_smile:

1 Like
4

Sure thing, hope it helps. Clean code is all about writing in an efficient manner, with the least amount of code possible. I also notice sometimes people are adding a block property on elements that are already block-level . So, it’s redundant.
Like I said though, a good way to check and improve on things is often, just commenting out parts of your code and watching to see how it changes your elements, if it doesn’t change anything, then you’re just writing extra code for yourself.

Another interesting thought for you: If I have a div, that has a child h2 inside of it, and I set a margin of 3px on all sides to the div, and then I only set a margin of 10px on the top for the h2.
Will the h2 have 3px 10px 3px 3px ? Or it will only have a top margin of 10px?

Asking yourself questions like this, and learning the answers to them via experimenting and reading the docs can go a long way in improving you as a developer and more so, improving your understanding of the development experience.

Take care!

<style >
    div {
        margin:3px;
 } 
    h2 {
        margin-top:10px;
]
</style>

<div>  Hello
    <h2>World</h2>
</div>
1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.