🔰 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!

✅ Set Up Your Code Editor & Browser Dev Tools 🛠️🌐

Before building websites, you need a solid environment. Here's how to set up everything as a beginner:

🔹 1. Code Editor: VS Code (Visual Studio Code)
VS Code is the most beginner-friendly and powerful editor used by most web developers.

➤ Steps to Set Up:
1️⃣ Download & install from code.visualstudio.com
2️⃣ Open VS Code → Go to Extensions tab (left sidebar)
3️⃣ Install these must-have extensions:
⦁ Live Server – Auto-refresh browser when you save
⦁ Prettier – Format your code neatly
⦁ HTML CSS Support – Boosts suggestions & auto-complete
⦁ Auto Rename Tag – Edits both opening and closing tags
⦁ Path Intellisense – Autocomplete file paths

➤ Settings to Tweak (optional):
⦁ Font size, tab spacing
⦁ Theme: Dark+ (default) or install others like Dracula

🔹 2. Browser: Chrome or Firefox
Use a modern browser with strong developer tools — Google Chrome is highly recommended.

➤ How to Open DevTools:
Right-click on any webpage → Inspect
or press Ctrl+Shift+I (Windows) / Cmd+Opt+I (Mac)

➤ Key DevTools Tabs:
⦁ Elements – Inspect & edit HTML/CSS live
⦁ Console – View JavaScript logs & errors
⦁ Network – Monitor page load and API calls
⦁ Responsive View – Test your site on mobile/tablets
(Click the phone+tablet icon on the top-left)

💡 Pro Tip:
Use Live Server in VS Code + DevTools in Chrome side-by-side for real-time preview & debugging. This workflow saves hours!

@CodingCoursePro
Shared with Love➕

💬 Tap ❤️ for more!

✅ Frontend Development Skills (HTML, CSS, JavaScript) 🌐💻

1️⃣ HTML (HyperText Markup Language)
Purpose: It gives structure to a webpage.
Think of it like the skeleton of your site.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

💡 Tags like <h1> are for headings, <p> for paragraphs. Pro tip: Use semantic tags like <article> for better SEO and screen readers.

2️⃣ CSS (Cascading Style Sheets)
Purpose: Adds style to your HTML – colors, fonts, layout.
Think of it like makeup or clothes for your HTML skeleton.

Example:

<style>
  h1 {
    color: blue;
    text-align: center;
  }
  p {
    font-size: 18px;
    color: gray;
  }
</style>

💡 You can add CSS inside <style> tags, or link an external CSS file. In 2025, master Flexbox for layouts: display: flex; aligns items like magic!

3️⃣ JavaScript
Purpose: Makes your site interactive – clicks, animations, data changes.
Think of it like the brain of the site.

Example:

<script>
  function greet() {
    alert("Welcome to my site!");
  }
</script>

<button onclick="greet()">Click Me</button>

💡 When you click the button, it shows a popup. Level up with event listeners: button.addEventListener('click', greet); for cleaner code.

👶 Mini Project Example

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Site</title>
    <style>
      body { font-family: Arial; text-align: center; }
      h1 { color: green; }
      button { padding: 10px 20px; }
    </style>
  </head>
  <body>
    <h1>My Simple Webpage</h1>
    <p>Click the button below:</p>
    <button onclick="alert('Hello Developer!')">Say Hi</button>
  </body>
</html>

✅ Summary:
⦁ HTML = structure
⦁ CSS = style
⦁ JavaScript = interactivity

Mastering these 3 is your first step to becoming a web developer!

@CodingCoursePro
Shared with Love➕
💬 Tap ❤️ for more!

💻 Back-End Development Basics ⚙️

Back-end development is the part of web development that works behind the scenes. It handles data, business logic, and communication between the front-end (what users see) and the database.

What is Back-End Development?

- It powers websites and apps by processing user requests, storing and retrieving data, and performing operations on the server.
- Unlike front-end (design & interactivity), back-end focuses on the logic, database, and servers.

Core Components of Back-End

1. Server
   A server is a computer that listens to requests (like loading a page or submitting a form) and sends back responses.

2. Database
   Stores all the data your app needs — user info, posts, products, etc. 
   Types of databases: 
   - _SQL (Relational):_ MySQL, PostgreSQL 
   - _NoSQL (Non-relational):_ MongoDB, Firebase

3. APIs (Application Programming Interfaces) 
   Endpoints that let the front-end and back-end communicate. For example, getting a list of users or saving a new post.

4. Back-End Language & Framework 
   Common languages: JavaScript (Node.js), Python, PHP, Ruby, Java

Frameworks make coding easier: Express (Node.js), Django (Python), Laravel (PHP), Rails (Ruby)

How Does Back-End Work?

User → Front-End → Sends Request → Server (Back-End) → Processes Request → Queries Database → Sends Data Back → Front-End → User

Simple Example: Create a Back-End Server Using Node.js & Express

Let’s build a tiny app that sends a list of users when you visit a specific URL.

Step 1: Setup your environment

- Install Node.js from nodejs.org 
- Create a project folder and open terminal there 
- Initialize project & install Express framework: 

npm init -y
npm install express

Step 2: Create a file server.js

const express = require('express');
const app = express();
const port = 3000;

// Sample data - list of users
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

// Create a route to handle GET requests at /users
app.get('/users', (req, res) => {
  res.json(users);  // Send users data as JSON response
});

// Start the server
app.listen(port, () => {
  console.log(Server running on http://localhost:${port});
});

Step 3: Run the server

In terminal, run:

node server.js
Step 4: Test the server

Open your browser and go to: 
http://localhost:3000/users

You should see:

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

What Did You Build?

- A simple server that _listens_ on port 3000 
- An _API endpoint_ /users that returns a list of users in JSON format 
- A basic back-end application that can be connected to a front-end

Why Is This Important?

- This is the foundation for building web apps that require user data, logins, content management, and more. 
- Understanding servers, APIs, and databases helps you build full-stack applications.

What’s Next?

- Add routes for other operations like adding (POST), updating (PUT), and deleting (DELETE) data. 
- Connect your server to a real database like MongoDB or MySQL. 
- Handle errors, validations, and security (authentication, authorization). 
- Learn to deploy your back-end app to the cloud (Heroku, AWS).

🎯 Pro Tip: Start simple and gradually add features. Try building a small app like a To-Do list with a back-end database.

@CodingCoursePro
Shared with Love➕
💬 Tap ❤️ for more!