Retraining for a web development career

Nicolas Toulemont - Oct 24th 2021
Career

Introduction

What is web development?

Definition

Web development is the act of developing (building) web sites / applications and the servers to host these web sites/applications..

Web development and programming in general

Programming is the act of building one or more programs using a programming language. In this sense, web development is part of programming but it is not the only discipline.

A programming language is a language used to define instructions that will be then executed by a computer.

For example: mobile development, data science, writing embedded programs (e.g. software that runs cars, planes, etc.) and many other disciplines are also part of programming.

These disciplines are all different and often use different programming languages. However, these different programming languages share most of their concepts and learning one language makes it much easier to learn another.

Languages needed for web development

Web development requires mastering at least three languages in this order:

  1. HTML : the language used to insert tags in a web page.
  2. CSS : the language allowing to style (make beautiful) the tags present in a web page.
  3. Javascript : the programming language allowing to insert instructions and logic in a web page and in servers.

Web development vs. mobile development

Web development is different from mobile development which aims at developing mobile applications that are downloadable via proprietaries platform or "App store" on IOS & Android.

These two types of development are nevertheless quite close conceptually and some tools allow to use web development languages to perform mobile development. However, these tools are an advanced practice that is not covered here. Nevertheless, once you have completed the detailed course below, these tools will not be difficult to learn.

How to learn web development in 2021+?

And more generally how to learn programming.

Objectives

Since the objective of web development is to build web sites / applications and / or servers, it is logical that learning should be turned towards building web sites / applications 😉

To do this, we must think of this learning as that of a craft. You will therefore start with the construction of simple projects before going on to more and more complicated projects.

Finally web development and programming are not disciplines that we learn by heart. They are forms of digital craftsmanship that you learn by building things and therefore by practicing. Not remembering how to do something is not a problem, it's more important to know how to find the necessary information online.

Ecosystem / learning methods

  1. Google is your friend

    Today all the information you need to learn web development is available for free online. So it is quite possible to become a web developer by using free online resources to learn.

    This is what professional developers do on a daily basis when they need to learn a new tool or find an answer to a problem. For this reason, this method has several advantages:

    • It trains for the developer's job in addition to providing programming skills.
    • It is free
    • It encourages resourcefulness and resilience, which are important skills for web developers 😁

    This method is also more challenging because the responsibility for learning falls entirely on you. It can indeed be difficult to tackle new concepts alone.

This is how I got into web development after studying law. The objective of this document is to facilitate this approach by providing a list of content of progressive difficulty. The goal is to facilitate the access to resources by listing them here and to guide you by organizing them based on their difficulty and in way that would make sense for someone with no prior experience in web development.

  1. Free or paid online training

    These online courses provide a framework for learning and provide a progressive curriculum:

    The mozilla training is the closest to the "Google is your friend" option and is worth a look because the developer.mozilla.org site is an important tool for web development documentation and information.

  2. The bootcamps

    There are also "bootcamps" which are training organizations mixing online and physical teaching. These trainings are however relatively expensive (several thousands of euros) and do not give a more advanced training than what can be found online. However, for some people who need to be supervised in their learning, these more traditional courses have an advantage.

The different types of sources

  1. Tool documentation

    In the same way that a drill has a user manual, the tools used by developers are also documented (for example : reactjs). An important part of the work of web developers is related to the use of different tools and therefore to reading their documentation to understand how to use them.

  2. Online tutorials

    Tutorials can be available as video (this was my favorite format when I first started learning) or as text. They are available on many platforms (youtube, medium, udemy, etc.) and their quality varies. So it's important to have a critical eye on them and focus on tutorials produced by credible educators. This is especially important at the beginning of the learning process when your critical thinking skills on web development are not yet well developed.

  3. Learning by doing 😉

    A good way to take ownership of a new tool or concept is to play with it in code to discover its possibilities.

Development tools

The construction of a website is achieved by writing code in a programming language. It is therefore necessary to write text.

For this, developers use text editors. In 2021, the recommended tool in web development is Visual Studio Code, however other text editors like Sublime Text are also very good. Personally I recommend using Visual Studio Code.

Methodology

The resources you will find below are in video format. I recommend, especially at the beginning, to start by imitating what the instructor is doing and more generally to follow his indications.

An important part of the beginning of learning is based on imitating the instructor and understanding new concepts. There is no point in going too fast and it is better to take your time, even if it means watching the same part of a video several times to fully understand what is going on.

Learning order

Learning order

It is important to start with HTML and CSS (these can be learned together) before starting with Javascript. Indeed, learning Javascript requires a good foundation in HTML & CSS to be learned properly.

