Useful Tips

HTML and CSS Tutorials


In fact, if you want to learn and start using HTML and CSS, you can do it in a day or two. One has only to competently approach the learning process and choose the right source of information.

In this article I want to give some advice to those who decided to replenish their knowledge and go over the edge of visual website development and look at least a little under the hood and find out what and how it works.

Yes WordPress pampers us and allows us to create simple projects without knowledge of programming languages.

Although the HTML and CSS languages ​​can hardly be called programmatic, they are most likely hyper-textual markup languages, but nevertheless they underlie everything that we see on the Internet.

I will not agitate you to buy this or that super-course or training. No, I’ll give some tips on how to learn HTML and CSS better and how to achieve results.

In addition, this article I will open a new section on Info-m in which I will publish the usefulness of layout, design and other features.

So let's go, where to start?

1. I think you should first install a convenient and comfortable editor for the code. One of the leaders at the moment is Microsoft's VSC or Visual Studio Code

I recommend downloading the editor from of. site and here is the download link.

How to install the desired language, I think you will find instructions on the network there are more than enough of them. VSC is flexibly customizable and extensible. Thousands of extensions have already been written. But I think you will have a boxed version at the beginning.

For those who want to make excuses about customizing the editor for themselves, here’s the video, it’s not mine, but I’m too lazy to shoot it and Alexey (the author of the video) explained everything very cool and showed it.

Starting from this post, I decided that it’s worth publishing other people's videos on my site, especially if these are high-quality videos by professionals.

1. HTML Academy

A cool resource for who starts from scratch.

Register for free and in an interactive, game form, take the first incoming course, then more difficult and so on. Courses are mostly free there, there is an interactive task check. In general, I recommend the very start for beginners.

At one time I thought to get myself an account there in order to keep my subscribers, but as usual there is not enough time))

HTML, CSS for beginners from scratch and beyond.

Remember, in the last articles I already said that I will soon talk about all the resources, sites, services, courses that I find useful and effective for learning HTML and CSS? This time has come, today I will tell you what I used and where I continue to do at the present time.

What I will talk about is verified in my personal experience and I guarantee the quality. If you use my recommendations, then the time spent will not pass in vain.

I will assume that at least in general terms you know what HTML and CSS are, what you can do with them, and why you need all this. The effectiveness of my recommendations and your training will depend on how well you already master these disciplines, what goals you set for yourself, and what level of skill you plan to achieve.

In this article, I will focus on beginners, on those who are just taking their first steps in learning HTML and CSS, it is for them that my advice will be most relevant. After going through these stages, you will definitely understand whether you are interested in further studying and improving your skills. If so, then continue to practice and comprehend all the subtleties and new opportunities.

I myself am now at this stage, I gradually pass advanced courses and lessons, I study the possibilities of HTML5 and CSS3. At the same time, I get great pleasure from the classes, as well as from the feeling of flexibility, great opportunities and new ideas that are born in this fascinating process.

2. Video courses.

At first I wanted to post a whole list of free pieces, but unfortunately almost all of them are outdated and the authors do not bother updating. Yes, a lot has changed with the transition to HTML5.

Therefore, I will recommend so far only one that is worth going through and getting the first skills.

The course of Mikhail Rusakov is quite informative and that he is good at homework.

Free HTML and CSS Course

More than 6 hours of lessons + exercises

I even planned to post all the lessons of this course on my website with the analysis of DZ, if you are interested, write in the comments.

My way to learn HTML and CSS

My first acquaintance with HTML and CSS took place at the first courses at the institute (although I got involved in programming much earlier), then I realized what each of them was responsible for. In those days, it was still customary to actively use the built-in styles, and build a grid of pages using tables. Only a few switched to divs, about which I did not know anything then and did not attach importance to these points.

Having sorted out some basic points, I lived with this inferior and outdated knowledge for a long time. I tried to create my own pages, to prescribe styles for them. Most recently, I reworked the template for this blog, as a result of which the design also changed.

And then, digging into the code for many days, I realized how limited and insufficient my knowledge was. It’s like an invisible framework into which you place yourself and live in them, getting used to this state of affairs. There was no freedom in the implementation of creative ideas and thoughts.

