A list of CSS resources for beginners

A list of CSS resources for beginners

Featured on Hashnode
Devin Ford's photo
Devin Ford

Published on Oct 31, 2020

6 min read

About two months ago, I decided to lay out a list of things I needed to do, which I believed I needed to accomplish to become a self-taught full-stack developer. Well, I started, and I flew through HTML, figured it's something I had an ok knowledge of, and it was a topic that didn't require much coverage. I built a few sites myself and decided to move on to CSS.

I ran through the course at Free Code Camp on CSS and felt like an all-star, so I went right into JavaScript. I felt great, built some easy console log programs, and was feeling like a rock star. One week in, and I knew it all, this was going to be easy. What was everyone talking about, saying how hard this coding stuff is? Then I got into DOM manipulation and needed to style a Rock, Paper, Scissors project, and boy did I learn quickly. I didn't understand CSS at all.

That's when I decided to make a plan, layout a path, and promised myself that I would slow down and build an excellent foundation before I jumped out of a section of learning. I started the #100DaysOfCode challenge that many of you have probably seen on Twitter. Easily the best decision I've ever made. I met an amazing community, and it kept me on track and in check.

Now I'm finally at a point where I believe I have a good base in CSS, and I would love to pass the resources I used as I learned in the hope that you will read this and realize that not only is the foundation important, but you can also find quality resources if you know where to look. I want to save you the trouble and give you a compiled list of resources I personally used, and I hope you will find helpful.

I tweeted out about this list today, and at the advice of a friend, I decided to share it here.


The Odin Project

The Odin Project, which has hands down completely changed my journey as a self-taught developer. They have multiple paths you can take. Whether you decide to take the Ruby path, the JavaScript, or the Front End only path, you will always start Web Development 101. There is a large section on CSS that is very helpful and lists many of the resources I am listing here.
The Odin Project

Free Code Camp

Free Code Camp is one of my absolute favorite resources for learning to become a developer. If you take the time with it, their responsive we design section is an amazing tool to learn the foundations of CSS. If you can do so and enjoy their website, I highly encourage you to support this amazing learning tool!
Free Code Camp

CSS-Tricks Box Sizing

Next up is going to be a few from one of the most informative and, in my opinion, helpful sites regarding CSS. CSS-Tricks is an incredible resource, and this article will help you with all things box-sizing and understanding exactly how it works and why it is important!
CSS-Tricks: Box Sizing

CSS-Tricks Centering

If there is ever a reoccurring joke I see all the time on WebDev Twitter, it's about no one knowing how to center a div. Most jokes are born from some truth, and centering is a fickle beast in CSS.

CSS meme I hope you got a good laugh, and I really hope this resource helps you centering on all the things. CSS-Tricks: Centering

CSS-Tricks Flexbox

We've made it too easily one of the most talked-about and arguably confusing topics when you're first starting CSS. Learning how flexbox works can seem like a daunting task, but once you start to understand how to use it, you will never be able to create a site again without it. I keep this page open every single time I'm working on any project. I hope you find it as useful as I always do. CSS-Tricks: Flexbox

CSS-Tricks Grid

If flexbox wasn't mind-blowing enough for page layout and drastically changing how you style website, a CSS mastermind came up with GRID. Arguably one of the best tools for layouts ever. Image galleries will forever be super cool looking without the severe pain of setting them up to look good on your page. This guide is another game changer and always open if I'm working with the grid. CSS-Tricks: Grid

Flexbox Froggy

If anyone is as old as me, you remember Frogger! For those of you who are not familiar, Frogger was a video game where you controlled a small frog and had to jump across lily pads and traffic avoiding cars and falling in the water.
Frogger Gif In this game, you use different position settings in the flexbox to move your frogs! It's a fun, less stressful way to understand and learn flexbox. Flexbox Froggy

Grid Garden

Much like the above game, Grid Garden was also developed by CodePip. The concept is the same; you use grid settings to achieve the game's goals: another fun way to learn and a break from documentation and tutorials. Grid Garden

Bonus: The Responsively App

Not exactly a guide, but an amazing resource as you learn how to develop responsive websites. The Responsively App is an absolute game-changer. It's free, open-source, and arguably one of my favorite development tools. You can view your site with live reload if used in your IDE on several different screen sizes all at once! Responsively App
It also has individual developer tools for each window. You won't regret downloading this one! Responsively

I hope you find these resources as helpful as I have and remember how important a good foundation in anything is! Keep being awesome and crushing your goals! I wish you all the best, and please, if there are any resources you think I missed, please share them here or on the Twitter thread so others can find them!

If you're looking for more tips like this, I try and tweet out anytime I figure out something I'm struggling with as a new dev on my Twitter @DevinDFord

Remember always to be motivating and educating!



 
Share this