Before you start

Before you start watching videos. I recommend that you install Visual Studio Code.

Finally, a word of encouragement: during its learning process, you will make a lot of mistakes, will often get it wrong and will feel that they don't understand certain concepts and practices.

This is normal, and in fact professional developers also make mistakes and sometimes fumble for hours before they get their programs to work the way they want.

Objective

The objective of the following course is to give you the knowledge necessary to build projects that will allow him to be hired as a "Full Stack" web developer, i.e. competent in both interface and server construction.

At the end of this course, you will have a professional level between junior web developer and intermediate web developer and will be able to apply for corresponding job offers and pass most of the technical tests that will be submitted to him.

Plan

  1. Beginner
    1. Introduction to HTML and CSS
    2. Introduction to Javascript
    3. Going further: HTML and CSS
    4. Going further: Javascript
  2. Intermediate
    1. Introduction to version control
    2. Introduction to VSCode extensions and other developer support tools
    3. Going further: CSS
    4. Going further: of general Javascript
    5. Introduction to Javascript frameworks (React)
    6. Introduction to NodeJS - building a server in Javascript
    7. Introduction to authentication & authorization
    8. Introduction to deploying a NodeJS server
    9. Introduction to databases
    10. Introduction to SQL
    11. Introduction to NoSQL
    12. Full Stack projects (PERN, MERN)
  3. Advanced
    1. Going further: in version control
    2. Introduction to Typescript
    3. Introduction to NextJS
    4. Introduction to automatic tests
    5. Instructions on how to find a job as a developer.

Content

Beginner

Introduction to HTML and CSS

I recommend you to start with the following playlist and follow all the tutorials:

Once you have finished this playlist, I recommend that you follow the educator's suggestions in the last video of the playlist and continue with the following playlists:

  1. CSS Flexbox
  2. CSS Grid
  3. CSS Animations
  4. Styling HTML Forms

Introduction to Javascript

Now it's time to get familiar with Javascript. For that, look at the following playlist and follow all the tutorials:

At the end of these introductions, you should know how to create a web page on your computer, fill it with HTML and style it with CSS. After having familiarized yourself with Javascript, you know how to use it to interact with the DOM.

Going further: HTML and CSS

We now focus the CSS "Mobile first" approach. Since smartphones have become the main way for users to consult websites, it is necessary to take into account their need for interface first. The "Mobile first" approach came to in response of that trend.

Then we do a quick focus on the SEO issues related to the content and the structure of the HTML of a web page.

Going further: Javascript

We will now learn how to use asynchronous Javascript which is mainly used for communication between the interface and resources outside the web page with the following playlist.

After this section, you are familiar with the Responsive CSS and how to use the CSS for different types of "devices" (smartphone, tablets, computer). You are also familiar with asynchronous Javascript. You now have a basic knowledge of interface construction.

Intermediate

Introduction to version control

Version control allows developers to control the changes they make to their code. It also allows developers to collaborate together on the same project. To familiarize yourself with version control tools, I recommend watching this video:

Introduction to VSCode extensions and other developer support tools

These tools are not mandatory and you should not hesitate to skip this section if he doesn't feel the need. However, these are common tools used in the web development industry and I encourage those who chooses to skip this step to come back to it later when they feel ready.

Going further: CSS

This section is about new styling tools based on CSS in order to discover different ways of styling a web page.

We will also focus on CSS Variables which allow to manage color themes on web pages.

Going further: general Javascript

The aim of this section is to develop more in-depth Javascript skills and a deeper knowledge and understanding of the language. It also give you the opportunity to practice exercises that are sometimes given during job interviews.

Introduction to Javascript frameworks (React)

The objective of this section is to introduce Javascript frameworks. They allow to build complex and reactive interfaces more easily. Knowledge of at least one of these frameworks is often a prerequisite for hiring today.

There are currently 5 "major" frameworks: SolidJS, VueJS, Svelte, Angular and React. All these frameworks are built around the concept of reusable component (i.e. a part of an interface, for example a button). However, they all have their own approach.

This course will focus on the use of React because it is the most popular framework today and the one whose knowledge will facilitate your employment more in the short term.

To do this, you are encouraged to consult the official React documentation and to watch the following videos and playlist.

After this progress you now have a solid understanding of general Javascript and CSS, you also have a basic knowledge of version control and React. This knowledge forms a solid base allowing you to create and develop on the long term complex interfaces. You are now at a junior level.

Introduction to NodeJS - building a server in Javascript