There were endless questions: “how to do this and not ruin everything else?” That I decided. I don’t remember my thoughts lingering on such questions for a long time: “Is it right to do this in this situation and am I not inventing a second bicycle with my inept hands?”

The time came when this state of affairs ceased to suit me, and I finally decided to take control of the situation. At the end of the year, this idea appeared on the pages of an article about plans for the coming year. But now these plans are being implemented, and I can only think: "what bothered me, and why I did not do this before?" This is similar to how recently I mastered the skill of typing on the keyboard with all ten fingers and now manage to fix thoughts in the form of sentences.

Online trainings!

Perhaps one of the most productive teaching methods. Excellent code, you first watch the video, then they give you a task and then also check.

I will give links to two, one free and the second for a nominal fee, but with cool mentors.

I do not participate in affiliate programs of these resources, I simply recommend them as good sources of knowledge.

Quite an informative course, we start studying from scratch and before placing the HTML site on the hosting. There are simple DZ answers to which you post in the comments under the lessons and Artem checks them.

Of course, there are delays in checking, but you need to understand that the project is free and Artem can’t sit and “graze” every comment.

Nevertheless, the course is quite voluminous, as many as 55 videos, so there is something to work on.

The second training I want to recommend is Web Layout Getting Started by

It is paid, it costs, in my opinion, $ 9. But this money you pay for the help of a mentor who checks your TK and leads you.

In total, I am aware of voluminous 7 lessons, but by the end of the training you will be able to write your first website in pure HTML with CSS and even understand how simple commands work in JS.

I give a link, it is not an affiliate, Wayup is still "gobbling" and will not connect an affiliate program.

But the course is really good and working, so I safely recommend it to beginners.

That's probably all I wanted to tell you today.

In the end, a couple more tips on how to best learn and what to do next.

  1. Do not be discouraged if you don’t understand anything from the beginning, it happens, try to write code and see the result in the browser
  2. Do not try to learn and understand everything in 1 hour. You can learn HTML tags, but you have to tinker with CSS.
  3. Practice more. Take it, create a clean HTML document and start creating the structure of the first page.
  4. Make a bookmark folder in your browser and put there useful tips and tricks that you find on the network
  5. What is not clear, ask, I will be glad to tell you.

Stages of learning HTML and CSS

It is most convenient to break the whole process into stages:

  • Introducing HTML and Learning the Basics
  • Introducing CSS and basic concepts
  • Advanced level. Learning HTML5 and CSS3

It is well known and all of us have repeatedly verified that repetition is necessary for remembering. But so that the process is not boring, we will not repeat the same thing many times. Instead, we will turn to different sources at each stage, thus expanding our knowledge and understanding.

And even if somewhere one of the moments seems not entirely clear, in another place you will close all the white spots, feel confident and will be able to move on easily.

Adhering to this plan, you will gradually get acquainted with the technologies, easily remember everything in practice, as a result you will become very strong specialists in HTML and CSS, you will know the new technologies HTML5, CSS3, as well as the best and most modern approaches to page layout.

Best HTML and CSS tutorials

And here are the resources themselves, to which I will refer and which I urge to actively use:

  • Courses of Evgeny Popov
  • Codecademy, HTML & CSS Course. We will use only the lessons. Tests and Projects there are paid, we can do without them.
  • HTML Academy. You can use my affiliate code 1115104d039 to get a good discount on advanced courses.

We should also mention the Code School, where the quality of the material is high, but it is paid and will be convenient only for those who know English well.

Perhaps I’ll also mention the directory, which you will often find in the future, using a search engine.

It is no coincidence that the courses of E. Popov come first. This person will be your guide in the early stages.

I recommend Codecademy for pinning. Here the tasks are in English, but it is quite simple and should not cause complications.

I consider HTML Academy to be the strongest and most serious school of Russian-language resources, it is there that I now take advanced courses that are available only by subscription, but it is not at all expensive (300 rubles per month) compared to Code School (the price is from 20 to 30 dollars depending on the shares held). Using my affiliate code at HTML Academy - 1115104d039, you get a discount on your subscription.

We will contact HTML Academy every time after the courses of Popov and Codecademy, this will allow you to feel calmer and more confident when solving problems, some of which are very serious. After all, not everyone has iron nerves.

Learning Plan for Easy Mastering HTML and CSS

