Web Developer Roadmap [Beginner]

13 min readMay 26, 2021

A few months back I bought the book: “HTML To React: The Ultimate Guide”.

I have really enjoyed this book. There is excellent knowledge in it.

At the end of the book the author wrote two roadmaps with a lot of questions and to-dos to practice the acquired knowledge. Today, I will answer some questions in the first roadmap.

What is HTML? Write the basic structure of a HTML document.

Hyper Text Markup Language is a markup language for creating web pages. It consists in a series of elements that tell the browser how to display the content.

As it can not create dynamic functionality, HTML is not a programming language. Its purpose is to organize and format documents.

2. What is the DOM?

The Document Object Model defines the logical structure of documents and the way a document is accessed and manipulated. It represents the structure as a logical tree, in which each branch of the tree ends in a node, and each node contains objects.

Document Object Model Representation — iu (1128×522) (duckduckgo.com)

3. What is the box model?

The browsers interpret all elements on a web page as boxes. We change the layout of our site by styling these boxes through CSS.

We have to understand the box model because it is the key to being able to create layouts with CSS.

Every HTML element has a box that surrounds it.

These boxes contain:

Content
Padding: amount of space between the content area and the border.
Border: thickness and style of the border surrounding the content area and padding.
Margin: amount of space between the border and the outside edge of the element.
Width: width of the content area.
Height: height of the content area.

I recommend to always use box-sizing: border-box because it is much easier to position your elements.

Add this to your CSS and your clients will have to call the firefighters because your layouts will be on fire!🔥🚒

Read this article if you want to know more about box-sizing property!

4. What are the differences between margin and padding?

Padding sets the amount of space between the content area and the border.

Margin sets amount of space between the border and the outside edge of the element.

Notice what all three properties have in common: they apply to all four sizes of the box.

In the border scenario, the box had a dimension of 200x200. After applying a border of 20px, it adds 20px to the top, right, bottom and left side of the box. Hence the dimension of the box is now 240x240.

The same happens in the padding scenario, just that those extra 20px on each side of the box now lives between the content itself and the border. Notice that the dimension of the box is now 280x280, that is just because we maintained the 20px of border and now we added another 20px of padding.

See now the content has more space than it did before!

In the margin scenario you got to have a trained eye to spot the difference 👀. It looks almost the same, but it actually drifted 20px from all sides. We only notice top and left because there are elements to compare it with. Remember margin is the space between the border and the outside edge of the element.

5. Through Chrome Dev Tools, select an element, remove a class and add another class to it.

Found this blog and destroyed its classes! 🧨💣

It has two classes: “masthead” and “clearfix”. Let's remove the last one 😈!

We just collapsed his blog 😎.

6. Create a HTML page (navigation bar, background color, add some text)

7. Select a website and change the inner HTML of an element.

Let's keep messing with this blog! 👹

8. List and define position properties [CSS]

Static: positioned according to the normal flow of the document. Static is the default position of elements. Static positioned elements are not affected by the top, bottom, left, and right properties.
Relative: positioned according to its normal position. Relative position has access to top, right, bottom and left properties. The element is position according to the normal flow of the document and then you can offset it relative to itself based on the properties it now has access to.
Fixed: positioned relative to the viewport, meaning it will always stay there. Hence its name. It has access to top, right, bottom and left properties. Note that this position removes the element from the normal document flow, therefore no space is allocated for this element in the page layout.
Absolute: positioned relative to the nearest positioned ancestor (any position except static), if there is no positioned ancestor, it will take the document body as such. It has access to top, right, bottom and left properties. Note that this position removes the element from the normal document flow, therefore no space is allocated for this element in the page layout.
Sticky: it is a mix between “relative” and “fixed” position. It has access to top, right, bottom and left properties. The element is positioned according to the normal flow of the document. Note that in order to work you have to specify at least one value for top, right, bottom or left and its ancestor has to have a “scrolling mechanism”.

9. List and define display properties. [CSS]

There are many display properties you can check them out here. I will mention the most common:

None: element will not be displayed at all. It has no effect on the layout.
Inline: displays an element as an inline element. Meaning it takes the minimum space the content required and does not cause a line break. Keep in mind you can not change height and width of an inline element.
Block: displays an element as a block-level element. Meaning it starts in a new line and it will take up the total width available.
Inline-block: it will display the element as an inline element, with the difference that you have accessed to its height and width properties.
Flex: displays an element as a block-level flex container. This is a whole other topic. This is an excellent website to learn flexbox.

10. Data types in Javascript.

There is a lot that happens “under the hood” in JS. Definitely check the documentation to know about data types and data structures in Javascript.

Fun Fact! [or maybe not]:

Arrays are a special type of object!

11. Basic JS Operators

These are just the basic Javascript operators. Please, don’t be like that Triangle Face Bastard (smart, handsome but lazy), and read the documentation to learn the operators!

12. Why is it better to use semantic tags over simple divs?

I just wrote an article about this. Read it if you want to know the answer to this mysterious question 👀.

Read this article to know why it is better to use semantic tags over divs!

13. List and define CSS combinator selectors

Descendant Selector ( space )

Selects all elements that are descendants of a specified element.

Child Selector ( > )

Selects direct children of a specified element.

Adjacent Sibling Selector ( + )

Selects the adjacent sibling of an element. Here, “adjacent” means “immediately following” the first selector.

