How to Start Coding in HTML, CSS, and JS: The Ultimate Guide for Beginners

How to Start Coding in HTML, CSS, and JS: The Ultimate Guide for Beginners

Coding is the language of computers. It allows us to create programs that automate tasks, such as sending emails, creating spreadsheets, or even playing games. The good thing about coding is that anyone can learn it.

Learning to code is a great way to get started in the tech field. There are plenty of resources out there to teach you how to program and become a web developer. In addition, there are also numerous opportunities for those who already have experience in web development to earn extra income through freelance projects.

Learning programming requires patience and practice. There are no shortcuts. The good news is that once you get started, you'll see immediate benefits.

In this article, we'll see the different steps that you should follow to get into web development and develop your coding skills.

1)- Make a decision

The first step to do before starting anything is to make a decision.

banner8.png

Programming is very difficult. It takes time to grasp even the basic concepts of the programming language which is Javascript.

And when I say that, I’m not talking about someone who wants only to take a look at the lines of codes to have a general idea of what programming looks like and move forward. When I say that programming takes time I’m talking about mastery, about someone who wants to master the game and create beautiful and meaningful things from what they learned to serve people.

Before jumping into programming, and specifically web development, ask yourself if this is really what you want to learn. Ask yourself if you’re doing it because you really love it or if you’re doing it just for the sake of earning money because you heard jobs in web development pay very well. Or maybe you’re doing it just to show off because you heard that all people who are into programming are some kind of “geniuses“?

Because you will face a lot of challenges down the road. There will be moments when you’ll write the code and it will not work, and you will not even understand why or what. There will be nobody there to help except your best friend “Google“, and even by looking in “Google” sometimes you will not find the answer to your problem.

banner7.png

Programming is a lonely road, if you are serious about it and want to become successful it will require a lot of sacrifices, like any other area of life.

For example as a sacrifice, you should cut off this “Going out” with your friends every single day and waste time.

I’m sorry to break it down to you but if you are serious about programming, you should sit every day for a certain amount of time, 2 hours, or 3 hours or 4 hours, whatever you feel comfortable with, and work on your programming skills. Because if you don’t revise what you learned yesterday and use the programming language every day, especially in the beginning, you will quickly forget it.

A programming language is like English, French, or Spanish…

Imagine you’re learning Spanish, you start the first day, and then on the second and third and fourth day you did not revise anything, and you expect to remember everything the fifth day and be successful, isn’t this the pure definition of insanity?

So if you’re planning to go out with your friends every day and waste time, that you don’t have enough of by the way but you prefer to waste it anyway, then programming might not be for you. You should be able to say “No” when you’re friends invite you to go somewhere because your friends don’t have the same expectations as you. Your friends don’t dream big and are not mature enough to understand that this time that’s going to be wasted is actually precious and should be invested in what would benefit you and your family in the future.

I’m not saying don’t have a social life either, but most of your time should be spent in programming, that is if you’re serious about it of course.

banner9.png

That’s why I’m saying that programming is a lonely road because most of the time you will be lonely, in your room or office, typing lines and lines of code and trying to understand the language by yourself.

With all this in mind, that’s why you have to make a decision first before you start coding. You should weigh what is really important for you and what sacrifices are required for success, and see if you’re ready to abide by the rules. Because if you start programming just for the sake of showing off for example, you will not last that long.

If you don’t like programming and you’re doing it in spite of yourself, then this is the quickest way to failure.

banner10.png

2)- Adopt the right state of mind

Before jumping into programming I would like to talk about having the right state of mind first.

A lot of blogs and websites and videos out there talk only about the technical part and the books and courses you should buy to become the best programmer of 2022, but they don’t really shed the light on the truth of becoming a programmer and what it really takes from A to Z.

So one of the requirements of learning how to code is to have the right state of mind. And to achieve the right state of mind there are 2 keys: meditation and personal development.

What do meditation and personal development have to have with programming?

Most people when you ask them about meditation they will say it will help you relax and calm down. But what do relax and calm down mean exactly?

