What do you need to learn to become a front-end web developer?

If you're just starting out in web development, chances are you're feeling lost in the face of the many concepts and technologies to learn.

You often start by following a tutorial, then wonder: "What should I learn next?"

So I've prepared a roadmap for you, a list of things to discover and master in order to progress calmly in your learning journey.

I've tried to choose the order of all these elements so that your learning can be both fun and guided by your projects, each new concept will allow you to go further in your creations, each new step can be a new source of satisfaction.

Roadmap: The list of things to know

Note that this list doesn't contain links to courses or tutorials, it's simply here to guide you, but you'll be able to find what you're looking for on sites like Openclassrooms for free courses or on Udemy for paid training.

Disclaimer: Knowing all the concepts and technologies in this list won't guarantee you'll find a job in the snap of a finger. Your commitment, your perseverance and your personal projects will play a big part in the rest of your journey.

HTML (HyperText Markup Language)

Understanding what an HTML file is, how it's built, the differences between the header and the body of the document as well as the hyperlinks between different pages of a site is understanding the basics of the web.

You'll therefore learn to use different HTML elements (also called tags) to present your various data, for example:

• Headings (h1, h2, h3, ...)
• Text and links (p, span, a)
• Images (img)
• Blocks (div, section,...)
• Tables (table, tr, td, ...)
• Forms (input, button, ...)
• Lists (ul, ol, li)
• ...

Each HTML element has a default way of being graphically represented, but also has a semantics (a meaning, a function) that you'll have the opportunity to discover.

CSS (Cascading Style Sheet)

HTML alone will let you structure your pages and reach a result that looks more or less like a document created in Word or OpenOffice. But with CSS, you'll be able to modify the design of this document as you wish, with your imagination as the only limit (or almost).

Learning CSS happens in two stages: selectors and attributes.

Selectors let you choose which elements will be affected by your custom style thanks to different rules (id, classes, element names, events and other more complex selectors)

Attributes, on the other hand, will let you decide on the final style applied to these elements, for example:

• Display and positioning (display, visibility, position, left, margin-left, padding-left, ...)
• Colors (color, border-color, background-color, ...)
• Shapes (width, height, border-radius, ...)
• ...

There are dozens of different attributes in CSS and it's very tempting to try them all, but here's a tip, take the time to learn (and understand) the role of the different selectors as well as the display and positioning attributes.

Once these concepts are mastered, the rest of the attributes will be child's play!

Hosting

If you're following this list in order, you're now able to build a site with several pages linked together by links and following a custom design, in other words, everything you need to make a showcase site, an online CV, etc...

But what's the point if no one else can see it? That's why the next step is to discover technologies around web hosting, including:

• What is a server, and more specifically a web server?
• What is an HTTP request?
• Domain names and DNS
• The different types of hosting available (shared, VPS,...)
• How to deploy your site (FTP, SFTP)?

Once this part of your journey is complete, you'll have a site visible to everyone and entirely created by you!

To put your site online, you can go through hosting providers like Ionos, OVH or even o2switch for a few euros a month.

Code versioning

When you code, everything happens in the text files of your project, but how do you collaborate with other people on these files without risking corrupting everything?

Or how do you go back to a previous version of the site after CSS changes broke your design without you noticing?

Quite simply thanks to a version manager like Git and platforms like Github which will let you synchronize several instances of your project, save each stage of progress of the site, work with multiple people without conflict and go back if needed.

Javascript

Since Javascript is the only programming language (strictly speaking) that is natively interpreted by the browser, it's an essential technology to master.

Learning programming logic and concepts can take much longer than the previous parts, take your time.

Eventually, Javascript will let you add logic to your sites and applications, do calculations (in the broad sense of the term, we speak more of algorithmics) and add interactions to your pages (other than clicks on links).

You'll first need to learn programming logic as well as the syntax of the language, then you'll be able to make your Javascript code interact with your HTML pages thanks to browser APIs afterward.

Browser APIs

An API (Application Programming Interface) refers to a set of software solutions whose complexity is hidden behind a set of simple methods for a developer to use.

A web browser will therefore make a certain number of these APIs available to developers so that they can be called in Javascript.

The best-known API is the DOM (Document Object Model) API, which gives developers the ability to interact with the HTML elements present on the page in order to:

• Modify the content of the page
• Inject dynamic content (text, images, etc...).
• Add interactions on an event (click, scroll, keyboard key)
• Retrieve data entered by the user in HTML fields
• ...

Even though the DOM API is absolutely essential to master, there are many other APIs available to you that are very powerful:

• localStorage (to store data locally, even after closing the browser)
• audio and video APIs
• bluetooth
• file reading
• ...

By harnessing the full power made available by the browser, you'll be able to create complex and very interesting applications for your users.

Algorithmics

While algorithmics is often associated with software or back-end development, its importance in the browser should not be underestimated.

Algorithmics consists of finding a technical solution to a problem by combining elements of logic and mathematics, for example: sorting a list of users by name and profession.

There are many platforms for practicing programming and algorithmics, I'm sharing an article in which I recommend the best ones.

---

If you're considering following a fullstack web developer path, this is where I recommend you start discovering back-end concepts, otherwise keep reading!

An alternative fullstack version of this guide will be available soon

---

HTTP calls

In one of the previous sections I listed browser APIs, deliberately omitting one particular category: HTTP calls.

Browsers provide two APIs in particular, one older one called "XMLHTTPRequest" and a much more recent one: "Fetch"

Despite their very different names, both allow you to make calls to a data server in order to either retrieve data held by the server, or send some, all without changing pages.

You can call your own server (which you'll have developed in PHP, Java, Python, NodeJS or another language of your choice), or public APIs that will let you retrieve specific data.

Here's a link to the article where I give examples of public APIs to use in your projects!

Security and vulnerabilities (XSS, cors)

As Spiderman so aptly puts it: "With great power comes great responsibility" and this also applies to the security of your web applications.

From the moment your website starts communicating with a server, sending and retrieving data, you need to be aware of the challenges of web security.

Among other things, you should know about:

• XSS vulnerabilities
• CSRF vulnerabilities
• CORS rules
• The HTTPS protocol (SSL)
• ...

GDPR

The "General Data Protection Regulation" is a set of rules to follow when publishing a website in Europe and collecting user data.

Failure to comply with GDPR can result in a heavy fine based on the company's revenue, and responsibility as a developer can be attributed to you.

Here is the official CNIL website about the GDPR

Accessibility (a11y)

Web accessibility is a vast subject that absolutely must be understood, I'll summarize it as "a set of techniques to implement so that the resulting site is accessible to everyone, regardless of their disability, their equipment or their geographic location."

Here's the link to my (ongoing) series of articles on the basics of web accessibility

SEO

SEO is an acronym for "search engine optimization", in other words the methods and best practices to know so that the site can be found as efficiently as possible on search engines.

Here's the link to my (ongoing) series of articles on the basics of SEO

Optimization

Optimizing web content involves many practices and notably influences accessibility and SEO.

Here are some examples of optimizations to explore:

• Setting up a CDN (content delivery network)
• Managing cache
• Setting up Gzip compression
• Paying attention to the size/number of files (images, js, css, ...)
• ...

Tooling (Webpack)

Tooling represents the set of tools used around your project to optimize your time, your ease of development as well as the compatibility or performance of your web project.

We can mention, for example, a few tools like:

• Webpack to manage modules,