WEB
DEVELOPMENT
10 COMMON
WEBSITE LAYOUTS
—— Every Developer Should Know ——
Classic Website Layout
Two-Column Layout
Three-Column Layout
Sidebar Layout
Dashboard Layout
Blog Layout
E-commerce Layout
Portfolio Layout
SaaS Landing Page Layout
Documentation Layout
SaaS Landing Page Layout
Complete Structure with Accurate Section Labels
The All-in-One Platform for Modern Teams
Plan, collaborate and get work done faster with powerful tools designed for your team.
Trusted by 10,000+ teams worldwide
Everything you need to work smarter
Task Management
Organize work and stay on track.
Team Collaboration
Work together in real-time.
Secure & Reliable
Your data is always protected.
Powerful Analytics
Make data-driven decisions.
A better way to manage your work
- ✓ Drag & drop task management
- ✓ Real-time collaboration
- ✓ Custom workflows
Simple, transparent pricing
Starter
$0 /month
Pro
$19 /month
Business
$49 /month
Loved by teams around the world
"FlowSaaS has transformed how our team works."
Sarah Khan
"Incredibly easy to use and super powerful."
David Lee
"Our productivity has never been higher."
Emily Carter
Ready to get started?
Join thousands of teams today.
Header / Navigation
Contains the logo, main navigation links and a primary CTA button.
Hero Section
Main headline, short description and a strong call-to-action. Often includes an image or product illustration.
Logos / Trust Section
Displays company logos or partner brands to build credibility and trust.
Features Section
Highlights the key features or benefits of your product or service.
Product Showcase
Shows the product in action with screenshots or illustrations and key benefits.
Pricing Section
Presents different pricing plans with features and a clear CTA.
Testimonials Section
Real customer feedback to build social proof and trust.
Call to Action (CTA)
A final encouragement for visitors to sign up or get started.
Footer
Contains important links, social media icons and legal information.
FRONTEND
DEVELOPER
ROADMAP
A complete step-by-step guide to become a Frontend Developer
HTML
Build the structure of your web pages.
- 🟧 Semantic HTML
- 🟧 Forms & Input
- 🟧 Tables
- 🟧 Accessibility (a11y)
- 🟧 SEO Basics
CSS
Style your website and make it beautiful.
- 🟦 Selectors & Specificity
- 🟦 Box Model
- 🟦 Flexbox
- 🟦 CSS Grid
- 🟦 Responsive Design
- 🟦 Animations & Transitions
JavaScript
Add interactivity and make your website dynamic.
- 🟨 Variables, Data Types
- 🟨 Functions
- 🟨 DOM Manipulation
- 🟨 ES6+ Features
- 🟨 Async JavaScript
- 🟨 Fetch API & Promises
React
Build modern, reusable and scalable UI.
- 🟩 Components
- 🟩 JSX
- 🟩 Props
- 🟩 State & useState
- 🟩 Hooks (useEffect, useRef, etc.)
- 🟩 React Router
Next.js
Build production ready and SEO friendly apps.
- 🟪 App Router
- 🟪 Server Components
- 🟪 SSR & SSG
- 🟪 API Routes
- 🟪 Metadata & SEO
- 🟪 Deployment (Vercel)
Full Stack
(MERN)Connect to databases, build APIs and deploy real world applications.
MongoDB
Express.js
React
Node.js
- 🟢 Node.js Basics
- 🟢 Express.js
- 🟢 MongoDB & Mongoose
- 🟢 RESTful APIs
- 🟢 Authentication (JWT)
- 🟢 Deployment
Your Journey Step by Step
🚀Learn the Basics
HTML, CSS, JavaScript
Build Projects
Practice & build real projects
Learn React
Build modern UI
Go with Next.js
Build production ready apps
Master Full Stack
Build, deploy and scale
Keep Building.
Keep Growing. 🚀
Save this roadmap
for your journey!
Follow Nitish Pal
for more Frontend, MERN and Career content.
LANGUAGES USED IN
Different technologies. One goal — Build amazing things!
WEB DEVELOPMENT
- 5️⃣ 1. HTML
- 3️⃣ 2. CSS
- 🟨 3. JavaScript
- 🟦 4. TypeScript
- 🐘 5. PHP
- ⚛️ 6. React (JS)
- 🐍 7. Python
- 🗄️ 8. SQL
SOFTWARE DEVELOPMENT
- 🔵 1. C
- 🔷 2. C++
- 🟣 3. C#
- ☕ 4. Java
- 🐍 5. Python
- 💎 6. Ruby
- 🟨 7. JavaScript
- 🗄️ 8. SQL
GAME DEVELOPMENT
- 🟣 1. C#
- 🔷 2. C++
- ☕ 3. Java
- 🐍 4. Python
- 🟨 5. JavaScript
- 🌙 6. Lua
- 🎯 7. Kotlin
MOBILE APP DEVELOPMENT
- 🎯 1. Kotlin (Android)
- ☕ 2. Java (Android)
- 🕊️ 3. Swift (iOS)
- 🎯 4. Dart (Flutter)
- ⚛️ 5. React Native
- 🟨 6. JavaScript
- 🟦 7. TypeScript
MACHINE LEARNING / AI
- 🐍 1. Python
- 📉 2. R
- ☕ 3. Java
- 🔷 4. C++
- 🔴 5. Julia
- 📊 6. MATLAB
- 🔴 7. Scala
- 🗄️ 8. SQL
GitHub
New to GitHub? This step-by-step visual guide takes you from GitHub basics to building a professional developer portfolio.
$ git init
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin main
What is GitHub?
GitHub is a platform for hosting, managing, and collaborating on code using Git.
Create Your GitHub Account
- ✓ Create your GitHub account
- ✓ Add a professional username
- ✓ Upload a profile photo
- ✓ Write a short bio
- ✓ Add your portfolio/website
- ✓ Add your location and skills
Learn the Git Basics
$ git init
$ git add .
$ git commit -m "..."
$ git branch -M main
$ git push -u origin main
Create First Repository
📁 Repository
📄 README.md
📁 src/
📁 public/
📄 package.json
📄 .gitignore
Master Commands
Write Great README
- 📌 Project Name
- 📝 Project Description
- ✨ Features
- 🛠️ Technologies
- ⚙️ Installation & Usage
Use Branches
Instead of directly changing main:
Create → Develop → Pull Request → Merge
Pull Requests
Branch
Push
PR
Review
Merge
Build Your GitHub Portfolio
Create projects that demonstrate your skills:
Why Use GitHub?
- ✓ Version Control
- ✓ Backup Your Code
- ✓ Collaborate Easily
- ✓ Open Source Community
- ✓ Showcase Your Work
🎯 Pro Tips
- • Commit small, meaningful changes
- • Write clear commit messages
- • Keep README updated
- • Use .gitignore for sensitive files
GitHub Account
Git Basics
Repositories
Commits & Branches
Pull Requests
Open Source
Build Real Projects
Professional Profile
Developer Portfolio
Make Profile Stand Out
✅ DO THIS
- ✓ Pin best repositories
- ✓ Write useful README files
- ✓ Keep projects organized
- ✓ Add live demos
- ✓ Show meaningful commits
- ✓ Contribute to open source
⛔ AVOID THIS
- ❌ Empty repositories
- ❌ Copy-paste projects
- ❌ Poor README files
- ❌ Exposing API keys/secrets
- ❌ Committing .env files
CSS MEDIA QUERIES
📱 Build Responsive Websites for Every Device 💻
WHAT ARE MEDIA QUERIES?
Media Queries in CSS allow you to apply different styles based on the device's characteristics such as width, height, orientation, resolution, and more.
HOW IT WORKS
Media queries consist of a media type and one or more expressions that check conditions.
/* CSS styles */
}
MEDIA TYPES
COMMON BREAKPOINTS (BASED ON SCREEN WIDTH)
Extra Small
Phones < 576px
Small
Phones ≥ 576px
Medium
Tablets ≥ 768px
Large
Laptops ≥ 992px
Extra Large
Desktops ≥ 1200px
Extra Extra Large
Large Desktops ≥ 1400px
EXAMPLE: RESPONSIVE NAVBAR
/* Desktop First Approach */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
@media (max-width: 991px) {
.nav-links { display: none; }
.menu-toggle { display: block; }
}
@media (max-width: 767px) {
.navbar { padding: 1rem; }
}
MEDIA FEATURES YOU CAN USE
width
Screen width
height
Screen height
orientation
Portrait or Landscape
resolution
Screen resolution (dpi)
aspect-ratio
Aspect ratio of viewport
hover
Hover capability
ORIENTATION EXAMPLE
// Portrait Mode
@media (orientation: portrait) {
.box { background: #3498db; }
}
// Landscape Mode
@media (orientation: landscape) {
.box { background: #e74c3c; }
}
BEST PRACTICES
- ✓ Use relative units (%, em, rem) for flexible layouts.
- ✓ Follow Mobile-First approach.
- ✓ Keep breakpoints consistent.
- ✓ Test on real devices, not just browser tools.
- ✓ Use min-width for better scalability.
MOBILE-FIRST vs DESKTOP-FIRST
Mobile-First (Recommended)
Write base styles for mobile, then add styles for larger screens using min-width.
Desktop-First
Write base styles for desktop, then override for smaller screens using max-width.
TEST YOUR WEBSITE
Use DevTools or real devices to test your responsive design.