Front-End Developer's Career Roadmap

www.webstackacademy.com
Frontend Developer’s Career
Roadmap
Hitesh Kumar

Introduction
● UI Engineer by profession
● Occasional blogger 📝
○ smellycode.com
● My little corner on the internet
○ hiteshkumar.dev
● Twitter
○ @_smellycode
● Amateur ukulele 🎸 player
● Meme lover

Experience
2014
IT, SKIT, Jaipur
B Tech
Mar 2022
Architect
Virgio
Jul 2014
Jr Software Engineer
InTimeTec
Feb 2019
Technical Lead
Myntra
Jul 2023
Senior Architect
Tectonic
Jan 2017
Senior Software
Engineer
Greytip
Graphics: Slidesgo

Agenda
● What is Frontend Development
● Tech Stack for Frontend Development
● Roadmap
● Interviews Tips
● Q & A

What is Frontend Development
● The development of visual and interactive elements of
a website/app that users interact with directly.
● Frontend devs are responsible for creating the user
interface of a website/app.
● Frontend devs primarily work with designers,
back-end devs and PMs to fulfil the final product
meets requirements.
● Front devs ensure that the website/app is
user-friendly, aesthetically pleasing, and functionally
efficient.
● Web Developer, UI Engineer, UI Developer, Front
Engineer, HTML/CSS/JS Developer, App Developer...

Tech Stack for Frontend Development
● Web
○ HTML, CSS, JavaScript
○ Framework/Libs
■ Angular, React, Svelte, Vue
■ SSR - NextJS, Remix
○ Web Assembly
● Mobile App
○ Android
■ Java, Kotlin
○ iOS
■ Swift, Objective C
○ Universal
■ React Native, Flutter, Xamarian, Ionic

Roadmap
● Internet
● Languages of the Web
● Frameworks
● Testing
● Package Managers
● Build Tools
● Version Control System(VCS)
● Server Side Rendering(SSR)
● Progressive Web Apps(PWA)
● Mobile Applications

Internet
● How does the internet work?
● What is HTTP/HTTPS?
● What it is a domain name?
● Domain Name System(DNS) and how it works?
● What is hosting?
● Internet and the web
● Browsers and how do they work?

Languages of the Web
● HTML - The Skeleton
● CSS - The Skin
● JavaScript - The Brain

Hyper Text Markup Language(HTML)
● A markup language
● Declarative in nature
● Responsible for page structure
● Fault Tolerant

HTML Element
● Types
○ Non-Replaced elements
○ Replaced Elements
○ Void Elements
● Attributes
● Appearance of elements

HTML Document Structure
● <!DOCTYPE html>
● <html>
○ Content language
● <head>
○ Character encoding
○ Document title
○ Viewport metadata
○ Assets, stylesheet, fonts, favicon
○ Scripts
● <body>
○ Page content

HTML - Semantic HTML
● Semantic means "relating to meaning".
● Use HTML elements to structure your
content based on each element's
meaning, not its appearance.
● Accessibility object model (AOM)
● The “role” attribute.
● Semantic tag - header, nav, section ,
article, aside, footer, etc.

HTML - Advanced Concepts
● Forms and Validations
● HTML Media(Audio, Video, Image)
● HTML Graphics(SVG, Canvas)
● Document Object Model
● Search Engine Optimization(SEO)
● Social Media Optimization(SMO)

Cascading Style Sheets(CSS)
● A style sheet language.
● Responsible for styling web
content.
● Declarative in nature.
● Fault Tolerant.

CSS - Box Model
● Everything is a box.
● Box Sizing
○ content-box
○ Border-box
● Padding
● Margin
● Border

CSS - Selector
● Simple Selectors
○ Universal selector
○ Type selector
○ Class selector
○ ID selector
● Attribute selector
● Pseudo-classes
● Pseudo-elements
● Complex Selectors

CSS - The Cascade

CSS - The Cascade
● Position and order of appearance
● Selector Specificity
● Origin
● Importance - !important rule

CSS - The Layout
● Display
● Flexbox
● Grid
● Flow Layout
○ Inline-block
○ Float
○ Multi column layout
○ Positioning

CSS - Advanced Concepts
● Responsive web design
● Logical Properties
● CSS Variables
● Responsive Images/Videos
● Animations and Transitions
● Media Features

