Hi,
I started learning web dev about 5 months ago. I learnt JS and React , also learnt nodeJs and express(frontend is my favorite though). I got no problem with the programming and logic part but I can’t even write one single line of css.
It just doesnt make sense to me and I whenever I try to write some css it doesnt work as expected and makes me frustrated. I simply did JS algorithm challenges but couldnt do a simple tribute page project.
Tried to work only on backend but frontend web development seems more interesting to me.
I was hoping maybe you guys could help me with this problem.
Thanks.
1 Like
Hey there @sina.salahshour12!
I know the struggle, I know the pain, I continue to have struggles with CSS it’s just not my thing. However, it is important to remember that just because somethings hard don’t mean it’s impossible. When I first started on the projects, I basically copied the CSS from the FCC CodePen and then reverse-engineered it to see how it worked. Sometimes a live example is better than an exercise.
After I realized how FCC did it, I adapted the CSS to my own work, I also went over the Responsive web design course and took better notes(BTW notes help a lot), I asked for help on the forum, and I looked at other people’s designs to get inspiration. I also google tons of things, a great many things, in fact I’d say about 50% of the job was research and inspiration. I also recommend that you research other places to learn even more about CSS because unfortunately FCC does a mediocre job at helping people understand Flexbox, Grid, and other things.
I must admit, I’ve never used Grid in my life, I’ve only used Flexbox. Not out of fear but out of incompetence, but I keep learning and even though I prefer FlexBox one day I will use grid. So, don’t feel bad, always remember that there are at least 10 other people out there who relate to you and you can find them here, on the forum.
As for resources I recommend Google and CSS tricks, along with articles you can search up on the FCC blog feed. There’s also a multitude of tutorials and guides on YouTube that can really help.
Happy coding! 
Best,
Cy499_Studios
2 Likes
Hey Sina,
It’s kind of hard without knowing what you’re trying to accomplish, but here’s some tips I wish I knew when I got started:
-
Give everything a semi-transparent background (background: rgba(0, 0, 0, .1); ). That will help you understand how much space the elements are occupying in the page.
-
Apply box-sizing: border-box to all elements in the document. This way, spaces like margin and padding won’t mess up the positions.
-
Go piece by piece. If you’re building a website, start with the navbar, but don’t start with the whole navbar. Start with its background. Once you have it on the top, with a 100% width, then go ahead and enter the list with the links. Then position those links. And so on with the rest of the site.
-
Learn about the basics of positioning, floats and spacing. Then go with flex or grid.
-
If things aren’t working and the element has lots of styling, you won’t solve the problem by adding more. Instead, remove them all and start from scratch.
-
Don’t jump to bootstrap as a shortcut to make your design work. That will make the underlying problem even bigger.
Hope you can get something out of this!
4 Likes
Interesting, sounds like a mental block, because React is a lot harder than basic css. I would go over to w3schools and go through their tutorials a bit. It’s often good to try to get a different perspective on things.
1 Like
Oh, and one more thing, you won’t know until you try. Even if your first webpage is the worst looking piece of (insert here) you should know that you built the page. You can’t learn until you Do things, so go out there and make the tribute page, make the survey form, learn from your mistakes, and don’t look back.
“The greatest teacher, failure is.”–Master Yoda (Star Wars)
Those words are so true with coding.
Have fun and keep on Coding!
Hey
Thanks for the advice. I’ll try to practice more following what you said until make it.
Hi
I also felt like it isn’t my thing but guess I have to do smaller projects to get used to it. I know I can make it work.
Thanks buddy.
No prob Buddy that’s why we’re here LOL 