Hey ! I started my coding journey in October. Haven’t been the most consistent, but I do take my time to read and learn extra content on other websites than FCC. My plan is to focus on deep understanding of concepts rather than passing challenges as fast as possible.
With that being said, I’ve struggled a bit with CSS so far, but the tribute page project was such a good way of praticing. It allowed me to be more confident in my coding approach (meaning, the way I plan my project before writing the first lines), and also to understand most things about spacing (box-model), flexbox and such.
First off, I think you have an excellent attitude and strategy towards learning. It is indeed not about just grinding through problems.
Stop and take the time to fully understand every aspect of every step of each exercise. Then go off to the side and do your own examples (perhaps something fun).
CSS is a completely different animal. A lot of front-end devs cast it aside as a less important skill. It is not. It is a very important part of front end development and a very complex one as well.
BEM (Block Element Modifier, denoting the three roles in the naming convention) and SMACSS (Scalable and Modular Architecture for CSS) are very elegant solutions to scaling up clean CSS in larger projects (perhaps look into this in future studies).
Be weary of frameworks and libraries (like Tailwind) that act as a crutch, and allow you to become lazy and flippant about the importance of CSS. Frameworks also come and go, but knowing the underlying CSS (and JavaScript for that matter) will remain relevant throughout.
…Sorry, I don’t have time to address your current CSS issue, but I may return to take a look.
Thank you ! You already did a lot by assessing my approach and providing new subjects for me to learn and get familiar with.
Just to clarify my struggle with CSS: Even though the code passed the exam, I am still wondering about the best way of planning and executing CSS code. Is there too much redundancy ? Or maybe did I forget important/useful stuff that would’ve saved me some time (the whole project took me two and a half hours).
I’m not so worried about how good the syntax looks for now ! But I do try to keep things organised a bit.
WRT your last statement, I know that for small projects it seems silly to be hyper-organized with your code. However, in real-world applications you are going to deal with or scale up to large projects. So, developing good organizational habits early on in smaller projects is not a waste of your time and effort.
There are a ton of ways to do almost everything in CSS. Your concerns are absolutely valid, and they’re actually things you should be asking yourself when you start working on something.
Just to give you some specific feedback here, I would move the body { . . . } to the top of your CSS. The body is a wrapper for all of your styles in a sense, so it’s good to know what you’re starting with (which styles your elements will inherit from body) before you go and apply specific styles to things like h1 or divs or whichever elements you have. This will help address your redundancy concerns.
Another thing I noticed is that you have .center in the middle of all your element styles. And I do realize that you placed it right after the img block because you’re using it in your HTML in an img tag. However, since the class center can be applied to any element to center it, you could stick it at the bottom with other such classes. You might apply the center class to a div or your h1 later, which would make sticking it below the img block meaningless.
Thank you so much for your feedback. It makes a lot of sense now, and it’s quite clear in the sense that it’ll be easy for me to implement your corrections in this project and future ones as well.
For the body { … } part in CSS, I do prefer your way of doing. I started with H1 and went down the road cause I saw that it was easier (for some) to code that way to make sure you don’t skip something. But putting this syntax at the top will actually help me avoid any redundancy which is what I was most afraid of.