Excel Tech Hub

💻 Website Design Lesson 10: Introduction to CSS

After learning HTML, the next important technology in web design is CSS.

CSS (Cascading Style Sheets) is used to style and design a website. While HTML creates the structure of the page, CSS makes it beautiful and attractive.

🎨 What CSS can do:

Change text colors

Add backgrounds

Control spacing and layout

Make websites responsive

Create animations and effects

📌 Example of CSS

h1 {
color: blue;
font-size: 36px;
text-align: center;
}

This code tells the browser to:

Make the heading blue

Increase the size of the text

Align the text to the center

💡 Important Tip:
A good website is not just about information — it must also look professional and easy to read. That is why CSS is very important.

📚 Assignment:
Create a simple HTML page and try changing the color and size of the text using CSS.

---

Follow Excel Tech Hub to keep learning:
🌐 Website Design
💻 Programming
🚀 Digital Skills

💻 Website Design Lesson 8 – Responsive Design

Did you know a website should look good on phones, tablets, and computers?

This is called Responsive Web Design.

A responsive website automatically adjusts its layout to fit different screen sizes so that users can easily read and navigate your site.

📱 Mobile
💻 Laptop
🖥 Desktop

All should display your website properly!

Why Responsive Design is Important: ✔ Better user experience
✔ Works on all devices
✔ Improves SEO ranking on Google
✔ More professional appearance

At Excel Tech Hub, we are learning step by step how to build modern websites.

📌 Follow this page for more Website Design Lessons.

💻 Web Design Lesson 7 – Adding Images to a Website

Images make a website more attractive and engaging. In HTML, images are added using the tag.

Example:



Explanation:

🔹 src – The location or name of the image
🔹 alt – Text that describes the image if it fails to load

Example in a webpage:

Welcome to My Website



This will display an image on your webpage.

📌 Tip: Always keep your images in the same folder as your HTML file for easy access.

➡️ Next lesson: We will learn how to add links so users can move between pages or visit other websites.

💻🚀

📚 Web Design Lesson 6 – Understanding HTML Structure

When creating a website, every web page follows a basic HTML structure. This structure helps the browser understand how to display your content.

A simple HTML page has three important parts:

🔹 – This is the root of the web page. Everything on the page is inside this tag.

🔹 – This section contains information about the page like the title, meta tags, and links to styles or scripts.

🔹 – This is where the actual content appears such as text, images, buttons, and videos.

Example:




My First Website



Welcome to My Website
This is my first web page.




This is the foundation of every website on the internet.

🚀 Next Lesson: I will show you how to add images and links to your website.

Web Design Lesson 6 – Viewing Your Web Page in a Browser

After creating your index.html file, the next step is to open it in a web browser to see your website.

Simply follow these steps:

1️⃣ Save your file as index.html
2️⃣ Go to the folder where the file is saved
3️⃣ Double-click the file or right-click and choose Open with Chrome / Edge / Firefox

Your browser will display the webpage you created with HTML.

This is how developers test and see their websites while building them.

In the next lesson, we will learn how to add headings and paragraphs to your webpage.

Excel Tech Hub – Learn Tech, Build the Future.

💻🚀

💻 Web Design Lesson 5 – Creating Your First Web Page

Now that you have installed Visual Studio Code, it’s time to create your first web page.

A website starts with a simple language called HTML (HyperText Markup Language). HTML is used to structure content on a web page like headings, paragraphs, images, and links.

Your first step is to create a file called index.html and write your first HTML code.

Don’t worry if it looks confusing at first. Every great developer started exactly here.

In the next lesson, we will show you how to display your web page in a browser.

Excel Tech Hub – Learn Tech, Build the Future.

💻🚀

💡 Web Design Tip #1

Always organize your project files.

When creating a website, make sure you keep your files in separate folders like:
📁 images – for pictures
📁 css – for styling files
📁 js – for JavaScript files

Good file organization makes your project clean, professional, and easy to manage.

Follow Excel Tech Hub for more simple web design tips. 🚀

Now that you have installed Visual Studio Code, it's time to write your first code! 💻

The first language every web designer learns is HTML.
HTML is used to create the structure of a website such as headings, paragraphs, images, and links.

In the next post, I will show you how to create your first simple webpage using HTML.

Follow for more web design lessons.

🚀 Learn Web Design Step 2: Installing Visual Studio Code 🚀

Ready to start coding? First, you need a code editor, and Visual Studio Code (VS Code) is perfect for beginners and pros alike!

Steps to Install:

1. Go to https://code.visualstudio.com/

2. Click Download for your operating system (Windows, Mac, or Linux)

3. Open the installer and follow the prompts

4. Launch VS Code and explore the interface – you’re ready to code!

💡 Pro Tip: Install some extensions like Prettier or Live Server to make coding easier and faster!

📌 Next post: I’ll show you how to set up your first project in VS Code.

Visual Studio Code - The open source AI code editor Visual Studio Code redefines AI-powered coding with GitHub Copilot for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

Want to start Web Design?

First, make sure you have:
💻 A Laptop or Desktop Computer
🧑‍💻 A Code Editor (I recommend Visual Studio Code)

These are the basic tools to begin building websites. Start learning today and grow your skills step by step.

📌 In my next post, I will show you how to install Visual Studio Code.

Learn Web Design. Build the Future.
🚀