🔰 Custom Scrollbar in CSS

@CodingCoursePro
Shared with Love➕

Web Development Beginner Roadmap 🌐💻

📂 Start Here
∟📂 Understand How the Web Works (Client-Server, HTTP)
∟📂 Set Up Code Editor (VS Code) & Browser DevTools

📂 Front-End Basics
∟📂 HTML: Structure of Webpages
∟📂 CSS: Styling & Layouts
∟📂 JavaScript: Interactivity

📂 Advanced Front-End
∟📂 Responsive Design (Media Queries, Flexbox, Grid)
∟📂 CSS Frameworks (Bootstrap, Tailwind CSS)
∟📂 JavaScript Libraries (jQuery basics)

📂 Version Control
∟📂 Git & GitHub Basics

📂 Back-End Basics
∟📂 Understanding Servers & Databases
∟📂 Learn a Back-End Language (Node.js/Express, Python/Django, PHP)
∟📂 RESTful APIs & CRUD Operations

📂 Databases
∟📂 SQL Basics (MySQL, PostgreSQL)
∟📂 NoSQL Basics (MongoDB)

📂 Full-Stack Development
∟📂 Connect Front-End & Back-End
∟📂 Authentication & Authorization Basics

📂 Deployment & Hosting
∟📂 Hosting Websites (Netlify, Vercel, Heroku)
∟📂 Domain & SSL Basics

📂 Practice Projects
∟📌 Personal Portfolio Website
∟📌 Blog Platform
∟📌 Simple E-commerce Site

📂 ✅ Next Steps
∟📂 Learn Frameworks (React, Angular, Vue)
∟📂 Explore DevOps Basics
∟📂 Build Real-World Projects

React "❤️" for more!
@CodingCoursePro
Shared with Love➕

🔰 CSS Select and element's parent

For a long time, in CSS land, developers were longing for a feature that allowed to select the parent of a particular element.

In this example, we have two .parent elements but with different children. With the :has() pseudo selector, we can select the parent of a particular child. With this we can apply some styling only to that particular parent.

This opens up a lot of possibilities such as

✨ Style a list when a particular element is hovered
✨ Style a card depending on whether or not it has an image
✨ Style a header depending on whether or not it has an hyperlink

The possibilities are endless 🔥
@CodingCoursePro
Shared with Love➕

Today, let's start with the first topic in the Web Development Roadmap:

✅ How the Web Works 🌐📥

📌 1. What happens when you type a URL in your browser?
▶️ Example: You type www.google.com and hit Enter.

Here’s what happens:

1️⃣ Browser Sends a Request
Your browser sends a request to the server where the website is stored. This is called an HTTP request.

2️⃣ DNS Resolves the Address
DNS (Domain Name System) turns www.google.com into an IP address like 142.250.64.78, so it knows where to send the request.

3️⃣ Server Receives the Request
The server is a computer that stores the website’s files. It processes the request and sends back the HTML, CSS, and JS files.

4️⃣ Browser Displays the Page
Your browser reads those files and renders the website for you to see.

📌 2. Key Concepts You Should Know

🧠 Client
Your browser (like Chrome) is the client – it requests the website.

🧠 Server
The machine that holds the website and responds to your request.

🧠 HTTP
A protocol – like a language – that browsers and servers use to talk.
➡️ Example:
⦁ GET – asking for a webpage
⦁ POST – sending form data

🧠 HTML, CSS, JavaScript
⦁ HTML: Gives structure (e.g., headings, paragraphs)
⦁ CSS: Adds style (e.g., colors, layout)
⦁ JS: Adds interaction (e.g., clicks, animations)

📌 Example Flow:

You type: www.example.com
↓
DNS converts it to IP: 93.184.216.34
↓
Your browser sends an HTTP GET request
↓
Server responds with HTML, CSS, JS
↓
Browser renders the page for you!

💡 Every time you visit a website or build one, this process is happening behind the scenes. As a web developer, understanding it helps you debug issues and write better code!

Web Development Roadmap: @CodingCoursePro
Shared with Love➕

💬 Tap ❤️ for more!