What is a structured way to learn HTML and CSS ( Part 1 )

I get asked a lot of questions about how someone should learn HTML and CSS, and if they know it enough.

I have checked a lot of websites by new ‘front-end’ developers, and they are missing a BIG picture of what is it means to know HTML and CSS.

When I started to learn HTML and CSS, I thought it’s easy I got the basics, I knew how to make a layout, a circle, how to style a component a certain way and so on. While that is a step further – I was wrong.

HTML and CSS it’s not just about making the website look pretty and “just make it work” – like some developers say.

I’m going to give you out a well-detailed path that will help you succeed in learning HTML and CSS – something that has helped me.

We’ll worry about JavaScript in the next Article.

 

Get to know HTML and CSS

The first step to learning something is to jump right into it, the thing you want to learn. I know, it’s vague. Let me explain.

When you are new to programming, or in this case ‘HTML and CSS’ ( which is not programming ), the first thing you want to do is know what is HTML and CSS.

Ask your self these questions

What is HTML?

What does HTML do?

How do I find different tags?

Same for CSS

What is CSS do?

What does CSS do?

How do I find different properties?

 

Get to know what you’re working with

If you’re new you probably don’t know the answer to those ‘specific’ questions. I would recommend for you to get the answer, and come back reading.

TIP: You can find the properties/tags or as you might call it “commands”, by using documentation. Ask the master (Google) any question in a format such as “Documentation for [whatever you want]”. In this case, you want to put in HTML and CSS. But don’t put them together, as HTML and CSS are two different things.

You’re not going to google on how to speak Asian when Chinese language and Japanese language are different. Same with the documentation.

Play Around

Now that you know what you’re getting into, I want to emphasise the importance of taking action and doing it.

You need to write some code. That’s the only way you’re going to learn anything – is by struggling.

You want to get a feel of what the language has to offer, what you can do, and the struggles you had.

 

GO throw the HTML and CSS

A Path for you

Out of many 🙂

Start with CodeAcademy (https://www.codecademy.com/) – get to know what is the syntax and how you can use it. Things we talked above.

Try on your own. Make an account on CodePen (http://codepen.io/) and exercise there if you don’t want to set up local files on your computer.

Try to build things on your own. The best way to learn is to build things – that’s why I have made LoveToCode, where I guide you step-by-step on how to build real-life web projects, using the technologies like HTML/CSS, Sass, JavaScript and more.

I would sign up for TeamTreeHouse

TeamTreeHouse gives you a nice and solid understanding of CSS. It will teach you the concepts on how you can improve your code – however, I take it even FURTHER! 🙂

 

Okay, you still don’t know what to do?

Try to build this:

 

This is a smile component that has covered quite a bit of the CSS – with functionality there is even more.

Ask your self this questions

How do I make the card?

How do I position the ‘Category’ tag (left top) there? What about the title, what about the ‘View’ button?

How about making the title and description? (that’s easy).

What about having the author box? The text is centred with the author picture, horizontally centred.

Oh, you noticed that the top header has no paddings, but the bottom does, how do I do that?

How about some WebSite layout? Can you make a layout like this?

The blue colour is the row.

This is a very basic website layout. You have a header, within the head, you have the logo on the left and the navigation on the right. On the mobile menu, which is crucial in these days, you have the same menu displayed differently. You click hamburger menu, and it goes into the cross when clicked, which shows the navigation items/links stacked vertically.

How about the big banner with ‘big bold text’?

What about the articles in orange?

These are the things you should be able to do with HTML and CSS, optimally you should use Sass, a task runner like Gulp or Grunt, or even better WebPack. The code should be modular and scalable, using the right responsive design methods. You might consider using methodologies like SMACSS, BEM, ATOM and such. Don’t be afraid to mix them.

You might need to know just a little bit of JavaScript, but don’t let that scare you!

A short overview of what you need to know

HTML/CSS and Sass

Front-end Methodologies: BEM, ATOM, Smacss etc…

You need to learn about Modularity, scalability and reusability. Responsive design is also important for that matter.

Some task runner like Gulp/Grunt (I recommend Gulp) – or perhaps WebPack, although that might be hard at first, so id learn Gulp if I was starting.

Learn how to make buttons – small, medium, large (size). How to give them a color, they need to be descriptive.

Here is how a clean coded button might look like:

<button class="btn btn--large btn--primary">Awesome!</button>
/* Default Button Styles that every button will use */
.btn {
   font-size: 0.8em;
   padding: 0.5em 0.7em;
}


/* Different sizes */

.btn--small {
   font-size: 0.5em;
}

.btn--medium {
   font-size: 1.2em;
}

.btn--large {
   font-size: 1.5em;
}

/* Colors */

.btn--primary {
    backgorund-color: orange; /* That might be our brand name */
}

.btn--fire {
   background-color: red; /* let's e descriptive about it */
}


Button… primary, secondary, tertiary etc…

Snow, fire and so on. Be descriptive.

Review

Play around.

Learn.

Play around and try to build stuff.

Build.

Learn.

Build.

Learn, learn learn.

Build build build build.

Learn.

Build.

Repeat 🙂

 

That’s all I got for you in this article.

Happy Coding! 🙂

Wait!

There is one more thing before you go away – it’s going to be FREAKING HARD!

Those who say it’s easy, they either spend years of practice, and now they know this as if they knew it since birth, or they have no clue what they are talking about.

This is a long process, so you won’t get good at it in a week.

Stay tuned for the next article where I talk about JavaScript!

 

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!

Comments