DEV Community

Cover image for A list of CSS resources for beginners
Devin Ford
Devin Ford

Posted on • Updated on

A list of CSS resources for beginners

About two months ago I decided to lay out a list of things I needed to do, things I believed I needed to accomplish to start becoming 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 onto CSS.

I ran through the course at Free Code Camp on CSS, and felt like an all star, so right into JavaScript I went. 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? Well, then I got into DOM manipulation, and needed to style a Rock, Paper, Scissors project, and boy did I learn quick, I didn't understand CSS at all.

That's when I decided to make a plan, lay out a path, and promised myself that I would slow down and build a very good foundation before I jumped out of a section of learning. I started the #100DaysOfCode challenge that a lot 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 a 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 would like to save you the trouble, and give you a compiled list of resources I personally used, and hope you will find helpful.

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


The Odin Project

First is 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 with Web Development 101. There is a large section on CSS that is very helpful, and lists a lot 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. Their responsive we design section if you take the time with it, is an amazing tool to learnt he foundations of all things CSS. I highly encourage you, if you are able to do so and enjoy their website, 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 reoccuring 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
Hope you got a good laugh, and I really hope this resource helps you with centering all the things.
CSS-Tricks: Centering

CSS-Tricks Flexbox

We've made it to easily on 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 ever 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 when it comes to page layout and drastically changing how you style website, a CSS mastermind came up with GRID. Arguable one of the best tools for layouts ever. Image galleries will forever be super cool looking without 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 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
This game you use different position setting in 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 goals of the game. 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 an individual developer tools for each window. You wont 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!


User Additions



Interneting Is Hard
Credit:

I would like to add this amazing resource: internetingishard.com/

</div>
Enter fullscreen mode Exit fullscreen mode






CSS Reference

Credit:



cheralathann profile image


Cheralathan

β€’


</div>
<div class="body">
  <p>I would like to add this. An extensive CSS reference with all the important properties and info to learn CSS by Sara Soueidan</p>
Enter fullscreen mode Exit fullscreen mode

tympanus.net/codrops/css_reference/

</div>
Enter fullscreen mode Exit fullscreen mode




Top comments (40)

Collapse
 
oluwatonomise profile image
Joshua Folorunsho Omoniyi

@devindford you really might not have the slightest idea of what you've done or how you've impacted a life and save millions...
Feel like giving you a thank you hug 😭.
Thanks a million, God bless you real good. Will love more post from you and am following you, hope you don't mind helping where am stocked.
Thanks again

Collapse
 
devindford profile image
Devin Ford

So very happy to hear this!! I’m so glad it will be of help, and I will certainly do more in the future!

Always remember you got this!! The hard work will pay off!!

Collapse
 
cjglen profile image
cjglen • Edited

Really helpful, will look into these as I am self learning currently.

I've gone through html, css and a small bit of bootstrap, got to javascript and really don't feel like I know enough. Things like this are really useful, so thank you :)

Collapse
 
devindford profile image
Devin Ford

You’re welcome! That is exactly what happened to me, I got excited and ahead of myself and missed out on super important foundational things. It happens to a lot of people form the feedback I’ve seen.

Even if I can save one person from a headache I think it a win!

Collapse
 
jwp profile image
John Peters

I had exactly the same Css problem you described, total frustration on simple matters.
Then I discovered the HTML 5 Grid. I now use it everywhere for complete control. The only other style rules needed are margins and padding.

Collapse
 
devindford profile image
Devin Ford

It really is a great resource, I use it a ton now!

Collapse
 
fannyvieira profile image
Fanny

I would like to add this amazing resource: internetingishard.com/

Collapse
 
devindford profile image
Devin Ford

I appreciate the addition to the list!

Collapse
 
torresroberto profile image
Rob

Not all heroes wear capes

Collapse
 
osmang670 profile image
osmang670

Some wears under garments.😢

Collapse
 
devindford profile image
Devin Ford

Captain underpants for example πŸ˜‚
captain underpants

Collapse
 
kelobsc profile image
KeloBsc

I too got the same experience just this weekend exactly I decided to go back to CSS to redo the basics as I was getting stark all the time and I didn't like it as always with my background if this is the case chances are the basics are not right. Thanks @davindford.

Collapse
 
devindford profile image
Devin Ford

I think it happens to a lot of people, you want to succeed and you want to do it quickly. Sometimes going back to the basics isn’t a bad thing! You got this!!

Collapse
 
sandorturanszky profile image
Sandor | tutorialhell.dev

I was 29 when I made that exact move. Now I am 41 and looking back I can only say that I am very happy that I made that decision back then.

Software development is very exciting and will open up an incredible amount of opportunities for you. Good luck!!!

Collapse
 
devindford profile image
Devin Ford

Thank you so much!! Really helps to hear about others making that change over!

Collapse
 
izzy profile image
Izzy-J

This to me is a "cheat sheet!"
Absolutely amazing. Thanks for sharing Devin. I only just began an online bootcamp for web development and CSS tricks + Flex box froggy have been quite some resource!
I'm totally new to web development and programming as I just took a turn like you and I think these resources you've shared would go a long way in aiding my growth. Thanks again.

Collapse
 
devindford profile image
Devin Ford

Glad you find them useful! To be honest I’m not too far into the journey myself, but I know how much I struggled and these resources helped me the most!

Collapse
 
godwin_france profile image
Saharan-sub

what cheat sheet do you use for CSS ?

Collapse
 
guivr profile image
Guilherme Rizzo • Edited

Great collection, Devin! Thank you. Maybe this could be helpful as well:

Beautiful box-shadow examples - A curated collection of 83 free beautiful box-shadow 🎨
getcssscan.com/css-box-shadow-exam...

Collapse
 
biahdev profile image
Ana Beatriz

Thanks helped me a lot, this The Responsively App had never heard of, a great find;

Collapse
 
devindford profile image
Devin Ford

Easily my most used resource when doing dev work! They’ve made an incredible app!

Collapse
 
jackdomleo7 profile image
Jack Domleo

Very nice! You know you're becoming a developer when you realise that you don't actually know something, this is where you know that there is so much more to a language. Useful article! πŸ’ͺ

Collapse
 
devindford profile image
Devin Ford

Always appreciate your feedback! I completely agree, slowly feeling more like a dev every day!

Collapse
 
z2lai profile image
z2lai

Solid list, the bonus one was the best! Are you currently working on a personal project, or are you working as a freelancer?

Collapse
 
devindford profile image
Devin Ford

Bit of both, I’m doing my second freelance site and my portfolio I’m always updating it.

Glad you enjoyed the resources!

Collapse
 
abbeymaniak profile image
Abiodun Paul Ogunnaike

Thanks

Collapse
 
devindford profile image
Devin Ford

You’re welcome!

Collapse
 
cheralathann profile image
Cheralathan

I would like to add this. An extensive CSS reference with all the important properties and info to learn CSS by Sara Soueidan

tympanus.net/codrops/css_reference/

Collapse
 
devindford profile image
Devin Ford

Please feel free to add it! Glad it will be helping many 😊

Collapse
 
maebashiiceoctopus profile image
Alejandra Acosta • Edited

Hey tnx!!!!
im new at front-end and i find this very useful β˜€οΈ

Collapse
 
devindford profile image
Devin Ford • Edited

Glad you find it helpful!! 😊