JavaScript
Software is eating the world. JavaScript
is eating the software.
● Adds interactivity to web pages.
● can run on both browser and
non-browser environment.
● Follows ECMAScript Language
specification
● Not related to Java
● Full of idiosyncrasies

JS - All About Variables
● Variable Declaration
● Hoisting
● Variable Scopes
○ Block
○ Function
○ Global
● Data Types
● Type Casting

JS - Data Structures
● Keyed Collection
○ Map
○ Set
○ WeakMap/WeakSet
● Indexed Collection
○ Array
○ Typed Array
● Structured Data
○ JSON

JS - Operators, Control Flow, Loops
● Equality Comparisons(=== vs ==)
● Loops and iterations
● Control Flow
● Expression & Operators

JS - Function
● Plain Functions
● Arrow Functions
● IIFEs
● Arguments object
● Scope & function stacks
○ Lexical Scoping
○ Closures
○ Recursion
● Built in functions

JS - Advanced Concepts
● Strict mode
● this keyword
● Asynchronous JavaScript
○ Callback
○ Promises
○ Async/Await
● Fetch/Ajax API
● Interators
● Generators
● ES Modules/CommonJs Modules
● Browser Dev Tools

Frameworks

CSS Framework
● Frameworks
○ Bootstrap
○ Tailwind
● CSS Preprocessors
○ SCSS
○ PostCSS
● CSS Architecture
○ Block Element Modifiers(BEM)

JS Framework/Libraries
● Library
○ ReactJs
○ Radix-UI
○ MeterialUi
● Frameworks
○ Vue
○ Angular
○ Svelte

Testing
● Manual vs Automation Testing
● Unit Testing
● Integration Testing
● Functional Testing
● Tools/Libs
○ Jest
○ Vitest

Package Managers
● Node Package Manager(NPM)
● Pnpm(Performant NPM)
● Yarn

Build Tools
● Module Bundler
○ Vite, Esbuild, Webpack,
Rollup, Parcel
● Task Runner
○ NPM Scripts
● Linters and Formatters
○ Prettier, EsLint

Version Control System
● VCS allow you to track changes to your
codebase/files over time.
● VCS provides best in class collaboration
experience.
● VCSs:
○ Git
○ Apache Subversion(SVN)
● VCS Hosting
○ Github, Gitlab, Bitbucket

Server Side Rendering(SSR)
SSR refers to the process that the server completes
the HTML structure splicing of the page, sends it to
the browser, and then binds the status and events for
it to become a fully interactive page.
● ReactJs
○ NextJs, Remix
● Angular
○ Angular Universal
● VueJs
○ NuxtJs
● Svelte
○ Svelte Kit

Web Security Basic
Web security refers to the protective measures taken
by the developers to protect the web applications from
threats that could affect the business.
● CORS
● HTTPS
● Content Security Policy(CSP)
● OWASP(Open Web Application Security
Project) Security Risks.

Progressive Web App
Progressive Web Apps (PWAs) are websites that
are progressively enhanced to function like
installed, native apps on supporting platforms, while
functioning like regular websites on other browsers.
Advantages
● Responsive and work with many different
screen sizes
● Function like Native Apps with a single
codebase.
● Updates are independent. No need to visit
app store/play store.
● Low maintenance cost.
● Fast and Lightweight. Also, can function
offline unlike other sites.

Progressive Web App
PWA Development
● Web Tech: HTML, CSS, JS, RectJs, Angular…
● You’ll need a server with a HTTPS connection
● Service workers
○ Background task runners.
○ Perform advanced caching
○ Provides offline support
○ Send push notification
○ Badging icons
● Manifest file: Metadata about PWA, like icon,
appearance, descriptions, colors etc.

Mobile Application
● React Native
○ Learn once, write anywhere.
○ Web support: React Native Web
● Expo
○ Ecosystem of tools that help you
develop, review & deploy.
○ Supports iOS, Android and Web.
● Ionic
○ Uses Web View
● Flutter

Interview Tips
● Research about the role.
● Research about the round.
● Research about the company.
● Participate in mock interviews.
● Be honest and seek help.

Final Note
In a world abundant of information, the desire for
learning is scarce.
~ Naval

www.webstackacademy.com ‹#›
Thank You

Front-End Developer's Career Roadmap

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Front-End Developer's Career Roadmap

Similar to Front-End Developer's Career Roadmap (20)

More from WebStackAcademy

More from WebStackAcademy (20)

Recently uploaded

Recently uploaded (20)

Front-End Developer's Career Roadmap