Learning Fundamentals
Web Development Fundamentals: A Guide for Beginners and Intermediate Developers
Frontend Roadmap: Introduction
Today, words like “personal brand,” “learning by teaching,” or “leaving a mark” have been echoing in my mind.
A few years ago, when I was starting in the world of programming, I didn’t know where to begin or which path to follow. Even now, I’ve been actively searching for ways to stand out as a developer or take the next step from mid-senior to senior developer. And the truth is, blogs on Medium or dev.to have helped me a lot in gaining insights into how to progress.
That’s why I’ve decided to start this programming blog for personal growth. And what better way to start than by explaining the fundamentals of web development, specifically focusing on frontend development, which is the area I’ve been specializing in over the past few years.
My goal is to support those who are just beginning their journey in web development or those who have been in the industry for a few years but feel lost in terms of which technical concepts to learn to strengthen their foundation.
I will try to explain things more educationally and interactively so that even the most difficult concepts to understand (just like they were for me initially 😅) can be learned and understood.
So if you want to start on this journey with me, let’s come together once a week with the fundamentals of Web Development.
Why a Learning Roadmap?
“If I had to start over” is a phrase that is very trendy on many social media platforms, but it proves to be quite useful as a guide on where to begin when you’re a beginner or feeling lost about which aspects to reinforce or what to continue learning. This is especially relevant when you’re self-taught, like myself.
So, as I mentioned, if I had to start from scratch in learning Web Development with a specialization in Front-End, I would follow the path that I will present later on.
But before we begin, I want to give a disclaimer that you can skip if you want to dive right in: I am a Front-end web developer with 4 years of experience as of the year 2023. Currently, I am in a phase where I’m seeking to strengthen fundamental concepts and enhance my learning in more complex aspects that affect performance, clean code, and other aspects of a project. A few months ago, I started searching for numerous articles, videos, and services provided by senior developers that help in advancing in seniority and more. I was quite lost on how to start, whom to trust, and where to find explanations that I could understand with clear examples. That’s why I felt the need to create my own learning path, encompassing all the concepts that I SHOULD master as a React developer to secure a better job or simply increase my confidence when speaking or starting a web development project. So, everything you will find below is the result of my curiosity and, let’s say it, my desire not to pay for platforms or additional services to do it for me.
Many of the points I will list below don’t have a post yet, but I will be adding them to this path week by week. Don’t worry if there’s a point for which I haven’t written an article yet; you can use this guide to investigate on your own. Remember that one of the most important skills of a programmer is their curiosity and ability to learn on their own.
Also, keep in mind that this is just a guide of what I consider to be the most important concepts to become a web developer, at least at an intermediate or semi-senior level.
P.S. If you’re starting from scratch, I recommend strictly following these fundamentals, except for sections 1 and 2, which you can study in parallel or in a different order.
P.S.2. If you’ve been in the web development world for some time, I recommend focusing on mastering the fundamentals covered in sections 1 to 4. The rest will depend on you and the aspects you want to reinforce.
React Frontend Developer Roadmap
Before anything else, please don’t panic if you see a lot to learn. Just focus on one section at a time and take it step-by-step. You won’t even notice how quickly you progress.
- How does everything work?
- The Internet
— How does the Internet work?
— Servers
— Routers
— Protocols
— Client-side & Server-side
— DNS
— Hosting - The web
–Browsers
–HTTP — HTTPS
–URL
–GET / POST
–Status code
2. HTML & CSS
- HTML
–What is HTML?
–Tags & attributes
–Head
–Storage [ Cookies, LocalStorage, SessionStorage]
–APIs
–Doctype
–href vs. src
–meta tags
–viewport
–Forms
–Accessibility
–SEO - CSS
–The basics: syntax and selectors
–Box model
–Property Inheritance
–Responsiveness & mobile first [Media queries]
–Display & Positions
–Floats
–Fonts and how to import them
–Shadows
–Flexbox
–CSS Grid
–CSS transitions
–Sass
–Browser compatibility
–Variables & Functions
3. Javascript
- – Syntax & Basic constructs
–Data types [Primitives & Non-Primitives]
–Operators & Logical Operators
–Data Structures: Objects (… and their methods)
–Data Structures: Arrays (… and their methods)
–Functions
–Loops
–Conditionals
–Variables [Scope & Hoisting & Closures]
–Asynchronous Programming
–Modular Javascript
–Event bubbling
–Prototype
–High-order Functions
–Bugs & Errors [Try, Catch, Finally]
–Regular Expressions
–Javascript and the Browser
–DOM Manipulation & Handling Events
–Shadow DOM
–Fetch API
–Javascript Engine Mechanism
4. ReactJS
- –Basic concepts [What is React?, Components, JSX, Virtual DOM, Hooks]
–Types of Components [Functional components, Class Components]
–State vs Props
–Conditional Rendering
–Composition
–Synthetic Events
–Hooks [useState, useEffect, useContext, useRef]
–Forms [Validation, React Hook Form, Formik]
–Routing [React routing]
–State management [Redux, Recoil, MobX, Context]
–Styling [Styled components, CSS Modules, TailwindCSS, Material UI]
–API Calls
–REST API [SWR, react-query, Axios, superagent]
–GraphQL
–Testing [Jest, React Testing Library, Cypress]
–Frameworks [Remix, NextJS]
And if you wonder where I based this roadmap, you can take a look at all the following links, so you can research or study for your own.
Interview Questions
Here’s an additional section. Each post will include a set of interview questions that you might be asked in an interview, along with possible answers. In this case, as the questions are more personal, I won’t provide the answers. I’ll leave it up to you to answer them on your own. Remember to be concise and honest.
- How did you get started in the world of programming?
- Can you give an example of a challenge you faced in recent years and how you addressed it?
- Why did you choose to specialize in frontend development, and what excites you the most about it?
P.S. If you are a native Spanish speaker or learning this beautiful language, you can check out the twin post that will be in Spanish. The same concept and explanations but in another language 😉 every week.