Because there is more to meditation than just “relax” and “calm down”.

banner3.png

The scientific explanation of what meditation is and how it really helps the brain we can find it in personal development, specifically the neuroscience area of personal development.

I will explain quickly the science behind that and how it relates to programming.

banner4.png

The human brain has 5 types of waves that we call brain waves:

  • Delta waves: When the brain has delta waves we say that the brain or the human being is in a delta state. Delta state is when the brain activity is very very slow. Generally, we are in a delta state when we are sleeping. Babies are always in the delta state that’s why they’re sleeping most of the time.
  • Theta waves: Theta waves are a little bit quicker than delta waves. Theta state is this state just right before you fall asleep. Before you go to bed you start feeling tired first and you start yawning and your eyes feel a little bit heavier. So this is the Theta state. When we are in theta state we feel very relaxed and we have this inward focus, and this is the state for creativity.
  • Alpha waves: Alpha waves are quicker than theta waves. When we are in alpha state we feel very relaxed and we have this passive attention, and this is the best state for learning. Because when you learn in this state, your brain becomes like a sponge, it absorbs whatever comes its way easily.
  • Beta waves: Beta waves are quick. And the beta state is the state we’re in every single day, at the office, at home, outside, when driving… It is this state where we have heightened attention, for example when you are in a meeting, you have your eyes open, you’re active and you pay attention.
  • Gamma waves: Gamma waves are the quickest. Scientists found something interesting about these waves. When we are in the gamma state, although the waves are very quick, this state of mind is where this super intelligence that everybody’s looking for happens. When you are in this state you process information real quick, you don’t struggle at all as everything becomes clear and everything makes sense. Gamma brain waves are associated with higher brain functions like cognition and memory and high levels of thought and focus.

banner5.png

I hope the picture is clear now. Meditation will help you achieve any state of mind you want. With a little bit of training, you will be able to decide whether you want to be in alpha state or theta state, or gamma state…

Meditation is very important, and having the right state of mind before starting your programming session is crucial.

You cannot start programming when you are angry or sad or upset. You have to calm down first and be in the right state of mind, and then you can start coding.

banner6.png

Personally, I find that being between theta and alpha state is really very helpful. I always try to be between these 2 states when I know that I will be learning a new lesson or a new chapter.

3)- Do some research

Start coding or programming is something that you might be looking forward to doing ASAP.

banner2.png

When you first get this idea to start programming, you get so excited, and you feel this boost of motivation and energy and this sensation that you can take on the world.

So you start with the intention that you will learn everything, and this is the mistake that most people, especially beginners do.

If we take web development for example, web development is so wide.

You can do a lot of things with HTML, CSS and JavaScript. That’s why you should do some research to see which area you would like to learn exactly.

banner.png

Would you like to make static websites? Because in this case you will not need to learn JavaScript. HTML and CSS are enough to make a static website. Or would you like to make dynamic websites? in which case you need to learn JavaScript as well.

Or maybe you want to make apps, you want to be an app developer. Or perhaps you’re interested in machine learning and AI more than anything else, and in this case you should learn JavaScript and other libraries that will allow you to build artificial intelligence.

banner1.png

So you see, there are many areas in web development, and if you want to learn them all from the beginning, you will get overwhelmed.

That’s why you should do some research first and narrow it down so that you can choose your first pick to start with and concentrate all your energy on it.

4)- Start small

Many people when they start programming at the beginning they want immediately start making the next Facebook or the next Netflix or Instagram.

The guaranteed way to failure is exactly this. Because when you start, you’re like a baby, you don’t know anything and you’re here to learn. So if you start putting these barriers and obstacles from the beginning in your way, and jump right into the big things like making the next Facebook whilst you’re still learning the basics of the programming language, then what are you expecting exactly?

Imagine if we ask a baby to run or participate in a marathon. You get the idea right?

Of course you can make the next Facebook and the next snapshot if you want. Although they seem complex, in reality nothing is complex.