General Sibling Selector ( ~ )

Selects all elements that are siblings of a specified element.

14. List truthy and falsy values.

Falsy values:

Truthy values:

Fun/Strange fact:

An empty array is truthy. But when comparing with true is false!

I strongly recommend you read this article about truthy and falsy values.

15. Give an example of a for and while loops.

FOR LOOP

Use a for loop when you know how many times you want to iterate over it.

FOR OF LOOP

Use a for of loop when you just want to list elements. You don’t have access to the index, so you can’t access specific items nor can control the flow of the mapping.

WHILE LOOP

Use a while loop when you don’t know how many times you will iterate over it, but you do know when not to iterate.

FOR IN LOOP

It is used to iterate over an object instead of an array.

This for in loop will display the keys of the object.

This one will display the values of the key’s object.

16. What is HTTP

Hyper Text Transfer Protocol is a protocol which allows the fetching of resources. It defines a set of rules for sending and receiving web pages. In simple terms, it is a request between a local machine called as client and a remote machine called as server.

You have to know about this, please read the documentation about HTTP.

17. Name HTTP headers.

Read the documentation about HTTP headers.

Request headers

Contains information about the resource to be fetched, or about the client requesting the resource.

GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0

Response headers

Additional information about the response.

After a GET request

200 OK
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY

18. Give an example of a map, reduce, filter and find methods.

MAP

Creates a new array with the results of calling a function for every array element. As it returns a new array, you need to save it into a variable. The map method calls the provided function once for each element in an array, in order.

REDUCE

Executes a reducer function on each element of the array, resulting in a single output value. The reducer method reduces the array to a single value.

The first parameter is the accumulator, where the value is stored for next iteration. The second parameter is the initial value of the accumulator.

In our function, “getSum()” acts as the reducer function, and “0” is the initialization of our accumulator.

FILTER

Creates a new array with all elements that pass the test implemented by the provided function.

FIND

Returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

It will only find the first occurrence of your testing function.

19. What is REST API

REpresentational State Transfer (REST) is an architectural style for providing standards between computer systems on the web, this makes systems communications a lot easier.

Benefits of a RESTful system:

Platform-independent, language-independent.
Stateless operations.
Simpler to develop.
Separating concerns between the Client and Server helps improve portability.

These are the four basic HTTP methods:

Response Codes

Read these articles to become a pro in RESTful systems:

20. How to reduce page load time?

Use lazy loading.
Reduce your image's size.
Use svg whenever possible.
Use browser caching on your API requests.
Use fragment caching.
Use Web workers.

21. What is hoisting?

It is a mechanism where variables and function declarations (not assignments) are moved to the top of their scope before code execution. Meaning variables can be used before they are declared.

But we can be more precise, don’t we?

What is actually happening is that, during the compile phase, the JavaScript engine goes through your script and allocates a space in memory for all your variables and function declarations. This allows you to have accessed to them before they are actually written. After that, the execution phase begins. This is where your script will be executed.

Watch this video to get a better grasp of this concept:

Hoisting in JavaScript Explained in (About) 5 Minutes — YouTube

22. Differences between var, let and const.

I think the best thing I can do is to let Kyle, from Web Dev Simplified YouTube channel, explain these concepts.

His channel is one of the best that I have found on YouTube.

Here is the video:

Differences Between Var, Let, and Const — YouTube

23. List all sizing units and give use cases.

em: relative to the parent element. Use em units for sizing that should scale depending on the font size of an element other than the root.
rem: relative to the root element (HTML tag). Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings. If in doubt, use rem. For media queries use rem.
px: a unit of length which roughly corresponds to the width or height of a single dot that the human eye can comfortably see without strain, but is otherwise as small as possible. It is an absolute measure, but not consistent. Use px units if you need to ensure that an element never resizes at any breakpoint and remains the same regardless of whether a user has chosen a different default size.
%: relative to the parent element. Use for multi-column layout widths. Use for margin and paddings.
vw: viewport units represent a percentage of the current browser viewport, in this case, the width viewport. Although, similar to % units, viewport units are calculated as a percentage of the browser’s current viewport size. Use for creating full width elements (100%) that fill up the entire viewport’s width.
vh: viewport units represent a percentage of the current browser viewport, in this case, the height viewport. Although, similar to % units, viewport units are calculated as a percentage of the browser’s current viewport size. Use for creating full height elements (100%) that fill up the entire viewport’s height.

24. What is recursion?

Recursion is when a function keeps calling itself. The problem here is how to tell it to stop. We have to give a condition known as a base case, this will tell the function when to stop calling itself.

I took the next example from this article that you should definitely read:

How to Understand Recursion in JavaScript

let countDown = number => {
    //base case
    if (number === 0) {
        return;
    }
    console.log(number);
    return countDown(number - 1);
};
console.log(countDown(5)) // 5, 4, 3, 2, 1

25. What are callback functions

A callback function is when you pass a function as an argument to another function.

If you want to go more in depth, please read this article about callback functions in JS.

Final Thoughts

I hope you got something out of this. I really encourage you to keep learning new things and to really understand the fundamentals of whatever you want to learn.

And, by all means, grab a copy of this book: “HTML To React: The Ultimate Guide”. If you are in a beginner-intermediate phase, it will be of great value to you.