How to learn HTML / CSS / JS from scratch, without a mathematical background, without a clue what it is and accordingly without a specialized education?
(Clarifications: this knowledge which are described in this article is not enough to find work. This is the “skeleton,” the “alphabet,” so to speak, in order to continue further education)
Where to begin?
I hope this article and resources will help you to save your time a little and more correctly direct your time and energy, and not run from the link to the link, choosing which course to begin , like courses «frontend in 2 weeks…and you are ready to start working after our courses».. 🤨
If a year ago I was told that to study in such a “priority” my life would be easier, so I decided to simplify your life ☺️😄
There are a lot of resources, lessons, courses, online courses on the Internet … and especially those who promise “Frontend in 3 months” ….
Of course, I don’t know, maybe there are geniuses and assiduous people who just sit down and do it … in 3 months … and find a job right after …
This case, of course, is not about me …
I belong to those people who “sat down — read — didn’t understand anything — closed — went to cry” … yes, yes, that’s right ..
A month later I open again … forgot everything that I’ve read before .. and start to learn all over again …
But! The secret is that if you read 2–5–10–100 times, then at 101-th time you will get a revelation !!! YES!!! Exactly!! Everything works that way 😄
Do not despair if you understand absolutely nothing, if you think, “Why did I get in there ?! Maybe it’s not mine ?! Why am I wasting my time .. ”- these are exactly my thoughts, almost every day …. .😄
But, when you see that a year ago you didn’t understand what was happening, and now you can make up “websites”, then your self-esteem is very much increasing 😄 .. And the most important thing is — do not read articles about “artificial intelligence” or about a 14-year-old the girl who made a startup for $ 10,000,000, and regrets that she started coding too late …. It all just lowers self-esteem, and you start crying 😁
Nevertheless, by what chronology and in order I still managed (I don’t want to say “learn,” I’m only in the process), but in general to understand what is going on here .. and understand about what, why, when and where questions? 😄
What is NOT worth to do if you are a complete beginner and know nothing about front-end?
Do not go to paid offline courses that offer to make you a programmer in 1–3–6 months.
The shorter is the course term, the more concise the program of the course, and a very fast pace, which, I think, 90% of people can not do.
In the description of the course, of course it will be: “You do not need to know anything, from 0 we will teach everything ourselves… just come ..”.
If you draw a parallel, it’s like a languages courses where you are told, we will learn the alphabet, spelling, pronunciation of sounds .. and together we will study from 0 … but it turns out that you come, and first of all they show you a picture of the alphabet — did you remember the letters? Now let’s write dictations, listen to texts and answer questions about the text in a NEW language and lets communicate only in a new language … 😳
I think that after the first lesson you will be shocked, you won’t understand what is happening here, and you don’t feel like you want going there …
At such courses, usually there are 20–30 people in the group, of course, that in 2–3 hours (and this is theory + practice) nobody will “chew the information” everyone, and all that happens in the end is that you simply rewrite from the screen the code, without delving into it … after 3–4 lessons, you absolutely don’t understand what is all about .. they don’t check your homework .. you don’t do it … the end of the course — you scored and don’t go to them …
(I’m repeating, this is my personal experience, maybe someone has a different story with offline courses)
Bottom line: in vain spent money, it would be better to buy a course (cheaper!) On Udemy or Coursera.
Where would I start a year ago and in what order… my example ..
Also, I “created” (sounds loud 😀) for you my own examples and exercises that you can practice on.
1. Learn the basics of HTML.
Like it or not, but we should start with the theory.
On the site https://www.w3schools.com/html/default.asp we go through all the “lessons” in a row. At the end of each lesson, there is a Quiz Test.
When we figured out a little what is happening, on the site https://learn.freecodecamp.org/ we go through «Basic HTML and HTML5» in the form of small practical tasks.
Also, for the theory we use «MDN web docs» https://developer.mozilla.org/en-US/docs/Web/HTML
When we already, have an little idea about HTML — go to CodeAcademy https://www.codecademy.com/learn/learn-html
The above resources are free, some just need registration.
My exercise examples
1. Make the easiest website to deal with HTML tags.
2. Make a website on your favorite subject. (like Wikipedia page).
2. Learn the basics of CSS
Sources and resources are the same, the order is the same.
We start with the theory at https://www.w3schools.com/css/default.asp.
Continuing to practice «Basic CSS» at https://learn.freecodecamp.org/
Read https://developer.mozilla.org/en-US/docs/Learn/CSS
We learn CSS and make a website at Code Academy https://www.codecademy.com/learn/make-a-website
https://www.codecademy.com/learn/learn-css
Additional topics:
- Selectors — Diner selector exercises — https://flukeout.github.io/
- The most understandable explanation of flex and grid https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
My exercise examples
1. Change the colors in the fonts.
2. Text stylization (fonts, colors, underline).
3. Selectors.
4. Flex.
5. Grid.
6. Open the site you like, try to do the same (for example: a blog, a restaurant, hotel, wedding organization website) using CSS.
All resources for buildings with ready-made examples are here:
https://github.com/YaninaTrekhleb/learn-html-css
3. Learn the basics of JavaScript …
here, I have almost nothing to advise, because I’m in the process of learning, learning and learning 🤓 .. I think it will be possible to write a sequel on JS when I find a job .. 😄
From theory and mini practice, all the same resources
https://www.w3schools.com/js/default.asp
https://learn.freecodecamp.org/
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://www.codecademy.com/catalog/language/javascript
I hope this article will be useful to you and wish you patience and patience in your studies! 😄 🤯
