Free Programming learning guide

Build a Personal Website with HTML and CSS

Name: Build a Personal Website with HTML and CSS
Author: Tanmay Kalbande

Build a Personal Website with HTML and CSS — a free beginner-level guide covering build a personal website with html and css. Learn with clear...

99 min read10 chaptersbeginner

1. Getting Started with Web Development

How Websites Actually Work Imagine you are sitting in a coffee shop. You open your phone, type www.wikipedia.org into your browser, and within seconds, the entire encyclopedia is at your fingertips. It feels like magic. But what actually happened in that fraction of a second? To build a website, you first need to understand the underlying machinery. Every website, no matter how complex, boils down to a conversation between two computers: a client and a server. The Client and the Server Your phone or laptop is the client. When you type a web address into your browser (like Chrome, Safari, or Firefox), the client acts like a customer at a restaurant placing an order. It sends a message out into the internet asking for a specific web page. At the other end of that request is a server. A server is just a powerful computer stored in a data center somewhere in the world, running 24/7. Its job is to listen for requests from clients. When the server hears your request, it acts like the chef in the restaurant kitchen. It gathers the necessary files for the website you requested and sends them back to your device. This conversation is called the request-response cycle. You request a page, the server responds with the files. The Three Core Languages of the Browser When the server sends those files back to your phone or laptop, your browser receives them. But your browser doesn’t inherently know how to display a website. It relies on a specific set of instructions written in three core languages: HTML (HyperText Markup Language): This is the skeleton of the website. It tells the browser what is on the page. For example, HTML tells the browser, "This is a heading," "This is a paragraph," or "This is an image." CSS (Cascading Style Sheets): This is the clothing or paint on the skeleton. It tells the browser how things should look. CSS says, "Make that heading blue," "Center this image," or "Make the text larger." JavaScript: This is the muscle and brain. It makes the website interactive. JavaScript makes pop-ups appear, handles form submissions, and updates live data. (Don't worry about JavaScript yet—we will focus entirely on HTML for now, and add CSS later in the book). The Concept of Local vs. Remote Right now, if you type a web address, you are viewing a remote website. The files live on a remote server far away from you. However, web developers don’t build websites directly on live servers. That would be like trying to renovate a restaurant while customers are actively eating in it. Instead, developers build websites locally. This means all the HTML and CSS files live right on …

2. Structuring Content with Text and Links

The Anatomy of an HTML Element In the previous chapter, you set up your development environment using VS Code, created your first index.html file, and saw how a browser retrieves that file from a server to display it locally. You even used Emmet to generate a basic HTML skeleton. Now, it’s time to fill that skeleton with life. When a browser downloads your HTML file, it doesn't just see a wall of text. It looks for instructions on what that text is. Is it a main title? Is it a simple paragraph? Is it a list of your hobbies? To communicate this, we use HTML tags. Recall that HTML stands for HyperText Markup Language. The "markup" part refers to those tags. Let's look at the anatomy of a standard HTML element: Here is how the pieces break down: <p is the opening tag. It tells the browser, "A paragraph starts here." This is my personal website. is the content. This is the actual text the user will read. </p is the closing tag. The forward slash (/) tells the browser, "This paragraph ends here." Together, the opening tag, content, and closing tag make up an element. Most HTML elements follow this exact pattern, though we will meet a few exceptions later in this chapter. Organizing Text with Headings and Paragraphs When you land on a webpage, you instinctively scan it to find what you're looking for. You look for big text to tell you what the page is about, and smaller text to read the details. HTML provides specific elements to create this visual and structural hierarchy. Headings HTML offers six levels of headings, from <h1 to <h6. <h1 is the most important heading on your page. A personal website's homepage might have an <h1 with your name. <h2 is used for major sections beneath the main heading, like "About Me" or "Projects". <h3 through <h6 are used for sub-sections, decreasing in importance and visual size as the number goes up. Think of headings like the outline of a document. You wouldn't jump from an <h1 directly to an <h4 in the same section, just as you wouldn't put a sub-sub-sub-section directly under the main title of an essay. Paragraphs For standard blocks of text, you will use the paragraph element, <p. Browsers automatically add a bit of space above and below paragraphs to separate them visually. Real-World Example 1: A Personal Bio Page Let's say you are building the "About Me" section of your personal website. Here is how you might structure the headings and paragraphs: Notice the logical step-down: the main name is an <h1, the major section is an <h2, and the specific sub-topic is an <h3. …

3. Adding Visuals with Images and Media

Why Visuals Matter Imagine walking into an art gallery where every wall is completely blank, and the curator simply hands you a typed list of descriptions of the paintings. You’d likely feel disappointed and leave. A webpage without images or media feels exactly the same way. In the previous chapters, you built a solid foundation using text and links. You learned how to structure content with HTML (HyperText Markup Language) so your browser understands what is a heading, what is a paragraph, and what is a link. But text alone rarely tells the whole story. Whether you want to showcase a profile photo of yourself, display a gallery of your graphic design work, or embed a video reel of your coding projects, visual media is what transforms a plain document into an engaging experience. In this chapter, we will take your personal website to the next level by adding images and external media. You will learn how to place images on your page, how to make those images accessible to everyone, and how to embed videos from platforms like YouTube directly into your site. Inserting Images with the <img Tag In HTML, images are not actually "pasted" into a web page like you might paste a picture into a Word document. Instead, your HTML file simply contains a set of instructions that tells the browser where to find the image file and how to display it. To add an image, we use the <img tag. The word "img" is just an abbreviation for "image." Unlike the <p (paragraph) or <h1 (heading) tags you used in Chapter 2, the <img tag is an empty element (sometimes called a void element). This means it doesn't wrap around any text content, so it doesn't need a closing tag. You won't write <img</img; instead, the entire tag is self-contained. Because the tag itself doesn't contain any text, the browser needs two crucial pieces of information—provided as attributes—to make the image appear. Attributes are extra bits of information added inside the opening tag to configure the element. The two most important attributes for the <img tag are src and alt. The src Attribute: Pointing to the File The src attribute (short for "source") tells the browser exactly where to find the image file. Just like the href attribute you used for links in Chapter 2, the src attribute relies on a URL (Uniform Resource Locator) to locate the resource. There are two main ways to provide this source: locally or remotely. 1. Local Images In Chapter 1, you learned about working locally on your computer. If you have an image file saved on your computer—like a photo of yourself named profile.jpg—you can tell the browser …

4. Introduction to CSS and Styling Text

The Visual Layer of the Web In the previous chapters, you built the structural foundation of your personal website using HTML. You added text, links, and images. Right now, your site probably looks like a standard, unstyled document from the 1990s—black text on a white background, using the browser's default font, with everything aligned to the left side of the screen. HTML tells the browser what content is (a heading, a paragraph, an image). CSS (Cascading Style Sheets) tells the browser how that content should look. If HTML is the skeleton of your website, CSS is the skin, clothing, and personal style. CSS allows you to change text colors, swap out fonts, adjust sizes, and eventually control the entire layout of your page. By the end of this chapter, your personal website will undergo a visual transformation, taking on a distinct personality through custom typography and color. Linking CSS to HTML Before you can style your HTML, you have to tell your HTML where to find the styling instructions. While there are a few ways to apply CSS, the industry standard is to use an external stylesheet. This means you write your CSS in a completely separate file, keeping your structure (HTML) and your design (CSS) cleanly separated. Creating Your CSS File Open your project folder in VS Code. In the Explorer panel, create a new file and name it style.css. The .css file extension tells VS Code and the browser that this file contains Cascading Style Sheets. Your folder structure should now look something like this: index.html style.css (and any image files you added previously) The <link Element To connect this new file to your HTML, you need to use the <link element inside the <head of your index.html document. Add the following lines to the <head of your HTML file, making sure to save both files afterward: Let’s break down that <link tag: rel="stylesheet": The rel attribute defines the relationship between the current document and the linked file. Here, we are declaring it is a stylesheet. href="style.css": Just like the links you built in Chapter 2, the href attribute points to the file's location. Because style.css is in the exact same folder as index.html, we only need to provide the file name. If you open your index.html in your browser right now, nothing will have changed. That’s because your style.css file is completely empty. Let’s fix that. CSS Syntax and Selectors To write CSS, you need to learn its basic grammar. A CSS rule is made up of two main parts: the selector and the declaration block. Here is what a basic CSS rule looks like: p is the selector. It tells the browser which HTML elements to …

5. Mastering the CSS Box Model

The Invisible Boxes Around Everything When you look at a well-designed webpage, text seems to breathe. Images sit perfectly spaced away from the edges of the screen, and distinct sections of content are easy to tell apart. But when you build your first webpage using just HTML, it often looks like a cramped, endless block of text touching the very edges of the browser window. The reason for this drastic difference comes down to a fundamental concept in CSS. Every single element on a webpage—whether it’s a paragraph, a heading, an image, or a link—is treated by the browser as a rectangular box. Even if an element looks round or irregular on the screen, the browser still calculates its size and position using a strict, invisible rectangle. Understanding how this rectangle is constructed is the secret to controlling the layout, spacing, and overall readability of your personal website. In web development, we call this concept the CSS Box Model. Anatomy of the Box Model The Box Model describes the space an element takes up by breaking that invisible rectangle down into four distinct layers. Working from the inside out, these layers are: content, padding, border, and margin. Let’s define what each layer does. 1. Content The content is the innermost part of the box. This is where your actual text, images, or other media live. When you set a width or height on an element using CSS, you are usually setting the size of this content area. If you write a paragraph of text, the words themselves make up the content. 2. Padding Padding is the space inside the box, sitting between the content and the border. Think of padding as the bubble wrap or the inner cushioning of a package. If you add a background color to an element, that color will fill both the content area and the padding area. Padding pushes the content away from the edges of the box. 3. Border The border is the visible outline of the box. It wraps directly around the content and the padding. You can make a border thick, thin, solid, dotted, or completely invisible. Even if a border is set to zero pixels wide, it still exists mathematically as the dividing line between the inside of the box (content and padding) and the outside of the box (margin). 4. Margin Margin is the transparent space outside the border. It is the invisible force field that pushes this box away from other elements on the page. Because margins are transparent, whatever background color is on the webpage will show through the margin. Margins are primarily used to create gaps between separate elements. Calculating Box Size Here is where most beginners …

6. Structuring a Personal Website Layout

The Blueprint of a Web Page Imagine trying to assemble a complex piece of furniture without the instruction manual. You have all the wooden panels, screws, and brackets, but no idea how they fit together. You might end up with a wobbly table that collapses the moment you put a coffee cup on it. Building a website without a clear structure leads to a similar disaster. In previous chapters, you learned how to write text, add images, and style them using the CSS Box Model. You know how to build the individual pieces of the furniture. Now, we need to learn how to read the blueprint and put those pieces together so the final product is sturdy, logical, and visually coherent. When building a personal portfolio website, your goal is to present information about yourself in a way that is easy for visitors (and potential employers) to digest. To do this, web developers don’t just throw content onto a page; they organize it into distinct, predictable sections. Before we write a single line of code, we need to plan the layout. Creating a Wireframe Every well-built website starts with a wireframe. A wireframe is a basic, low-fidelity visual guide that represents the skeletal framework of a web page. Think of it as a rough sketch or a blueprint. It doesn't include colors, fancy fonts, or actual images. Instead, it uses simple boxes and placeholder text to map out where major pieces of content will live. Wireframes are crucial because they force you to think about the hierarchy and organization of your information before you get distracted by the visual design. Sketching Your Personal Portfolio You don't need expensive software to create a wireframe. A pen and a piece of paper are often the best tools for the job. Let’s sketch out a standard layout for a personal portfolio website. Grab a piece of paper and draw a large rectangle representing your browser window. Now, divide that rectangle into the following logical sections from top to bottom: 1. The Top Bar: Draw a thin rectangle across the very top. This will hold your name or logo on the left, and a few text links (like "About", "Projects", and "Contact") on the right. 2. The Hero Section: Draw a large box directly beneath the top bar. This takes up most of the screen when a visitor first loads the page. It usually contains a large greeting ("Hi, I'm Alex!"), a short sentence about what you do, and maybe a prominent button. 3. The About Me Section: Draw a wide rectangle below the hero. This might have a smaller box inside it on the left for a profile picture, and a larger box …

7. Creating a Multi-Page Navigation System

From Single Page to Multi-Page Websites Right now, your personal website lives entirely in a single HTML file. If you followed along with Structuring a Personal Website Layout, you likely have a landing page with a header, a main content area, and a footer, all styled beautifully using the CSS Box Model. But a real personal website needs to do more than just look good on one page. You need an "About" page to share your story, a "Projects" page to showcase your work, and a way for visitors to seamlessly jump between them. Think about the last time you visited a coffee shop. The barista doesn’t hand you a single massive sheet of paper containing the history of the company, the full menu, and the employee handbook all mashed together. Instead, they hand you a concise menu. If you want to know the company's history, you look at the "About Us" section on their website. If you want to see job openings, you navigate to a completely different "Careers" page. Websites work exactly the same way. Trying to cram your portfolio, your life story, and your contact information into a single index.html file creates a massive, scrolling nightmare for your users. Instead, we need to break our content into separate, digestible HTML files and build a navigation system to connect them. The Anatomy of a Multi-Page Website In a multi-page website, every distinct piece of content gets its own HTML file. When a user clicks a link to visit a new page, their browser initiates a new request-response cycle. The browser sends a request to the server asking for the new HTML file, the server finds that file and sends it back as a response, and the browser renders the new page on the user's client device. To make this work smoothly, we need to establish three things: 1. Separate HTML files for each section of your site. 2. A consistent navigation bar that appears on every page. 3. Relative file paths so the browser knows exactly where to find your other pages on your computer (or locally). Let’s start by creating the files. Creating Your Website's File Structure Open Visual Studio Code (VS Code) and open the folder where your current website lives. In the Explorer pane of the Side Bar, you should already have an index.html file. Why is it called index.html? By long-standing convention, web servers look for a file named index.html by default when someone visits the root of a website. It is your home base. Let's create two new files right alongside it: 1. In the VS Code Explorer, click the "New File" icon. 2. Name it about.html and press Enter. 3. Click "New …

8. Responsive Design with Flexbox

The Tale of Two Screens Imagine you just finished building your personal website on your laptop. You’ve spent hours perfecting the layout in VS Code. Your "About Me" text sits perfectly beside your profile picture. Your navigation bar links are spaced out beautifully across the top of the screen. You feel triumphant. Then, you pull out your phone to show a friend. You type in your website address, and your heart sinks. Instead of the elegant layout you designed, your profile picture is tiny and shoved into the top left corner. Your "About Me" text stretches across the narrow phone screen in a single, unreadably long line. Your navigation links are so cramped they overlap each other. What happened? You have just encountered the reality of the modern web: people view websites on vastly different screen sizes. Designing a website that looks good on a 27-inch desktop monitor and a 6-inch smartphone requires a specific set of tools and strategies. This is called responsive web design. Responsive web design is the approach to web development where styles and layouts automatically adjust—or respond—to the user's screen size. In this chapter, we will transform your personal website from a rigid, desktop-only design into a fluid, responsive layout using two of CSS's most powerful tools: Flexbox and media queries. What is Responsive Web Design? In the early days of the web, everyone accessed the internet on similarly sized desktop computers. Web developers could safely design pages assuming everyone had the same amount of horizontal space. Today, over half of all web traffic comes from mobile devices. To build a responsive website, we rely on a few core principles: - Fluid grids: Instead of telling an element to be exactly 800 pixels wide, we use percentages or flexible sizing so elements grow and shrink relative to the screen. - Flexible media: Images and videos should scale down to fit smaller screens rather than overflowing off the edge of the page. - Media queries: CSS rules that detect the size of the user's screen and apply different styles based on that size. In Mastering the CSS Box Model, you learned how to give elements width, height, padding, and borders. In Structuring a Personal Website Layout, you learned how to arrange those boxes on a page. Now, we need to make those boxes flexible. Enter Flexbox: A Smarter Way to Align Historically, laying elements out side-by-side in CSS was notoriously difficult. Developers had to use confusing techniques like "floats" and "clearfixes" to get elements to sit next to each other. Thankfully, CSS introduced a layout module called Flexbox (short for Flexible Box Layout). Flexbox is a CSS system designed specifically for laying out elements in one …

9. Adding Polish with CSS Interactions

The Power of Visual Feedback Imagine walking into a physical store where the doors are unmarked. You push on a door, but it doesn’t move. You pull it, nothing happens. You stand there wondering if the store is even open. Now imagine a different door: as you approach, the handle has a clear "PULL" sign, and when you grasp it, the metal feels cool and solid, giving you the confidence to pull the door open. The first door is frustrating because it lacks feedback. The second door communicates exactly what it does and responds to your presence. On the web, HTML provides the structure (the door), and standard CSS provides the appearance (the paint and wood). But it is CSS interactions that provide the handle and the smooth swing of the door. When a user moves their mouse over a link or clicks a button, they expect a visual response. This response tells them, "Yes, this is clickable," or "I have registered your click." In this chapter, we will add this layer of polish to your personal website. You have already built a responsive layout and a multi-page navigation system. Now, we will make those links and buttons feel alive by using CSS pseudo-classes and transitions. Understanding Pseudo-Classes Until now, the CSS you have written targets HTML elements directly. You might write a rule for a to style all your links, or a rule for button to style your buttons. But what if you only want to style a link while the user's mouse is hovering over it? To target an element based on its current state or interaction, we use a pseudo-class. A pseudo-class is a keyword added to a selector that specifies a special state of the selected element. The syntax for a pseudo-class is a colon (:) followed by the state name. Let's look at the two most common interactive pseudo-classes you will use to add polish to your website. The :hover Pseudo-Class The :hover pseudo-class applies a style when a user points to an element with their mouse cursor, but has not yet clicked it. This is the web equivalent of a storefront window display—it invites the user in. Here is how you might style a standard link in your navigation system. First, you set the default state, and then you define the :hover state: When the user's cursor enters the area of the .nav-link element, the text color instantly changes from dark gray to blue, and an underline appears. When the cursor leaves, it instantly snaps back to dark gray. The :active Pseudo-Class The :active pseudo-class applies a style during the brief moment an element is being activated. For buttons and links, this means the …

10. Deploying Your Website to the Internet

From Your Computer to the World Imagine you just finished cooking a spectacular meal. You’ve spent hours perfecting the recipe, adjusting the spices, and plating it beautifully. But right now, that meal is sitting on your kitchen counter. If you want other people to taste it, you have to invite them over or send it out. Over the past nine chapters, you have been cooking. You learned how to structure content with HTML, style it beautifully with CSS, and lay it out using Flexbox. You added responsive design and polished it with smooth CSS interactions. But until now, your website has been sitting on your kitchen counter—your local computer. When you open an HTML file from your computer, it lives locally. The files are physically stored on your hard drive. If you text a friend a screenshot of your website, they can see what it looks like, but they cannot click the links or interact with it. To let anyone in the world experience your website, you need to put it on a server—a powerful computer specifically designed to run 24 hours a day, waiting to send your website files to anyone who asks for them. This process of moving your local files to a remote server is called deployment. By the end of this chapter, you will have a live, public URL (Uniform Resource Locator, commonly known as a web address) that you can share with friends, family, and potential employers. Understanding Local vs. Hosted Files To understand deployment, we need to look at the request-response cycle from a new angle. When you double-click an HTML file on your computer, your web browser (the client) doesn't need to ask a server for anything. It simply reads the file directly from your hard drive. That’s why the address bar usually looks something like file:///Users/yourname/Documents/website/index.html. This is local hosting. When you deploy a website, you are moving your files to a host—a company that owns and maintains servers. Once your files are hosted, the request-response cycle changes. Here is what happens when a friend types your live URL into their browser: 1. The Request: Your friend’s browser sends a message out to the internet asking, "Please send me the files for this website." 2. The Server Responds: The host's server receives the request, finds your HTML, CSS, and image files, and sends them back. 3. The Render: Your friend's browser receives the files and pieces them together, displaying your beautifully styled personal website. Because the server is always turned on and connected to the internet, anyone can make this request at any time, from anywhere in the world. Choosing Your Hosting Platform There are many companies that will host your website, …