The goal of this section is to introduce server building in Javascript. Until now, the curriculum has focused on interface construction (or "Front End development"). It is now time to introduce you to the server aspects (or "Back End development").

As a reminder, building a server is not necessary for all types of websites. Some very simple websites only consist of HTML, CSS and a little bit of Javascript.

However, building a server is a prerequisite for developing more complex applications. This is because the server plays a key role in the architecture of applications where, for example, users will create accounts, profiles, etc. This is mainly due to the fact that this information must be stored in databases whose access must be protected. The server of an application can also perform many other roles such as sending emails to users to change their passwords or performing recurring and automatic tasks.

To become familiar with this aspect of web development, you are invited to consult the following playlist:

Introduction to authentication & authorization

The objective of this section is to introduce the notions of authentication and authorization as well as some implementations (JWT and session) of these concepts.

Introduction to deploying a NodeJS server

There are many ways to deploy a NodeJS server:

The following example shows a deployment of a NodeJS server on a VM (virtual machine). This is a very simple deployment example.

SSH knowledge is sometimes needed to deploy servers, if needed, see the following video.

Introduction to databases

This is an introduction to different types of databases commonly used by developers. These databases have different characteristics and present different advantages depending on the situation. There are many types of databases but the two main types of databases are : SQL and NoSQL (Document, "In memory" (Redis)).

The oldest and most widespread database type is SQL. The databases using SQL are what we call "relational" databases. They are particularly adapted to model data with relationships between them, for example: a user's profile (profile picture, first name, last name) and his account (email and password).

To get familiar with these tools, you are invited to watch these 4 introductory videos:

Introduction to SQL (PostgreSQL)

The goal of this section is to provide you with a basic knowledge of the SQL language and the PostgreSQL database. This basic knowledge will enable you to perform operations such as creating, editing, searching and deleting data.

Introduction to NoSQL (MongoDB & Redis)

The objective of this section is to be able to perform operations such as creating, editing, searching and deleting data in two other types of databases.

For the Document database, the MongoDB database is an accessible and easy to use tool for beginners, so it is this one that we will study here.

For the In-memory database, the Redis database is a reference tool in the industry in addition to being relatively easy to use.

After these introductions to server development and databases, you should have the knowledge to build web servers and APIs controlling access to resources stored in databases. resources stored in databases.

Full stack projects (Front end and Back end)

Now that you are familiar with front end and back end development, it is time to join these two areas in building "Full stack" projects to link these two knowledges and build "full" projects.

Before jumping into these projects, it will probably be good to get familiar with / remember some React notions that will be useful for these slightly larger projects:

Two types of full stack projects will be discussed in this section:

It is not mandatory to do these two projects. I think it's enough to do the Todo app project from the PERN Stack if you enjoy using PostgreSQL but if you want to use MongoDB then the MERN stack project may be suitable.

After completing one of these projects, you have completed your first "full stack" that allows a user to use a dynamic interface to interact with your web server and save data in a web server and save data in a database. You now have a confirmed junior level.

Advanced

Intermediate version control

This tutorial is about going beyond the "basic" commands such as git add, git commit, git push, git pull to discover more advanced concepts and strategies.

Advance version control

This tutorial is look at concepts like Interactive Rebase, Cherry-Picking, and Submodules. It is an advanced tutorial and is not needed to be completed before looking for a job in the industry.

Introduction to Typescript

Now that you are comfortable with Javascript, it is important to look at Typescript.

Typescript is a language that adds a type system to Javascript. This allows the developer to spot potential errors in his code more quickly and easily. It also allows to document his code thanks to types which also facilitates the collaboration between developers.

Typescript was created in 2012 by Microsoft and is quickly becoming a reference tool in professional web development. Its good mastery is already a prerequisite for the most lucrative jobs and therefore, learning it is a very good investment.

I recommend the following playlists in this order:

Optional:

Introduction to NextJS

NextJS is a "framework of frameworks". It is indeed a tool that facilitates the development of full stack React and NodeJS applications. It is a very popular tool in 2021 that allows to build full stack applications quickly and to structure the project well.

I recommend a quick introduction via : NextJS in 100 seconds and then take the time to follow the full tutorial of NextJS. You can also read the documentation.

Introduction to automatic tests

Tests are an important part of a professional developer's work. Indeed, they allow to make sure that the code is working properly, at the time of writing but also when changes are made and we might not know all the effects.

They are particularly important for collaboration between developers to avoid one of the developers breaking, without knowing it, something written by another developer.

React application testing:

NodeJS Tests:

