So now you’re well on your way with your HTML. And you’re ready to learn CSS – the key to making beautiful sites. This is definitely the next logical step, so you’re on the right track. In this piece, we’ll have a look at what CSS is, what it does and what you need to know as you get started. In a follow up article (soon), we will move on to JavaScript in the hope that, soon, you can have the full picture.
If you have just landed on this page and haven’t got much of a clue about HTML – I strongly suggest you start there. Here’s the HTML learning plan; once you’re done with that one, be sure to come back to continue to learn CSS.
Remember the Roadmap for getting started with web development? This article concerns the 2nd leg of the Roadmap: CSS.
So, what is CSS and why is learning it your next step in your journey to web development?
As mentioned in the Roadmap – CSS (Cascading Style Sheets) is a style sheet language used in creating webpages. If with HTML you created the backbone of the site and added the content (text, images, audio and video.), CSS comes in to style your page – to make it look like website, not like a plain document. And depending on your aesthetics – to make it pretty 🙂
In short, using CSS you get to style the site. You get to influence the layout, the colors and the fonts etc. While you can do (some of) this with just HTML, using CSS is definitely the way to go, for a variety of reasons:
- first, it’s cleaner: you have two separate files – one for your HTML code, and one for your CSS code. These are interlinked – so they function as one.
- next, it’s waaay more efficient: using just one instruction, you get to style several elements. This is helpful not just during the coding but also when maintaining your site (for instance, if you need to change the color of all titles on your site, you do it once, in the CSS file, and it affects all titles. Saves you tons of time.
- then, you get better performance: all this also makes for shorter code – because, as you imagine, if you have 90 titles on your site, doing it once only rather than 90 times keeps your code simpler – which ultimately impacts the performance of your site (less lines of code => shorter loading time, which is super important in terms of search engine optimisation (we’ll explore this later).
- also, your site is more accessible: not only does using CSS allow you to make sure your site looks great on any device, but you also get to render your content differently, to cater for various needs (voice, Braille etc.)
- finally, all this makes your site, and you, implicitly, look more professional: in addition to everything mentioned before, as you can imagine, with a large site, chances are that if you were to go in and make individual styling changes, you’d forget a page or a title etc. resulting in a messy, inconsistent site. Consistency – good. Inconsistency – bad.
What do I need to get started learning CSS?
If you’ve got everything you needed to get started with HTML, you are ready to start to use and learn CSS. As before, you’ll need a machine, any will do, regardless of the operating system (Mac, Windows, Linux); then you’ll need a code editor – which, again, you would have already set up when learning HTML. And finally, you’ll need a web browser to check / text your code (Chrome, Firefox, Safari).
Of course, since you’ll be studying using online resources – you’ll need an internet connection.
You’re all set.
OK, I have my HTML file; now what?
Now you create a new document and then you save it to your project folder. Give it whatever name you will but be sure you save it as an .css document (with a .css extension).
Here’s what you’ll need to learn to get started:
[checklist_in_post]
- Syntax
- Selectors
- Comments
- Colours
- Background
- Borders
- Margins
- Padding
- Height & width
- Box model
- Outline
- Text (alignment, decoration etc.)
- Fonts
- Icons
- Links
- Lists
- Tables
- Display, max-width
- Position
- Align
- Opacity
- Navigation bars
- Dropdowns
- Flexbox
- Grid
- Effects, transitions, animations
[/checklist_in_post]
You can check the items off as you go (they’ll stay checked off).
If you go through this – you’re on your way. To be clear – this should give you the basics so you can be comfortable enough to continue working – there’s A LOT more to CSS.
Here’s where you can go to start learning.
But – you know the drill by now: before you get into all that…
…maybe watch this What is CSS video by Jeremie Patonnier, who you know already from the HTML learning plan. He’s back with another beginner-friendly video that sets you off on the right foot. Here you go:
Learn CSS – useful resources
Here are some helpful resources to help you learn CSS. You will recognise some of these from the HTML learning plan – which makes sense, since they cover both;
FreeCodeCamp (free)
FreeCodeCamp is, without a shadow of a doubt, one of the best learning resources out there. It starts you off right where you are (complete novice) and moves you seamlessly through a ton of information without you even realising. To make sure it all sticks, it offers plenty of real-life projects, and to help your employability, there are certifications along the way. Not only that but there’s a solid world-wide community of like-minded people. Hands on, practical and informational at the same time, yu get to learn by doing and gett immediate feedback, which is always helpful when you’re learning. You also get to debug your code early on – another useful addition. You simply cannot go wrong with them but, be warned, it’s highly addictive; you’ll be coming back day in, day out, to make sure that streak is not broken!
Mozzila Developer Network (MDN) (free)
Have a look at the Mozilla Developer Network web docs page. You find here an introduction to help you learn CSS (select it from the left side menu) and lots more valuable information – that can come in handy both now and in the future, so be sure to bookmark this resource. Be sure to follow all their links – they point you to many CSS goodies.
W3C Schools (free)
W3C Schools: W3C is the consortium that actually maintains CSS – so it makes sense that they are a good source for learning. As with their HTML resources, they have laid out their content in a very clean, straightforward fashion, with a good, clear structure, bitesized content, some very handy recommended practices, examples of code in practice and plenty of very exhaustive lists . They also provide plenty of examples and opportunities to go off and try it yourself so you can see each feature in action. As you progress, you can test your knowledge with their exercises and their quiz and you can even get a little certification while you’re at it (although the jury is still out on its utility / relevance; I’d say that a nice portfolio project would weigh way more…).
Khan Academy (always free)
The other learning site I will swear by any day is Khan Academy. Their courses, including the Intro to HTML&CSS – making webpages, have got everything – the structure, the videos, the examples, the challenges, But on top of that – there’s a tab with documentation, summarizing the essentials, You get to practice on their model code – and even make you own cool little spin-offs that you can then share so you can get feedback (and/or accolades 🙂 ) and, last but not least, there’s a transcript that may come in handy if you have any particular limitations. Oh, and there are many language versions available, in case English is not yours.
EdX (free-ish)
REALLY great site with some stellar courses (I’ll tell you more in a different article); I found it brings incredible value for free (or a small amount, should you choose the certification path (by the way, their certificates actually count for something since they are issued by *major* universities and your identity is verified at every step of the way). Have a look at HTML5&CSS Fundamentals by W3C and Microsoft on edx.org – with 300.000 people enrolled! For the free version get an account, enrol and choose Audit this course. It brings you a mix of video, background info, quick quizes,independent exploration and more.
Finally – LinkedIn Learning and Pluralsight: a couple of paid options (amazing value at a relatively small cost)
While not free – LinkedIn Learning (formerly Lynda.com) is my absolute go-to for almost all my learning. There’s NOTHING they don’t have – and this is especially true when it comes to learning HTML. Go ahead and take advantage of their free trial month and try a course (or five :)) out of their catalog of some 220 HTML-related courses. You can try the HTML Essential training. The courses, absolutely all of them, are extremely well done – not just in terms of content but also in terms of the presentation and learning resources. Since their courses are all bite-sized video – you get to see, stop, think, do, rewind and so on – which is practical especially as the difficulty level (eventually) spikes. A word of warning though: you will get hooked!
Pretty much the same can be said for Pluralsight – extremely high quality, well delivered courses created by their team of some 1500 expert authors! The only difference is that Pluralsight seems to be geared mostly for professionals – but that doesn’t mean they don’t have some good beginner courses. Take this for instance: Introduction to CSS – maybe take advantage of their 10 day trial to check it out.
A few other resources I found really helpful & well done:
- Learn to code HTML&CSS by Shay Howe
- CSS Basics – main concepts and principles explained by BitDegree
- CSS Tutorial by HTML.net
- CSS Tutorials by Landofcode.com
- CSS tutorial by TutorialBrain
- HTML&CSS is hard (but it doesn’t have to be) by Oliver James at Interneting is hard
- CSS Crash course for absolute beginners by Brad Traversy
- CSS for beginners the easy way by html.com
- Learn CSS by CodeCademy
- Dash by General Assembly
- The magic of CSS by Adam Schwarz
- Need a basic setup to work with? Download the HTML5 boilerplate (kind of like a template) here. Now, it says HTML – but it’s a lot more complex than that. In fact, when you first look at it, it’ll look a lot more complicated since there’s more than just HTML and CSS there – but tinker away and little by little it’ll all start to make sense. And it’ll give you a good start into the next step – JS.
And two bonus resources:
As with HTML, whatever you choose to start learning CSS, it is CRITICAL to not just read and read again; practice is key. Be sure to practice each new concept, to try it out on your own – it’s really the only way to actually make progress.
Your next stop: Learn Javascript – study plan and resources – or, if your need to see the big picture, head over to the Roadmap to web dev.
All done! Get to work and let me know how these work for you and if there are other resources you think I should include – drop a line in the comments below!
Leave a Reply