Well, this is obvious, you always start with the basics. HTML is the backbone of the Internet. It’s not a programming language per se, but it’s a tool that every web developer should master.
What does HTML stand for?
HTML is basically a set of building blocks, that we can use to define the structure of our website. When I explain HTML to people who don’t know anything about web development, I like to refer to basic human biology.
HTMLis the bones and the structure. It is the skeleton, of the human body. By itself, it can’t really do a lot, but it defines a structure.
After creating a basic website skeleton, we can get started with CSS. It stands for:
CSS is responsible for the visual part. It allows us to specify how elements (HTML building blocks) should look. We can define elements sizes, colours, backgrounds and many many more.
Going back to my biological metaphor, we could tell that CSS is the characteristics of the person. It tells us about skin colour, eyes, height etc. At this point we get a human being, that doesn’t do anything yet, but has body(HTML)and look(CSS).
This step is essential. Don’t worry that you don’t know something. At this point, Google and StackOverflow should be your best friends. Whenever you don’t know something, try to google it. You don’t need javascript yet, so you can simply ignore it for now. HTML & CSS are the two skills that will land you your first job.
When starting out, it’s a great idea tocopythings that are popular. Try to useHTML&CSSto create a copy of aFacebook postorMedium navigation.Go to Airbnb and copy their footer. It is essential, that you don’t spend too much time on theory, and that you spend it coding.
I recently saw a tweet by Chris Coyer that really resonated with me:
Perfectionism will slow down the process of learning, that’s why we should let ourselves fail sometimes, and gain more knowledge, quicker.
Next step, after building a few basic layouts, is JavaScript. It is a programming language created for Netscape corporation , by Brendan Eich, in a really short time. It was supposed to be used for simple things. Nobody could predict that it will be used in large-scale applications and basically in every existing environment it could be run on. Let’s also get a few misconceptions out of the way:
JavaScript evolved a lot over the years. There are a lot of libraries and frameworks that allow us to write it easier, better and faster. If any of those words are new to you,do not worry! You will learn about everything when it’s time.
It’s easy to get weighed down by the number of new things you learn. One thing I learned when I was starting out, is that everything will become clear when it’s time. Consistency is the key. If you do something regularly you will achieve your goal. Something will ‘click’ in your brain, and you will get concepts that were impossible to understand just a week ago!
Javascript is a huge topic, and it is like a window to the world. If you learn it you will be able to create desktop, backed and even mobile applications. It’s important to know it well, but also remember that to land your first job in front-end development it’s not that important to know all the methods. HTML and CSS knowledge is the key to getting your first job. JS will be a big plus and you should know how to use it, but at the first stage, just knowing some syntax (language structure) and jQuery (library), will be enough.
Working with other people is essential to building great things. Julius Caesar couldn’t build his empire all by himself. Here are a few places where you can find people to work with on side projects, learn from or with, and hopefully work with.
Of course, there is still a lot of things to learn. And I mean a shitload… Probably you will still feel overwhelmed by the number of topics that you hear about.
It’s a good thing to know a bit about other aspects of web development, such as backend and databases. Understanding how the web works will clear out a lot of things for you.
Here are a few topics that are worth knowing:
| What to learn: | ||||
|---|---|---|---|---|
| Name | Info | |||
| CSS preprocessors | SASS | SCSS | LESS | PostCSS |
| CSS methodologies | BEM | OOCSS | SMACSS | ITCSS |
| many more… | ||||
| JS build systems | Vue.js | Angular | React | Preact |
| Ember | many more… | |||
Dana Saleh 2020 ©