www.webstackacademy.com
Frontend Developer’s Career
Roadmap
Hitesh Kumar
www.webstackacademy.com
Introduction
● UI Engineer by profession
● Occasional blogger 📝
○ smellycode.com
● My little corner on the internet
○ hiteshkumar.dev
● Twitter
○ @_smellycode
● Amateur ukulele 🎸 player
● Meme lover
www.webstackacademy.com
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
www.webstackacademy.com
Agenda
● What is Frontend Development
● Tech Stack for Frontend Development
● Roadmap
● Interviews Tips
● Q & A
www.webstackacademy.com
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...
www.webstackacademy.com
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
www.webstackacademy.com
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
www.webstackacademy.com
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?
www.webstackacademy.com
Languages of the Web
● HTML - The Skeleton
● CSS - The Skin
● JavaScript - The Brain
www.webstackacademy.com
Hyper Text Markup Language(HTML)
● A markup language
● Declarative in nature
● Responsible for page structure
● Fault Tolerant
www.webstackacademy.com
HTML Element
● Types
○ Non-Replaced elements
○ Replaced Elements
○ Void Elements
● Attributes
● Appearance of elements
www.webstackacademy.com
HTML Document Structure
● <!DOCTYPE html>
● <html>
○ Content language
● <head>
○ Character encoding
○ Document title
○ Viewport metadata
○ Assets, stylesheet, fonts, favicon
○ Scripts
● <body>
○ Page content
www.webstackacademy.com
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.
www.webstackacademy.com
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)
www.webstackacademy.com
Cascading Style Sheets(CSS)
● A style sheet language.
● Responsible for styling web
content.
● Declarative in nature.
● Fault Tolerant.
www.webstackacademy.com
CSS - Box Model
● Everything is a box.
● Box Sizing
○ content-box
○ Border-box
● Padding
● Margin
● Border
www.webstackacademy.com
CSS - Selector
● Simple Selectors
○ Universal selector
○ Type selector
○ Class selector
○ ID selector
● Attribute selector
● Pseudo-classes
● Pseudo-elements
● Complex Selectors
www.webstackacademy.com
CSS - The Cascade
www.webstackacademy.com
CSS - The Cascade
● Position and order of appearance
● Selector Specificity
● Origin
● Importance - !important rule
www.webstackacademy.com
CSS - The Layout
● Display
● Flexbox
● Grid
● Flow Layout
○ Inline-block
○ Float
○ Multi column layout
○ Positioning
www.webstackacademy.com
CSS - Advanced Concepts
● Responsive web design
● Logical Properties
● CSS Variables
● Responsive Images/Videos
● Animations and Transitions
● Media Features
www.webstackacademy.com
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
www.webstackacademy.com
JS - All About Variables
● Variable Declaration
● Hoisting
● Variable Scopes
○ Block
○ Function
○ Global
● Data Types
● Type Casting
www.webstackacademy.com
JS - Data Structures
● Keyed Collection
○ Map
○ Set
○ WeakMap/WeakSet
● Indexed Collection
○ Array
○ Typed Array
● Structured Data
○ JSON
www.webstackacademy.com
JS - Operators, Control Flow, Loops
● Equality Comparisons(=== vs ==)
● Loops and iterations
● Control Flow
● Expression & Operators
www.webstackacademy.com
JS - Function
● Plain Functions
● Arrow Functions
● IIFEs
● Arguments object
● Scope & function stacks
○ Lexical Scoping
○ Closures
○ Recursion
● Built in functions
www.webstackacademy.com
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
www.webstackacademy.com
Frameworks
www.webstackacademy.com
CSS Framework
● Frameworks
○ Bootstrap
○ Tailwind
● CSS Preprocessors
○ SCSS
○ PostCSS
● CSS Architecture
○ Block Element Modifiers(BEM)
www.webstackacademy.com
JS Framework/Libraries
● Library
○ ReactJs
○ Radix-UI
○ MeterialUi
● Frameworks
○ Vue
○ Angular
○ Svelte
www.webstackacademy.com
Testing
● Manual vs Automation Testing
● Unit Testing
● Integration Testing
● Functional Testing
● Tools/Libs
○ Jest
○ Vitest
www.webstackacademy.com
Package Managers
● Node Package Manager(NPM)
● Pnpm(Performant NPM)
● Yarn
www.webstackacademy.com
Build Tools
● Module Bundler
○ Vite, Esbuild, Webpack,
Rollup, Parcel
● Task Runner
○ NPM Scripts
● Linters and Formatters
○ Prettier, EsLint
www.webstackacademy.com
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
www.webstackacademy.com
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
www.webstackacademy.com
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.
www.webstackacademy.com
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.
www.webstackacademy.com
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.
www.webstackacademy.com
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
www.webstackacademy.com
Interview Tips
● Research about the role.
● Research about the round.
● Research about the company.
● Participate in mock interviews.
● Be honest and seek help.
www.webstackacademy.com
Final Note
In a world abundant of information, the desire for
learning is scarce.
~ Naval
www.webstackacademy.com
Q & A
www.webstackacademy.com
www.webstackacademy.com ‹#›
Thank You

Front-End Developer's Career Roadmap