PART 1: HTML

Chapter 1: What are HTML and CSS?

This chapter introduces you to the two languages that shape almost every page on the web. HTML provides the structure and meaning of a page, while CSS provides the design, layout and visual polish. When they work together, you get everything from simple personal pages to the most elegant and complex sites you can imagine. Understanding these two languages is like learning the alphabet and rhythm of the web. Once you know them, the rest of the web begins to make sense in a steady and satisfying way.

Both languages are designed to be readable even if you are completely new to coding. They use everyday words, clear tags and simple rules. This makes them ideal as a first step into web creation. You will write your first lines quickly, see results instantly and learn through gentle practice rather than wrestling with complicated tools. Throughout this book, you will gradually build a set of small examples that join together into a complete, modern personal site.

If you have been unsure about building a website from scratch, think of this chapter as opening the front door. You will explore the basic ideas at a calm pace, discover what each language does, and start developing the confidence to shape a page by hand. No special background is needed. You already know how to read and think clearly, and that is enough to begin creating pages that look clean, behave well on different devices and feel like your own corner of the web.

What this book will help you build

This book guides you through the process of creating a complete personal website piece by piece. You begin with simple pages that focus on clear structure, readable text and meaningful organisation. As you progress, these pages grow into a small but fully formed site with a homepage, an About Me section, a gallery, a projects page and a contact page. Each part is built using plain HTML first, then gradually shaped with CSS so the site becomes more polished and expressive.

The goal is not to create a huge or complicated project. Instead, you build a site that feels clean, modern and purposeful. You learn how to organise content sensibly, how to present it attractively and how to make sure it behaves well on screens of all sizes. By the time you reach the later chapters, the site becomes something you could genuinely publish online without feeling that it is a beginner’s experiment.

Throughout the book, you also learn how small improvements can transform a page. A simple list becomes a styled navigation bar; a plain photo collection becomes a flexible gallery; a basic form becomes a neat and clear contact section. These gradual enhancements show how HTML and CSS complement each other. You see the structure, then you see how thoughtful design choices bring that structure to life.

How the two parts of the book work together

The book is divided into two parts because HTML and CSS each play a different role, yet both rely on one another to create a complete website. Part 1 focuses entirely on HTML. You learn how pages are constructed, how content is organised and how meaning is expressed through clear tags. During this stage the pages you make will look simple, but they will have solid foundations. Think of it as building a clean and carefully arranged structure that is ready to be styled.

Part 2 introduces CSS, which is the language that shapes the appearance of the pages you built earlier. You begin by adding small touches such as colour, spacing and readable typography. Later you explore modern layout systems, learn how to create responsive designs and add gentle interactive effects. Because every example in Part 2 is based on work you have already completed in Part 1, you always see the connection between structure and style.

This steady progression means you never face a blank page. By the time you reach the visual design chapters, you already have pages that feel familiar. You simply start enhancing them. You will learn that good websites are not created through decoration alone; they emerge from the balance between strong HTML structure and thoughtful CSS styling. This approach mirrors how real sites are built and gives you the confidence to develop your own designs with clarity and purpose.

Tools and setup for writing clean code

You do not need complex software to write HTML or CSS. Both languages work beautifully in any editor that can save plain text files. What matters most is choosing a tool that feels comfortable and does not distract you from the gentle rhythm of writing and adjusting your code. A good editor becomes a quiet workspace where each tag and style can be seen clearly.

Many readers choose Visual Studio Code (code.visualstudio.com). It is free, easy to install and available on all major platforms. It provides clear syntax colouring, a tidy file explorer and optional extensions that help with formatting or previewing pages. Sublime Text (sublimetext.com) is another popular choice because it opens instantly and keeps the screen uncluttered. Brackets has a softer feel and was designed with HTML and CSS in mind, which makes it welcoming for beginners who enjoy a calmer environment.

If you prefer minimalism, you can use a simple text editor such as Notepad, TextEdit or gedit, generally already installed on your computer. These tools show that HTML and CSS are just text files that the browser interprets. There is no gatekeeping and no secret format. This simplicity is part of the joy of learning web creation. Once you pick an editor, you only need a browser. All modern browsers include developer tools that let you inspect elements, change styles temporarily and understand why a page behaves as it does. These tools become a natural part of your workflow as your pages grow.

Using AI as a helpful companion

Learning HTML and CSS can feel like learning a new craft, and AI works well as a friendly guide who sits beside you while you build. You can ask for suggestions about layouts, colours or structure, and you can even share your files when you want a careful check for mistakes. AI can explain why something looks uneven, why a layout shifts in a strange way or why a selector is not matching the element you expected. These explanations help you understand the language more deeply rather than simply copying answers.

You remain the creator, and AI becomes a source of steady support. It can offer ideas, demonstrate alternatives and highlight patterns that make your pages easier to maintain. It never replaces your judgment or style. Instead it gives you options and clarifies concepts that might otherwise slow you down. Many beginners find that having AI nearby makes experimentation feel less risky and more enjoyable because questions can be answered quickly and clearly.

As your confidence grows, AI continues to be useful. When you try new layout techniques or explore responsive design, you can use AI to sanity check your code and confirm that your understanding matches how browsers behave. Treat AI as a companion who helps you learn at your own pace and encourages exploration without fear. With this approach you will develop your own skills while enjoying the reassurance of thoughtful feedback.

A personal site that can grow into more

A personal website is often the easiest and most enjoyable way to learn HTML and CSS. It gives you a clear purpose from the start because every page you create holds something meaningful. You might begin with a simple homepage and a short introduction, then add a gallery of favourite photos, a list of hobbies, a few project notes or a contact page. Even in their simplest form, these pages feel like a small home you are building on the web, with each chapter in this book adding another room.

As you progress, you will notice that the skills you learn for a personal site naturally apply to much larger projects. Clean HTML structure becomes the basis of professional pages. Good typography choices make articles and documentation easier to read. Thoughtful layouts using modern CSS techniques can turn a small gallery into a polished portfolio. A simple contact form can grow into a business enquiry form. Nothing you learn is wasted because everything scales smoothly.

The examples in this book are deliberately chosen so that readers can adapt them for many different purposes. If you want a calm personal page, the patterns here will support it. If you later decide to showcase creative work, start a small business site or build something more ambitious, you will already know how to design pages that feel clear, responsive and welcoming. A personal site is only the beginning; it is also a gentle path toward anything you choose to build next.