How to start with Web Development

This morning I received a DM on Instagram saying:

Any tips for a new learning aspiring Web Developer?

This question was following me throughout the day because there is no right or best answer to it.

Especially today, where every new entry to this huge industry will inevitably feel overwhelmed and lost in the crazy amount of "things to know" for a good Web Developer.

Based on my experience, I can say that it's not that easy getting started, you'll have to put in the dedication and fight imposter syndrome, especially at the very beginning.

But what does it means to get started with Web Development?

For me it means 3 things:

1. Understanding if this is REALLY for you if you're enjoying what Web Development is.
2. Learning the Golden Basics and proving your knowledge with 2/3 of small projects.
3. Lending your first job as a Junior Web Developer.

Now let's see in detail these steps, which hopefully will clarify a lot of things about what Web Development is.

Understand if this is REALLY for you

This is probably the most important part. If you're seriously considering Web Development as a possible career path I suggest you get your hands dirty as soon as possible.

Start reading and watching simple entry-level tutorials about Web Development. Get to know what HTML, CSS, and JavaScript look like and get an idea about how an everyday Web Development job feels.

This part is crucial since it will give you a feeling about what you're going to deal with.

Pay attention to how it feels to you, if you get excited about the code, about how the Web works, if you're curious and want to know more, then chances are - this is really for you.

On the other side, if you feel anxious, the looks of the terminal and code editors scare you, understanding the code and the Web is not just an exciting challenge but an overwhelming effort, chances are this may just not be for you.

Learn the golden BASICS

Plain HTML, CSS, and JavaScript are the backbones of Web Development. These three, are ideally what you need to know for landing an entry-level job.

Although you can get a job without knowing JavaScript, especially in smaller companies. This was my case two years ago, but without JavaScript, you would be probably considered a Web Designer.

So here's a summary of what I recommend learning before looking for a job:

HTML - the structure of every web-based site or app.

Starting with HTML is relatively simple. Get to know what tags are and how they work. Understand what is the difference between certain tags and their semantics, all of them have a special meaning.

Learn how to use classes and ids in HTML and what's the difference. How to connect external HTML, CSS and JS files to your document via <link /> and <script /> tags.

Understand what HTML attributes are and how to use them.

A very important topic and the one that makes a huge difference between junior and more senior engineers is the attention to writing a semantic and web accessibility compliant HTML.

Here are some tips for making a difference with Accessibility and Semantics.

CSS - the style of your web page.

Cascading style sheets are also a relatively easy topic to get a grasp on. CSS is there to "make your HTML look good". You can define it as a set of descriptive rules like font size, color, and background which target a specific element or set of elements on your HTML document.

There are a lot of things that you can do with CSS, and just the combination of well-written plain HTML and CSS is powerful enough to allow engineers to deliver a well-rounded web-based experience.

Therefore you should get to know how CSS rules work on HTML elements, and what is the priority of these rules based on their position on the sheet.

Learn how to properly use class and id selectors and their priority levels. How to select multiple elements and how to exclude some of them in specific.

A huge part of CSS is focused on making your website/app responsive. Learn about CSS media queries, we use them to make our HTML look different, based on the screen size.

Learn how to manipulate the size and position of your elements using CSS Flexbox or Grid structures, which are a must and became a standard for modern web development.

Having a solid knowledge of just basic semantic HTML and CSS will allow you to create simple but at the same time complete web pages.

At this point, I suggest you find a landing page design and work on recreating it as close as possible in HTML and CSS. This will be your first project to show in job interviews.

JavaScript - the mage on the Web.

In comparison to HTML and CSS, JavaScript is a programming language. Therefore it is way more difficult for most beginners to learn and understand it. On its own, JavaScript can do everything, create and manipulate HTML elements edit CSS styles and add very complex logic.

JavaScript, as also other languages, has different versions in which the language syntax changes substantially. I would suggest you start with JavaScript ES6, also known as ECMAScript 2015. This version is now considered the standard and introduced groundbreaking changes for everyday JavaScript use.

Since JavaScript is a complete programming language, learning and mastering it will take years, but here are the starting points for learning JavaScript:

Variables and constants, learn what const, let and var are, the differences, and how we use them. Operators, basically same as arithmetic operators, like + - / *. Different data types, what strings, arrays, and objects are, and how to access data stored in an array or an object. Conditionals are used to control logic behavior in JavaScript and are based on the truth or false results of the condition. We mainly use if-else statements for conditionals, but it's also good to know how to use ternary operators. Understand what is the difference between == and === in JavaScript. Learn what functions are, and what is the difference between an arrow function and a standard function. Understand the scope of JavaScript, and when and where you can access certain data. Learn what events are (click, onkeydown, onload, etc.) and how to handle them with JavaScript.

I know this might feel overwhelming and no worries if it does, this is a long learning path that requires everyday dedication, research, and perseverance.

As a second project, I would suggest making a simple web app that requires the use of JavaScript, it could be a simple form that receives, saves, and displays names and the age of users and that can be sorted by name alphabetically (a-z and z-a) and by age (low-high and high-low). This was an interview question for my first job as a Software Engineer.

Lending your first job as a Junior Web Developer

Finally, in my opinion, if you know everything that I've listed before, I would say that you're pretty much ready to start looking for an entry-level job.

One thing that made me understand that I was ready for applying for jobs, was that you'll never really feel ready, there will always be something that you will miss and not know.

I can say that you're ready only when you're "cool" with being uncomfortable, being tested, and failing technical interviews. Trust me, a failed technical interview is way better than the one you've ever faced.

Keep in mind, that the people that will interview you are going to highly value your attitude, your passion for learning new technologies, and the ability to write clean and well-thought code. Showing the ability to quickly learn new tech and good problem-solving skills are highly valuable for a successful team member.

So here it is, my brief guide on how to get started with Web Development. I haven't mentioned any fancy frameworks like Angular or React, and older established libraries like jQuery on purpose since I believe that learning plain vanilla JavaScript is more valuable in the long run as a Software Engineer.

Frameworks will come and go, at one point React will die and something new will come, but plain JavaScript will always be there and will also help you understand patterns of every other programming language.