I suggest you stick to this plan. I did this myself, I liked the result and the learning process itself.

  1. E. Popov's HTML Course. What you learn there and how to get it, see my article.
  2. Codecademy, HTML & CSS Course. Unit 1, Unit 2, Unit 3
  3. HTML Academy, the first six courses before the "Get to Know CSS" course, later
  4. E. Popov CSS course. See details in my article.
  5. Codecademy, HTML & CSS Course. Unit 4, Unit 5, Unit 6. At this point we will finish using Codecademy.
  6. HTML Academy, Starting with the Acquaintance with CSS 5-year course, ending with the CSS Text Typing course
  7. Course: Practice HTML5 and CSS3
  8. HTML Academy, all remaining courses from the basic level, starting with the "Block model of the document" and ending with the course "Finishing tests." It may seem to some that Popov’s layout course should be taken after HTML Academy (i.e., swap the last two steps). This point of view is also worthy of respect, but it seems to me that you will be more responsible in taking courses from HTML Academy after you turn up the pages proposed by Eugene, and it will be remembered better and better.
  9. Advanced level. We only have the HTML Academy school where we need to go through further levels by subscription. Do not forget about my affiliate code, which I mentioned above. Learn Advanced Courses and Preprocessors. At the time of this writing, I am in the Linear Gradients course. I plan to take all these courses to the end.

Here is a work plan for those who want to learn to understand HTML and CSS well. It may seem that all this is very long and difficult. Fear, as you know, has large eyes. It all starts with the first step. If you are not lazy and work diligently in your free time, then the list will be shortened.

Undoubtedly, I did not talk about other resources that can also be useful. If you know these, not necessarily only in HTML and CSS, then tell us about them! It will be great if you leave the information in the comments.

Courses on HTML5 and CSS3, modern layout and web design

I decided to tell you about several more courses on HTML and CSS, as well as on topics of modern typesetting, web design and website development. My training plan for HTML and CSS, which I proposed above, is tested and gives excellent results. But, perhaps, it will be inconvenient for someone to jump to different sources, I want everything to be in one place. In this case, engaging in professional author’s courses with detailed lessons that I will talk about will be more pleasant and even more effective.
Below I will just give you a list of training courses, and you yourself will see who likes it.

  • Adaptive layout basics in HTML5 and CSS3
  • HTML5 and CSS3 from Scratch to Pro
  • Site layout practice for mobile devices
  • Web design: a practical course in creating a landing page
  • Web designer is a professional. Create popular layouts
  • Web Development Trends
  • All about creating sites
  • Step-by-step website creation plan
  • JavaScript & jQuery from scratch to pros
  • Secrets of Practical SEO
  • Modern PHP: work with VKontakte
  • Learn how to create beautiful, modern subscription and sales pages.
  • Blogging school

I think that such a large selection you will not meet anywhere else. I myself collected them for a long time, which makes it even more pleasant for me to share them with you. Better bookmark the page so you don’t regret it later.

One more minute. I thought, what if the topic of making money on the Internet interests you too.

Do you know that there is a lot of remote work related to HTML and CSS? Today, many work through the Internet and travel around the world! What are the most sought after online professions? How long does it take to learn? Learn from the book

Thank you for your attention, I hope that the article will be useful. Express your thoughts, share your impressions! All of this is welcome.

Stage One

It should be understood that HTML and CSS are not programming languages, but a markup language and cascading style sheets, respectively. In other words, with these languages ​​you specify the layout of elements (headings, paragraphs, links, etc.) and style them. It is also very important to remember that without a good theoretical base you cannot begin to practice.

Stage Four:

After you have mastered all the HTML / CSS material, get started. The more practice, the better. Here you will need a text editor, PSD layouts and, as I wrote above, patience and perseverance. You can use any text editor you like. I will highlight these:

  • Sublime text
  • Atom
  • Visual studio code

You can easily find free PSD layouts on Google.

Stage Five:

And finally, some more useful resources:

And a few recommendations: The more practice you have, the faster you will learn all the pitfalls and just beat your hand. Download PSD layouts and typeset, layout, and typeset again. Believe me, everyone has such a moment: “nothing happens, I’ll give up everything and do something else,” but don’t give in to this, bring it to the end. The world of web development is very wide, and layout is just the beginning.

Front-end developer on N-iX,
Lecturer at Hillel Computer School.