Every creator needs a home on the internet they actually own. Social media profiles come and go, algorithms change overnight, and platforms can ban you without warning. A website you built yourself? That's yours. Nobody can take it away, nobody can throttle your reach, and nobody takes a cut of your traffic.
This course starts from absolute zero. You don't need any prior coding experience. By the end, you will understand how the web actually works under the hood, write HTML and CSS by hand, and publish a real, live website that anyone in the world can visit. No page builders. No templates. Just you, a text editor, and the open web.
Before you write a single line of code, you need a mental model of what happens when someone types a URL into their browser and hits Enter. This isn't just background knowledge. Understanding this flow will help you debug problems, make smart hosting decisions, and understand why your pages sometimes load slowly.
The Journey of a URL
When you type https://exocreate.online into your browser bar and press Enter, a chain of events fires off in milliseconds. Let's walk through every step.
First, your browser checks whether it already knows the IP address for that domain. Every website lives on a server somewhere in the world, and servers are identified by IP addresses, not human-readable names. Your browser keeps a local cache of recently visited domains so it doesn't have to look them up every time. If the domain is in cache, it skips straight to connecting.
If the address isn't cached, your browser asks a DNS server (Domain Name System) to translate the domain name into an IP address. Think of DNS as the phone book of the internet. Your internet provider runs DNS servers, and there are also public ones like Cloudflare's 1.1.1.1 and Google's 8.8.8.8. The DNS server responds with something like 104.21.32.15, and now your browser knows where to go.
HTTP Requests and Responses
With the IP address in hand, your browser opens a connection to that server and sends an HTTP request. HTTP stands for HyperText Transfer Protocol, and it's the language browsers and servers use to talk to each other. The request says something like: "GET me the page at / (the homepage)."
The server receives the request, finds the right file (usually an index.html file), and sends back an HTTP response containing the HTML code for that page. Along with the HTML, it sends a status code: 200 means everything is fine, 404 means the page wasn't found, and 500 means the server broke.
Your browser then reads the HTML, discovers it references a CSS file and some images, and fires off additional HTTP requests for each of those resources. Once everything arrives, the browser assembles the page on your screen. This entire process, from keypress to rendered page, typically takes less than a second on a decent connection.
Servers and Hosting
A server is just a computer that's always on and always connected to the internet, running software that listens for HTTP requests and sends back files. When you "host" a website, you're putting your files on one of these computers so the world can access them.
You don't need to own a server. Services like Cloudflare Pages, GitHub Pages, and Netlify will host your static website for free. They handle the server infrastructure, the security, and the global distribution so your site loads fast everywhere. For this course, we'll use Cloudflare Pages because it's fast, free, and genuinely easy to set up.
HTTPS and Security
You'll notice most URLs start with https:// rather than http://. That "s" stands for "secure." HTTPS encrypts the data traveling between your browser and the server so that nobody in between (like your ISP or someone on the same Wi-Fi) can read or tamper with it. Any modern hosting service gives you HTTPS for free. Never publish a site without it.
💡 Key Takeaway
The web is a conversation between browsers and servers. Your browser asks for files using HTTP, and a server sends them back. DNS translates human-friendly domain names into server IP addresses. Your job as a web developer is to create the files (HTML, CSS, images) that the server delivers.
🔨 Exercise 1.1: Trace a Web Request
Open your browser's Developer Tools (press F12 or Ctrl+Shift+I) and go to the Network tab. Now visit any website. Watch the requests appear in real time.
- Find the initial HTML request. What status code did it return?
- How many additional requests fired after the HTML loaded (CSS, JS, images)?
- Click on a request and examine the headers. Find the Content-Type header.
- Sort requests by size. What was the largest file? The smallest?
Deliverable: A screenshot of the Network tab for a site of your choice, with a short write-up identifying the initial HTML request, total number of requests, and the largest resource loaded.
HTML (HyperText Markup Language) is the skeleton of every web page. It's not a programming language in the traditional sense. You don't write logic or calculations. Instead, you describe the structure of content: this is a heading, that's a paragraph, here's a list, there's an image. The browser reads your HTML and renders it visually.
Document Structure
Every HTML page follows the same basic skeleton. Open a text editor, type this out (don't copy-paste; typing builds muscle memory), and save it as index.html:
<!DOCTYPE html> tells the browser this is a modern HTML5 document. <html> wraps everything. <head> contains metadata the user doesn't see. <body> contains everything visible on the page.
The <head> section is where you put the page title (shown in the browser tab), links to CSS files, character encoding declarations, and viewport settings for mobile devices. The <body> is where all your visible content lives.
Semantic Tags
HTML5 introduced semantic tags that describe the meaning of content, not just its appearance. These matter for accessibility (screen readers use them to navigate) and for SEO (search engines understand your page structure better).
- <header> - The top section of your page or a section within it. Usually contains your logo, site title, and navigation.
- <nav> - A navigation menu. Wrap your site's main links in this.
- <main> - The primary content of the page. There should be only one <main> per page.
- <section> - A thematic grouping of content with its own heading.
- <article> - A self-contained piece of content that could stand on its own (a blog post, a product card).
- <footer> - The bottom section. Copyright info, contact links, secondary navigation.
Using a <div> for everything technically works, but it tells the browser and search engines nothing about your content. Always prefer semantic tags when they fit.
Headings, Paragraphs, and Lists
Headings go from <h1> (most important, used once per page for the main title) down to <h6> (least important). Don't skip levels: if you have an <h1> and need a subsection, use <h2>, not <h4>. This hierarchy helps both screen readers and search engines understand your content.
Paragraphs use the <p> tag. Browsers add spacing between paragraphs automatically. Don't use <br> tags to simulate paragraph spacing; that's a common beginner mistake.
Lists come in two flavors: <ul> (unordered, bullet points) and <ol> (ordered, numbered). Each item inside goes in an <li> tag. Lists are perfect for features, steps, ingredients, or any grouped items.
Links and Images
Links use the <a> (anchor) tag with an href attribute pointing to the destination. Add target="_blank" to open links in a new tab and rel="noopener" for security when linking to external sites.
Images use the <img> tag with a src attribute for the file path and an alt attribute describing the image. The alt text is essential for accessibility and for when images fail to load. Never leave alt empty unless the image is purely decorative.
Forms
Forms let users send data. The <form> tag wraps the whole thing. Inside, you use <input> for text fields, email fields, and checkboxes; <textarea> for multi-line text; <select> for dropdowns; and <button> for the submit action. Each input should have a <label> associated with it using the for attribute, which links the label to the input's id. This is critical for accessibility. A screen reader user who can't see your layout relies entirely on labels to understand what each field is for.
💡 Key Takeaway
HTML is about structure and meaning, not appearance. Use semantic tags to describe what content is, not what it should look like. Every page needs the same skeleton: DOCTYPE, html, head, body. Use headings in order, paragraphs for text blocks, and always write alt text for images.
🔨 Exercise 2.1: Build a Personal Bio Page in Pure HTML
Create a file called index.html and build a personal bio page using only HTML (no CSS yet). Include all of these elements:
- A proper HTML5 document structure with <head> and <body>
- A <header> with your name as an <h1> and a short tagline in a <p>
- A <nav> with at least 3 anchor links (they can link to sections on the same page using #ids)
- A <main> containing at least two <section> elements: an "About Me" section and a "Skills" section
- An unordered list of your skills or interests
- At least one image with proper alt text
- A <footer> with a copyright notice and a link to your email (mailto:)
Deliverable: A single index.html file that displays correctly in a browser. It will look plain and unstyled. That's fine. Structure first, style later.
If HTML is the skeleton, CSS (Cascading Style Sheets) is the skin, the clothes, and the makeup. CSS controls how everything looks: colors, fonts, spacing, layout, animations. Without CSS, every website would look like a plain Word document. With CSS, you can make it look like anything you can imagine.
How CSS Works: Selectors and Properties
CSS is built on a simple pattern: you select an HTML element and then declare how it should look. A CSS rule has two parts: a selector (which element to style) and a declaration block (what styles to apply).
There are several types of selectors. Element selectors target all instances of an element (like p for all paragraphs). Class selectors start with a dot (like .highlight) and target elements with that class attribute. ID selectors start with a hash (like #header) and target a single specific element. In practice, you will use class selectors for almost everything. IDs are too specific, and element selectors are too broad.
You can combine selectors for precision. .card p targets paragraphs inside elements with the class "card." nav a targets links inside nav elements. This cascading specificity is what gives CSS its name and its power.
The Box Model
This is the single most important concept in CSS layout. Every HTML element is a rectangular box, and that box has four layers from inside out: content, padding, border, and margin.
- Content is the actual text or image inside the element.
- Padding is the space between the content and the border. It's inside the element's background color.
- Border is the visible edge of the element.
- Margin is the space outside the border that separates this element from its neighbors. Margin is always transparent.
A critical detail: by default, width in CSS only applies to the content area. If you set an element to 300px wide and add 20px of padding on each side, the total width becomes 340px. This catches everyone off guard. The fix is box-sizing: border-box, which makes the width include padding and border. Most developers apply this globally with * { box-sizing: border-box; } at the top of their stylesheet.
Colors and Fonts
CSS gives you multiple ways to define colors. Named colors like red or cornflowerblue work for quick experiments. Hex codes like #ff6b35 are the most common format; they represent red, green, and blue values in hexadecimal. RGB like rgb(255, 107, 53) does the same thing in decimal. HSL like hsl(20, 100%, 60%) defines hue, saturation, and lightness, which many designers prefer because it's more intuitive to adjust.
For fonts, the font-family property accepts a list of fonts in priority order. The browser uses the first one it has available. Always end with a generic family: sans-serif, serif, or monospace. For web fonts, Google Fonts is free and easy to integrate. Add a <link> tag to your HTML <head> and use the font name in your CSS.
Font sizing uses several units. Pixels (px) give you exact control. rem units are relative to the root font size, which makes them better for responsive design. A good practice is to set the base font size on the <html> element and use rem everywhere else. Typical body text is 1rem (usually 16px); headings might be 2rem or larger.
Spacing and Display Types
The display property controls how an element behaves in the layout flow. The most important values are:
- block - Takes up the full width available, stacks vertically. Divs, paragraphs, and headings are block by default.
- inline - Takes up only as much width as its content, flows horizontally with text. Links and spans are inline by default.
- inline-block - Flows inline like text but allows width and height to be set. Useful for buttons or small cards that sit side by side.
- flex - Enables Flexbox layout on the element's children. This is the modern way to align and distribute space. Use it for navigation bars, card grids, and centering.
- none - Hides the element completely. It's removed from the layout as if it doesn't exist.
Flexbox deserves special attention. When you set display: flex on a container, its children become flex items. You can then use justify-content to distribute them horizontally and align-items to align them vertically. gap adds spacing between items. A simple display: flex; justify-content: space-between; align-items: center; handles the vast majority of layout challenges beginners encounter.
CSS is not about memorizing every property. It's about understanding the box model, how display types work, and how selectors target elements. Once you have those three things, you can look up anything else.
💡 Key Takeaway
Everything in CSS is a box. Master the box model (content, padding, border, margin) and always use box-sizing: border-box. Use class selectors for styling, Flexbox for layout, and rem units for responsive font sizing. Start simple. You can do a lot with just colors, spacing, fonts, and flex.
🔨 Exercise 3.1: Style Your Bio Page
Take the HTML bio page from Exercise 2.1 and add CSS to make it look professional. Create a separate file called style.css and link it from your HTML.
- Add a color scheme: a dark or light background, contrasting text color, and an accent color for links and headings
- Set a readable font from Google Fonts. Set body text to 1rem and headings to appropriate larger sizes.
- Add padding and margins so content doesn't touch the edges. Center the main content with a max-width (try 700px) and margin: 0 auto.
- Use Flexbox for your navigation links (display: flex with gap)
- Style your image with border-radius (try 50% for a circle) and a max-width so it doesn't overflow on mobile
- Add hover effects on your links (change color or add an underline on hover)
Deliverable: Your updated index.html linked to a style.css file. The page should be visually appealing and readable on both desktop and mobile (resize your browser to check).
You've learned how the web works, you can write HTML structure, and you can style it with CSS. Now it's time to put it all together, set up a real development environment, and publish your site to the internet. This is where everything becomes real.
Setting Up VS Code
Visual Studio Code (VS Code) is a free code editor made by Microsoft. It's the most popular editor in the world for web development, and for good reason: it's fast, it's powerful, and the extension ecosystem is massive.
Download and install VS Code from the official site. Once it's open, install these extensions (click the Extensions icon in the left sidebar and search for them):
- Live Server - Launches a local web server and auto-refreshes your browser when you save a file. This is your most important extension. Right-click your HTML file and choose "Open with Live Server."
- Prettier - Automatically formats your code so it's consistent and readable. Set it as your default formatter in settings.
- HTML CSS Support - Gives you autocomplete for CSS class names in your HTML files.
Create a new folder for your project (call it something like my-website). Open that folder in VS Code with File, then Open Folder. This folder is your project. Everything for your website lives here: your HTML files, your CSS files, your images.
Project Structure
Keep your project organized from the start. A clean structure for a simple site looks like this:
- index.html - Your homepage. Browsers look for this file by default.
- style.css - Your stylesheet. Link it from your HTML's <head>.
- images/ - A folder for all your images. Reference them as
images/photo.jpgin your HTML.
If you add more pages later, each one gets its own HTML file: about.html, contact.html, etc. They all share the same style.css so your design stays consistent.
Publishing on Cloudflare Pages
Cloudflare Pages is a free hosting service that puts your site on Cloudflare's global network, meaning it loads fast from anywhere in the world. The free tier is generous: unlimited sites, unlimited bandwidth, and free HTTPS.
There are two ways to publish. The simplest method, called Direct Upload, doesn't require any Git knowledge:
- Go to dash.cloudflare.com and create a free account (or log in).
- In the dashboard, go to Workers & Pages and click Create.
- Choose the Pages tab, then select Upload assets.
- Give your project a name (this becomes your subdomain:
your-name.pages.dev). - Drag your entire project folder into the upload area.
- Click Deploy. In about 30 seconds, your site is live.
Your site will be available at https://your-project-name.pages.dev. That's a real URL. Anyone with an internet connection can visit it. You can later connect a custom domain if you buy one.
Going Live: The Final Checks
Before you share your URL with anyone, run through this checklist:
- Test on mobile: Open the URL on your phone. Does everything look good? Is text readable without zooming? Make sure you have the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1"> - Check all links: Click every link on your page. Broken links are the easiest mistake to make.
- Check all images: Make sure every image loads. If one is broken, you probably have a path issue (wrong folder name or filename capitalization).
- Verify HTTPS: Your URL should start with https://. Cloudflare handles this automatically, but confirm the padlock icon is there.
- Read the content: Read your page out loud. Catch typos. Check grammar. Your first site is a portfolio piece.
Shipping beats perfecting. Your first website will not be your best work, and that's fine. Get it live, share the link, and iterate. Every professional developer's first site was rough. The important thing is that it exists.
💡 Key Takeaway
VS Code with Live Server is your development environment. Keep your project folder organized: index.html, style.css, images/. Publish via Cloudflare Pages Direct Upload for free hosting with HTTPS. Test on mobile before sharing. Shipping something imperfect beats never shipping at all.
🔨 Exercise 4.1: Publish Your Website (Course Deliverable)
This is the final exercise that ties the whole course together. Take your styled bio page from the previous exercises and publish it live on the internet.
- Open your project folder in VS Code. Make final tweaks and test with Live Server.
- Create a free Cloudflare account if you don't have one.
- Use Cloudflare Pages Direct Upload to deploy your site.
- Test the live URL on both your computer and your phone.
- Fix any issues and redeploy if needed (just upload again; it overwrites).
Deliverable: A live URL (your-name.pages.dev) pointing to your published personal bio page, built with hand-written HTML and CSS. Share it. You made a website.
💡 Course Complete
You now understand how the web works, can build structured pages with HTML, style them with CSS, and publish them live for free. This is the foundation everything else builds on. Next up: MULT-124 Web Development 2, where you'll add interactivity with JavaScript and build more complex layouts.