Well done! You now have the level of an intermediate web developer and you can legitimately apply for job offers legitimately apply for job offers for Full Stack React Typescript NodeJS.

Developer Job Search Instructions

Despite the fact that your technical knowledge exceeds what's expected for a junior developer, it can still be a better idea to apply to junior job openings. This may seem seem counterintuitive, but a developer hired as a junior will have more support from fellow developers which will make your first experience easier. Especially since building software is a team activity and more than writing code.

Now that your technical knowledge exceeds that of a junior but you are still far from being a confirmed or a senior web developer, only experiences, mistakes and successes will get you there. Similarly, if your "hard" skills (i.e. your ability to build solutions with code) have developed a lot with this curriculum, the "soft" skills (i.e. the ability to collaborate within a team and to communicate technical issues for example) have not. And they are very important in the success of your career, probably more than writing amazing code.

So you still have many things to learn but at this point I recommend you to look for a professional developer job because it is by practicing professionally that you will learn the most. Indeed, nothing beats facing real problems and working in a team to progress.

To prepare your job search, I now recommend you to build a Full Stack project in Typescript with NextJS. You can then host it publicly on your Github and it will show your skills during recruitment processes.

If you don't know what to build, here are two project ideas:

Finally, it can be easier to find a "Front end" / "Back end" position even if you have full stack skills, so don't hesitate to apply to these positions if you come across them.

The world of recruitment in the digital sector can seem particular when you come from another sector.

Because of the important lack of employees in this sector, many companies use the services of headhunters (or recruiters) to find their next employees. You will therefore potentially be contacted by many recruiters who will be looking to know more about you and your professional experience as a developer.

At this stage of your career you will, in most cases, not have enough professional experience to match the criteria of the positions the recruiters are looking to fill (except for junior positions but recruiters are more often mandated for intermediate to senior positions).

This is why I recommend that you search for positions directly on job search platforms. In my experience, the most convenient ones (in France) are :

You can also put your profile on platforms that put companies and candidates in contact with each other. I put my profile online on fiftytalents and this led to my first job.

Finally, I also recommend that you monitor the websites of various startups and scaleups. They usually put their job openings online and this will allow you to apply directly with the company. That's how one of my friends found his first job as a developer after his retraining, he was hired as a junior developer at Algolia which is a nice French scaleup and which recruits continuously all type of profiles.

The recruitment process takes place in several steps, the number of which varies according to the company. However, there are certain steps that will always be present in this process.

  1. Assessment of the candidate's "fit" with the job description.

    This step is usually done by a recruiter or someone from the company's HR department. It consists of evaluating whether the candidate matches the job description for the HR department and for the candidate to evaluate whether the job description is suitable for him/her.

    Since this step is often done with a recruiter/HR who does not have technical skills, the evaluation of the technical fit is limited to verifying that the candidate knows the tools mentioned in the job description.

    You will be asked, for example, (for a React front end position)

    • Are you familiar with React?
    • What type of project have you done with this tool?
    • How many years of experience do you have with this tool?

    The cultural fit is also evaluated during this step, it can mean different things depending on the company but generally it is about verifying that the candidate is not a difficult person to work with.

  2. Technical test

    Once the "fit" between the candidate and the job description has been established, and sometimes another interview with a technical person from the company, the candidate is offered a technical test.

    This test is designed to verify that the candidate has the technical skills he or she mentioned in his or her resume and during the previous stages of the recruitment process.

    There are many types of technical tests with different levels of difficulty, objectives and duration depending on the position in question.

    A good technical test can be considered to be one that verify the candidate's ability to actually perform the work required by the position. The technical test is ideally short (between 30min and 3h, maximum half a day), can be done remotely when the candidate has time to do it and also allows the test evaluator to understand how the candidate thinks and solves problems.

    A few examples of technical tests I have had to perform or have heard about:

    • From a public API, make an interface in Typescript and React to show the data extracted from the API and filter the results. Duration 3h.
    • Build an interface with a form in Typescript and React. Duration 30min.
    • From a code already provided, modify the code to add some functionalities while respecting the conventions and tools present in the code. Duration 3h.
    • From a design, build the interface corresponding to the design with some tools of the company provided to the candidate.

    To conclude, some companies (Google, Facebook, Spotify, etc.) carry out more advanced technical interviews to evaluate more general and advanced software engineering skills (understanding of concepts such as "Data structures", "Design patterns", "Big O notation" and knowledge of certain algorithms). A priori, when you seeks a junior position in small to medium-sized companies, this knowledge is not expected.