One issue that I see regularly on Quora is that there are many people who want to learn web development, but they don’t know where to begin. I can empathize. There is so much information out there that it can feel overwhelming. When you are getting started with web programming, it can be very difficult to sift through the multiple posts and opinions that exist about which technologies newcomers should concentrate on.

If this resonates with you, then you’ve come to the right place! In this article, I am going to break down how to get started with web development by describing the steps you need to take to become a successful web developer. I will focus entirely on web development and the step-by-step process that you can take to learn HTML, CSS, and JavaScript, the three technologies that front-end web developers use in their work.

Step One: Learn HTML

HTML is a mark-up language, and it allows you to build the structure for your website. Let’s say you’re typing up an “About Me” page that you intend to publish on your new website. In order to ensure that the browser understands your content, you add HTML mark-up to differentiate web page elements such as paragraphs, images, headers, footers, etc. from one another. Most HTML tags have a beginning tag and an end tag.

For example, let’s say you have a chunk of text that you want to display as a paragraph. You would type an opening and closing paragraph tag and, the words that form the paragraph go in between those tags. Take a look at the tags that surround, “This is my paragraph of text that I wish to display on my webpage” in the example below:

This is my paragraph of text that I wish to display on my webpage.

This example has two page elements: a header (designated by the h1 tags) and a paragraph (designated by the p tags), but there are many more HTML elements to learn. For a comprehensive course, I recommend checking out Brad Schiff’s Web Design for Beginners: Real World Coding in HTML & CSS. In Brad’s course, you will learn about the relevant HTML elements and how to mark up your words, images, etc. correctly for the web. By the time you finish the HTML section, you will know how to mark up text and images properly as well as create headers (such as in the example above), forms and tables for your webpages.

Step Two: Learn CSS

The next layer that is added to a website is the style layer, also known as the presentation layer. To do so, web developers use CSS, which stand for Cascading Style Sheets. Like HTML, CSS is a markup language, which means text is “marked up” with elements so that the browser knows how the HTML layer should look. CSS handles everything appearance related, such as text color, which fonts to display, overall layout, the styling of your navigation bar, the sizes of your images, and much more.

p { color: blue; }Continuing with our example, let’s say we want to make the color of our paragraph blue and we want our header and paragraph to appear center aligned and only take up 75% of the browser width. This image is a screen shot from my text editor and demonstrates the CSS markup required to accomplish these style directives. Note how the header and paragraph elements are combined for styles that apply to both elements.

Since HTML and CSS are often taught together, you can continue with Brad’s course Web Design for Beginners: Real World Coding in HTML & CSS in order to learn CSS. The course starts with the essentials and progresses through topics like CSS animation and Sass, a CSS preprocessor that allows you to write CSS more quickly.

Once you have learned HTML and CSS, you have learned enough to become a professional web designer. If you decide that this is the area you’d like to work in, then it can be helpful to have working knowledge of JavaScript and jQuery, but you don’t necessarily need to learn them in depth to find employment as a web designer. If you want to take your web development skills to the next level and have more opportunities, you will need to learn JavaScript.

Step 3: Decide if You Want to Be a Web Designer or a Web Developer

If you wish to design webpages or become a user-experience web designer, then you will likely only need working knowledge of JavaScript. There are some positions where for which employers expect UX designers and web designers to know JavaScript and jQuery well, but if this is the case, then you should be able to command a web developer’s salary, which typically has a higher starting salary compared to that of a web designer.

Step Four: Learn JavaScript

If you decide that you’d like to proceed and learn JavaScript, then check out my post How Long Does It Take to Learn JavaScript. I go into great detail about the order in which you should learn JavaScript programming language. It is important to concentrate first on the language itself before learning libraries and frameworks. Libraries like jQuery and React and frameworks like Angular and Ember extend the JavaScript language so that web developers can create interfaces, build single-page web applications, etc. When I was first learning JavaScript, I jumped too early into the moment.js framework and ran into all kinds of trouble. It was only after learning more of the JavaScript language that I started to enjoy more success.

After stumbling around for awhile, I started learning JavaScript more seriously when I took Colt Steele’s The Web Developer Bootcamp course. Colt’s course begins with HTML and CSS, which you can skip if you’ve taken Brad’s course already. That said, I found Colt’s course after learning HTML and CSS and I felt the repetition served me well.

Enjoy the Ride

Gaining tech skills is a challenging endeavor. There will be times when something will not go according to plan, and you’ll feel like giving up. I encourage you, however, to keep going. Reach out to your course instructors if you’re having trouble. You are also free to contact me here at laura.white@youcanlearnhowtocode.com, and I will do my best to help you out!