Frontend engineering: It's the creative side of
coding that brings websites and apps to life, focusing on user experience, interface
design, and making things visually appealing. It’s a lot more than just centering divs and
creating buttons though. That’s why in this video, I’m going to walk you through this
clear-cut guide to everything you ACTUALLY need to learn to get
hired as a frontend engineer. Feel free to skip over sections you already know
by clicking the timestamps in the description! Also if you’re more interested
in backend engineering, check out last week’s backend engineering roadmap! ### 1. What is Frontend Engineering? Frontend engineering builds the interface
that users interact with for any software. Let’s use YouTube as a simple example. When
you open YouTube, the frontend engineering work is everything you can see. The layout
of the page, the rendering of graphics, and the animation of the subscribe button are
all things that frontend engineers design. Frontend engineering is incredibly
complex - a common misconception is that frontend engineering is easier than backend
engineering. This is definitely NOT true, and frontend engineering has many
interesting and complicated challenges. One challenge is responsive design. YouTube
can be run on so many different devices, from phones to computers to TVs -
frontend engineers need to ensure that the software is responsive
to the device it is being used on. Another challenge is state management.
When you pause a video on YouTube, you can come back to it later and it will pick up
right where you left off. Managing one video for one user may seem trivial - but managing multiple
videos for billions of users is very complex. Ultimately, if you’re someone who
is more visually-driven and enjoys creating the things users interact with, then
frontend engineering is definitely for you. ### 2. HTML, CSS, JavaScript If you’ve never coded before, or have no
frontend coding experience, you’ll need to start by learning the fundamentals. Unlike backend
engineering, where there are tons of choices, frontend engineering has 3 specific coding
languages you need to know, which are HTML, CSS, and JavaScript. And before anyone comments
it, yes I know that *technically* HTML and CSS aren’t coding languages, but come on -
everyone calls them coding languages. 1. **HTML (HyperText Markup Language):**
The first language is HTML. HTML forms the structure of web pages by defining elements
such as headings, paragraphs, lists, images, and links. Understanding HTML semantics, tags,
and document structure is fundamental for creating accessible and well-structured content.
2. **CSS (Cascading Style Sheets):** The second language you need to know is
CSS. CSS is used for styling and layout, transforming HTML elements into visually
appealing components. Knowing how to work in CSS is critical for creating responsive designs
and consistent user interfaces across devices.- 3. **JavaScript (JS):**
Last, but definitely not least, is JavaScript. JavaScript adds interactivity
and dynamic behavior to web pages. This is where common coding concepts such as
variables, data types, functions, loops, and more are used to create interactive user
interfaces and responsive web applications. The three languages work together to make up the
frontend. Using a house analogy makes this easy to understand. HTML is like the structure
of the house, CSS is the interior design, and JavaScript is like the smart home
devices that control temperature, lighting, etc. Mastering HTML for structure, CSS for
styling, and JavaScript for interactivity allows frontend engineers to bring designs
to life and engage users effectively. All this may feel overwhelming and like a lot
is being thrown at you all at once. Fortunately, CourseCareers, the sponsor of this video,
offers a 100% FREE coding fundamentals course you can take to learn the basics of
coding, and a complete frontend engineering course that teaches you absolutely everything
you need to know about frontend engineering. No matter your skill-level, you
can use these courses - in fact, they had a carpenter become a full time engineer
in just 4 months by following their courses. Start the coding fundamentals course today
fro free, and by using my link in the description you can purchase the frontend
engineering course with a discount of $50! Now that we’ve touched on the coding fundamentals, let’s start diving in to some of the
challenges frontend engineers solve daily. ### 3. Responsive Design and CSS Frameworks Responsive design is a common frontend
engineering task, and is the art of creating web pages that adapt and respond gracefully
to different screen sizes and devices. What makes design responsive though? One tactic is to use percentage-based
widths and flexible grid systems to create a structure that adapts to
various screen sizes. For example, if we want a title to take up half the screen,
rather than hardcoding a width value like 700 pixels, we will set it to 50%, meaning it
will take up 50% of any screen it is on. Another tactic is using media queries,
which apply specific styles based on device characteristics such as screen
width, resolution, and orientation. Man, writing all this CSS sure
sounds tedious, doesn’t it? Luckily, we have something called CSS frameworks! CSS frameworks are pre-written CSS stylesheets
that provide a collection of reusable components, grids, and styles to streamline the development of
responsive web interfaces. Popular CSS frameworks include Bootstrap, Foundation, and Tailwind
CSS. These frameworks offer things like: - Grid Systems: Ready-made grid systems (e.g.,
12-column grid in Bootstrap) for creating responsive layouts with ease.
- Responsive Utilities: Classes and utilities (e.g.,
Bootstrap's responsive classes like col-sm-6 for small screens) for controlling visibility,
spacing, and responsiveness of elements. - Component Libraries: Pre-styled components
(e.g., buttons, navigation bars, cards) that can be customized and used to build
consistent and responsive UI elements. By incorporating responsive design principles
and leveraging CSS frameworks, frontend developers can create visually appealing,
user-friendly, and adaptive web interfaces that deliver a consistent experience across a
wide range of devices and screen resolutions. ### 4. JavaScript Frameworks Not to be confused with CSS frameworks, javascript
frameworks are JavaScript-based collections of components, modules, and utilities that focus
on specific tasks or functionalities within web development. These libraries simplify
common tasks, improve code organization, and promote code reusability. The most
popular frontend frameworks are React, Vue, and Angular, but there are so
many that it can be hard to keep track. Just like how CSS frameworks provide reusable UI, JavaScript frameworks provide
reusable functionality for things. Think of the subscribe button on YouTube. While CSS frameworks may allow you to
create the design of the subscribe button, it doesn’t actually do anything until it
is hooked up to JavaScript. In a JavaScript framework like React for example, you could create
a SubscribeButton as a working component that you can reuse anywhere on the website, rather than
having to recreate the functionality every time. JavaScript frameworks handle far more than
just reusable components though. They handle complex things like routing and navigation,
state management, form validation, and more. Each JavaScript framework could
have hundreds of hours of tutorials, so it’s hard to dive in-depth to any of
them in this video. My recommendation is that if you’re at this stage of learning, you
should pick one of the main three frameworks, and become very familiar with it. My personal pick
is React, because it’s the most used, which means you will have the largest bank of online resources
if you get stuck or need questions answered. This is definitely the largest learning block
for a frontend engineer, so if you’re here, don’t worry - learning the ever-changing
JavaScript frameworks is a lifelong journey that all frontend engineers
constantly have to deal with. ### 5. API Integration Now that we feel confident about building
and adding functionality to software pages, we need to allow them to interact with the
primary resource on the internet - data! Before you watch this, I recommend going
to the backend engineering roadmap from last week and going to the 3 minute mark to
watch the API section. It’s only 1 minute long and will provide you a LOT of context
for working with APIs on the frontend. Anyways, on the frontend, we display stuff
to users. More specifically, we display data to users. When you click on my YouTube channel,
you see data like my subscriber count, my videos, and more - the data is handled by the backend,
and is provided to the frontend through an API, where frontend engineers decide how
it should be displayed to users. Let’s say you’re not subscribed yet - hit
subscribe right now. This isn’t just me shamelessly trying to get you to subscribe -
it’s actually a way for you to see frontend API integration in action. When you hit
subscribe, the frontend detects a user input, and makes a call to the backend subscribe
API. This API likely includes logic that does things like increase my subscriber
count by 1, and add Codebagel to your list of subscribed YouTubers. Your page then
automatically updates to show this new change. Now as you saw, all these updates happened
pretty quickly. It may not look like it, but in reality, there are probably
hundreds of functions running behind the scene here - so how do
updates happen so quickly? ### 6. Asynchronous JavaScript Writing JavaScript asyncronously is what allows
API integration to work quickly and smoothly. JavaScript, as a language, is
what we call single-threaded, meaning it executes one piece of code
at a time in a sequential manner. Most of your development experience up
until now is with synchronous programming, which is where code executes sequentially and
each operation blocks this thread until it completes. Asynchronous programming
allows JavaScript to perform tasks concurrently without blocking other operations. ***DISCLAIMER:** Technically speaking, JavaScript
asynchronous programming isn’t exactly concurrent, but for simplicity’s sake we’re going
to treat it as such for this video* Here’s a simple example. Let’s say we have
10 functions, each taking 1 second to run. If we run these synchronously, the total
runtime is 10 seconds, as each has to finish before the next one can begin. If we run these
asynchronously, the total runtime is 1 second, because they all execute concurrently. Asynchronous JavaScript will level your frontend
coding up, and becomes especially useful when you start working with APIs that run hundreds
or even thousands of functions at a time. ### 7. Testing & Debugging Once you’ve built a page structure, styled
it, added functionality with JavaScript, and integrated with a backend API, you now
have a working frontend. But what happens if you go to make changes, and everything
suddenly breaks? How do you fix this? This is where debugging comes into the
picture. Now similar to backend engineering, you can debug by using log and print
statements, but one additional feature of frontend engineering is that you can debug
in the browser by using developer tools. One of the major features of develop tools is the
ability to edit the DOM. This is a fundamental frontend engineering concept I waited until
now to mention because I feel it is easier to comprehend once you have a grasp of the frontend
engineering concepts we have already covered. The DOM, or, Document Object Model, is a
programming interface that represents the structure and content of a web page as a
hierarchical tree of objects. It allows JavaScript to access, manipulate, and interact
with HTML elements on the web page dynamically, enabling dynamic content updates and
interactivity in web applications. The DOM is incredibly useful for debugging, as
it provides developers a more understandable representation of their web applications.
Using developer tools, developers can view the DOM and edit HTML, CSS, and JavaScript code
directly in the browser's inspector, enabling real-time changes and experimentation with the
layout, styling, and behavior of web elements. Developer tools also allow you to monitor the
network to track network requests, responses, headers, payloads, and performance
metrics. This helps developers analyze API calls, asset loading times, caching
behavior, and identify any network related bugs. Getting familiar with developer tools will
allow you to debug much more effectively, so even if it’s boring, this is a must-do. After you’ve debugged, you need to
write reusable tests for your code. For the frontend, there are three kinds of tests. - **Unit Testing:** Unit testing focuses on
testing individual components or functions in isolation. For YouTube, a unit test example could
be testing the functionality of a video playback component. Jest, React Testing Library, and
Enzyme are examples of unit testing frameworks. - **Integration Testing:** Integration testing
verifies the interaction and integration between different components/modules within the YouTube
application, ensuring seamless functionality across interconnected parts. An integration test
could focus on testing the interaction between the video player component and the comments
section component in the YouTube interface. React Testing Library, Cypress, and Selenium
are examples of integration testing frameworks. - **End-to-End (E2E) Testing:** E2E testing
evaluates the entire flow and functionality of the YouTube application from the user's
perspective, simulating real user interactions and scenarios. An E2E test scenario could involve
testing the user journey of searching for a video, playing it, interacting with related videos,
subscribing to a channel, and leaving a comment. Cypress, Selenium WebDriver, and
Puppeteer are examples of E2E testing frameworks. Writing tests can be boring because it feels
like you’re not actually building anything, but it’s essential for making sure
your code is maintained long-term, and that random changes won’t
break the entire application. ### 8. TypeScript and Beyond! Truthfully, this roadmap just barely
scratches the surface of frontend engineering. Frontend engineering has so many different things to learn that most people spend an
entire career picking up new things. So, after you’ve covered
this roadmap, what’s next? I’d definitely recommend learning TypeScript
once you’ve mastered JavaScript. TypeScript is JavaScript, but with static typing,
which makes it a useful upgrade. After this, you have more JavaScript
frameworks and libraries to learn, you can explore progressive web app development,
learn more about modern CSS techniques, the list goes on and on. This is where learning gets fun
- you get to choose your own adventure! As long as you follow this roadmap and learn the basics,
the world of frontend engineering is your oyster. Thanks so much for watching this
video! If you liked this video, and want to see more content like
it, make sure you subscribe and hit the notification bell! And if you’ve
decided frontend engineering isn’t for you, check out this video on backend
engineering. See you all in the next video!
