311 reads

How To Start Coding Right Now

by Diego LiraSeptember 18th, 2020

Too Long; Didn't Read

What if someones asks you to build a website today, would you think that is possible?

People Mentioned

Companies Mentioned

featured image - How To Start Coding Right Now

What if someones asks you to build a website today, would you think that is possible?

The last couple of months have been challenging for the whole world. As a business manager running a SaaS company, I saw all my clients shut down to the pandemic from day one.

Many people lost their jobs, a lot of plans put on hold. But as a door shuts down, many others can open to you.

You may have thought to learn how to code before, but never started. I was once at this position. My goal with this article is to show not only where you can start coding but also, that you can start something new exciting and challenging.

It is common for us to have business ideas, insights, and products that would make our life easier.

Keep that in mind when you start your code journey. So, when you finish a course or a tutorial, you have something practical to work on and put what you learn to test.

Also, it will help you to focus on what matters. It is impossible to learn everything before beginning a project. Learn your way through and study what you need as you go.

Remember that a tutorial will teach you to solve a specific problem only. Use it as a guideline to tackle your project, and move a step forward. It will help to merge what you learn and may lead to what steps you need to take next.

Without further ado, let’s begin.

If this development concept is brand new to you as it was for me a while ago, the best way to start is to learn HTML and CSS. Have you ever heard about them?

They are the structure (HTML) and the styling (CSS) of every website you browse. Of course, some sites can do a lot more than others. But the truth is you can replicate almost every website with these two concepts. Which makes it a good starting point!

Let’s talk about the website’s structure (HTML). They consist of semantic tags like <header>, <body>, <article>, <footer> and many others. Check out this example of an HTML file:

Can you guess what is going to output? If you said a picture of a puppy, you are correct. By the way, this acronym stands for Hyper Text Markup Language, the keyword there is Markup as you may notice.

HTML will organize your website in a way that humans and computers can understand. For example, when Google reads through your site, it will know what it is about and shows it in search results.

And what about the CSS? Without it, there is nothing besides boring, plain texts shown to your user. Cascading Style Sheets or CSS will style your website using fonts, colors, animations, and even shaping it to different screen sizes. So your site looks great on a desktop, tablet, or smartphone.

Here is an example of CSS use, can you guess the output?

Yes, caption from the dog picture will get a font of the size 15 pixels and get the color blue.

Do you agree that this is not intimidating and something we can start right away?

Puppies and blue color fonts may not be your thing. Let’s check how to learn HTML and CSS using amazing available content out there.

Our first stop is at Code Academy, which has a free tier plan where you can take an introductory HTML and CSS course. It provides an easy to understand learning path. And at the end of this course, you will have built and deployed a live version of a personal website.

What I like about them is that you don’t need any setup on your computer. As you go through the content, you can practice on the website and know if you nailed the content. Also, a gamified progress style is a boost to your focus and learning.

My tip here is to commit yourself every day to make some progress. Doing it 30 minutes to 1 hour every day is better than 10 hours in one day!

After you finish this course, you will now have a good understanding of HTML and CSS.

Next on the list is Free Code Camp, a website with a similar approach to Code Academy. You will get to check your progress as you pass the lessons and practice on the browser as well.

https://www.freecodecamp.org/

To end this shortlist, another great resource I am following is the Odin Project. It is another free and useful resource to learn HTML and CSS.

Unlike Code Academy and Free Code Camp, you need to follow the tutorials on your computer, not in the browser. Now, you should be more confident and have a better understanding of web development. For that reason, I recommend the Odin Project as the next step.

While in the Odin Project page, select the Front-end only course and take the Web Development 101. For this article, we will recommend taking the course until the HTML & CSS course. Here the method consists of replicating real-life projects.

That will allow you to face a sort of different problems. It will teach user interfaces, the use of frameworks like Bootstrap, and to take a further look into CSS.

Currently, I am enrolled at the Microverse (https://microverse.org) undertaking these projects. You can check out my GitHub here (https://github.com/lirad).

https://www.theodinproject.com/

All resources shown before go deeper than HTML and CSS. But, mastering these skills first should give you a solid foundation. Creating a base for what you want to study next, remember that we talked about having a project in mind.

Studying solo is hard, and maintaining a focus could be a challenge. Don’t feel alone though, thousands of people are taking this first step like you right now.

There are several places where you can reach for help. Stack Overflow (https://stackoverflow.com) is an example of a massive developer community. Chances are your question is already there asked and answered by someone.

Learn how to use Google in your favor when you get stuck. Always ask and be curious there are plenty of people out there willing to help.

In twitter, for example, you can join the #100DaysOfCode challenge, where you can interact with others and make progress together.

https://www.100daysofcode.com/