Because what is a definition of complex? What do we call a complex app, or complex website, or complex system in general?

A complex system is just the add-up of simple systems. Same thing, a complex website is just the add-up of simple principles and methods.

For example, let’s say you want to make a blog website. If you take a closer look at what a blog website is exactly, it is just the addition of some simple HTML pages, combined with the storage of data in the backend, combined with some routing so that the user can be directed to the correct URL and some styling to make the website attractive.

But to build such a website, you have to learn the basics, and the basics are HTML, CSS, and JavaScript, and then add to it the API part of JavaScript, and then the database part, and then you’re done.

banner11.png

You can achieve anything you want, and you can make any website or app you want, but you have to start small.

You can start for example by making a static website that has one page, about for example a biography of a certain well-known person. Once you feel comfortable you can add to it a small function that will greet the user when they enter the website. And stop there.

And once you feel comfortable you can add to it a small form to ask the user for their name, phone number and email, and so on until you build a completely functional beautiful page.

5)-Use internet resources

There are a lot of free resources out there, especially in this day and age.

Many websites and blogs like this one offer free tutorials and courses to get you started with web development and coding in general. You just have to choose your pick.

From Freecodecamp to W3schools to Codecademy, there are a lot of choices. All these platforms explain the basics of many programming languages in a simple way.

Also, there are many communities that can answer your questions like stack overflow and Quora. So if you ever get stuck, just type your question in Google search bar and chances are you will find an answer to your problem.

You can also post your questions in these communities and people will respond to you.

If you are not much of a reader, then Youtube videos might be the best for you. Videos are fun and engaging and Youtube platform is saturated with all programming educational videos, so you can pick any Youtube video and get started.

6)- Use books and online courses

Although there are a lot of free resourses to learn programming and web development, the truth is there is nothing better than books and online courses.

A simple Internet search for “how to add a function with javascript” will provide you with many answers. You will find tens, hundreds of articles on different websites with a couple of thousands words each, a handful of bullet points and a “recipe for success”, guaranteed to help you achieve your goals.

But that barely scratches the surface of what you should be learning about functions and the tricks and tips to master them and become a great programmer.

A book about Javascript will contain not only hundreds of pages of valuable information, but this information will be structured in an easily understandable manner and with a lot more context, which will help you better understand the topic than a couple of bullet points.

Also, books and online courses are made by experts and people who have many years of experience, people who understood the real problem that others face because they’ve worked with so many students, and they’re trying now to come up with a better solution and make the process easier for you.

Also, what nobody tells you is that, valuable information, that will really help you to become a master, you will not find it for free on the internet. Unfortunately, this is how it works in real life. You can start of course with free videos and tutorials, but at a certain point, you should invest in yourself for a better future.

7- Complete projects and exercices

Once you go through your favorite resources and understand the basics and the lessons , the best way to consolidate the information is by completing some programming projects and exercises around the same topic you learned.

Because unless you put what you learned into practice, the ideas won’t fully materialize in your mind. That’s where projects come in.

Coding problems and puzzles help you develop your programming skills. They also provide an opportunity to practice solving challenging problems.

There are many websites that offer a wide range of exercises you can choose from. And they suggest also their source code as a solution.

So be consistent and do the exercises every day.

8- Conclusion

Learning web development languages gives you the opportunity to create applications that run inside any browser. You can use JavaScript to build things like games, animations, and even entire websites!

Before you begin learning JavaScript, you need to understand what the basics of computer science are. Computer science is the study of algorithms, data structures, and problem-solving techniques. To become a good programmer, you need to understand these fundamental concepts.

Once you have learned enough about JavaScript to feel comfortable coding and understood the abstract concepts, you should try building something yourself. If you want to build a website, you could use HTML, CSS, and JavaScript to create a simple page. Or if you wanted to build a game, you could use JavaScript to control the movement of objects on the screen.

Read More

How to make money as a web developer?

Did you find this article valuable?

Support Salma ABOUMEROUANE by becoming a sponsor. Any amount is appreciated!