Deploy a Fashion Website to AWS

Host the same website on S3 and EC2 to learn two AWS deployment methods.

Introduction

30 Second Summary

You have built a website on your computer, but nobody else can see it. Getting it live on the internet where anyone with a link can visit is the real milestone.

In this project, you will deploy a fashion school website to AWS using two completely different hosting methods. You will serve the same site from S3 (serverless storage) and EC2 (a full Linux server), then compare the experience of each.

What You'll Build

By the end of this project, you can open two browser tabs showing your fashion school site live on the internet from two completely different AWS services, and share both links with anyone.

By the end of this project, you'll have:

  • A polished fashion school homepage with a hero section, program cards, and footer that anyone on the internet can visit.
  • A live S3 website endpoint where your site loads instantly with zero server management on your part.
  • A running EC2 instance with Apache installed, serving the same site at its public IP address so you can see what traditional server hosting feels like.
  • Secret Mission: Add a custom 404 error page to both deployments and compare how each service handles missing pages.

Are there any prerequisites?

You need an AWS IAM user account with permissions for S3 and EC2. If you do not have one yet, ask your account administrator to set one up before starting.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters. You're going to deploy the same fashion school website to two completely different AWS services, and understanding that contrast is the whole point of this project.

Create Your Fashion School Website

Before you can deploy anything to AWS, you need a working website to deploy. Building it locally first lets you preview the result and catch issues without waiting for cloud uploads.

In this step, you will create a polished fashion school landing page called Vogue Academy. The page uses a dark, elegant theme with a hero section, program cards, and a footer.

In this step, get ready to:
  • Create a project folder and the two files your website needs.
  • Write the HTML structure for the Vogue Academy homepage.
  • Style the page with CSS and preview it in your browser.
Set up your project folder

Every website project starts with a folder to keep your files organized. You will create one on your Desktop so it is easy to find later.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Terminal (macOS) or Command Prompt (Windows) and press Enter to open it.
  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder and move into it by running these commands:
mkdir fashion-school
cd fashion-school
  • Create the two files your website needs by running:
touch index.html style.css
  • Confirm both files exist by running:
ls

You should see index.html and style.css in the output.

Not seeing both files?

Make sure you ran touch index.html style.css with a space between the two filenames. If you are on Windows and touch is not recognized, use type nul > index.html and type nul > style.css instead.

Help me create files on my operating system.

  • Now open this folder in VS Code. In your terminal, run:
code .

What does this command do?

The code . command tells VS Code to open the current folder as a project. The dot (.) means "this directory."

VS Code did not open?

If you see "command not found", open VS Code manually instead. Press Cmd+Space (macOS) or the Windows key (Windows), type VS Code, and press Enter.

Then click File in the menu bar, select Open Folder, and choose the fashion-school folder on your Desktop.

Help me open my project folder in VS Code.

Write the HTML structure

The HTML file defines the content and structure of your webpage. You will build the Vogue Academy homepage section by section.

  • In VS Code, click on index.html in the Explorer sidebar to open it.
  • Paste the following code into index.html to create the page shell, navigation header, and hero section:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vogue Academy - School of Fashion</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">Vogue Academy</div>
            <ul>
                <li><a href="#programs">Programs</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <h1>Shape the Future of Fashion</h1>
        <p>Where creativity meets craftsmanship. Join the next generation of fashion leaders.</p>
        <a href="#programs" class="btn">Explore Programs</a>
    </section>

What does this code do?

The <head> section sets up the page title and links to your CSS stylesheet.

The <header> contains the site logo and navigation links. The <section class="hero"> is the large banner area with the school's tagline and a call-to-action button.

  • Directly below the hero section code you just pasted, add the programs section, about section, footer, and closing tags:

    <section id="programs" class="programs">
        <h2>Our Programs</h2>
        <div class="cards">
            <div class="card">
                <h3>Fashion Design</h3>
                <p>Master the art of creating original garments from concept to runway.</p>
            </div>
            <div class="card">
                <h3>Fashion Marketing</h3>
                <p>Learn to build and promote fashion brands in the digital age.</p>
            </div>
            <div class="card">
                <h3>Textile Arts</h3>
                <p>Explore fabric manipulation, dyeing, and sustainable material innovation.</p>
            </div>
        </div>
    </section>

    <section id="about" class="about">
        <h2>About Vogue Academy</h2>
        <p>Founded in 2020, Vogue Academy has trained over 500 graduates who now work at leading fashion houses worldwide. Our hands-on curriculum blends traditional techniques with modern technology.</p>
    </section>

    <footer id="contact">
        <p>Contact us: info@vogueacademy.example.com</p>
        <p>&copy; 2026 Vogue Academy. All rights reserved.</p>
    </footer>
</body>
</html>

What does this code do?

The programs section uses a cards container with three card divs, one for each program the school offers.

The about section gives background on the school. The <footer> contains contact information and a copyright notice.

  • Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
  • Open the file in your browser by right-clicking index.html in the VS Code Explorer sidebar, selecting Reveal in Finder (macOS) or Reveal in File Explorer (Windows), then double-clicking index.html to open it in your default browser.

You should see the Vogue Academy page with all the text content visible, but unstyled. The header, hero text, program names, about paragraph, and footer are all there in plain black and white.

Page is blank or shows raw code?

If the page is blank, make sure you saved the file (look for a dot on the tab title in VS Code, which means unsaved changes). If you see raw HTML code instead of a rendered page, make sure you opened the file in a browser, not a text editor.

Help me open my HTML file in a browser.

✔️ Awesome, I've got everything!

Great. Make sure index.html is saved and keep it open in your browser tab for the next substep.

ⓧ I'd like to double check the full code

Your index.html should contain both chunks you pasted, in order. Scroll through and confirm you have:

  • The <!DOCTYPE html> declaration and <head> section at the top.
  • A <header> with the navigation inside it.
  • A <section class="hero"> with the h1 and button.
  • A <section id="programs"> containing three card divs.
  • A <section id="about"> and a <footer id="contact"> at the bottom.
  • Closing </body> and </html> tags at the very end.
Style the page with CSS

Right now the page looks plain because there is no styling. You will add CSS to give it a dark, elegant theme with a professional layout.

  • In VS Code, click on style.css in the Explorer sidebar to open it.
  • Paste the following code to set base styles and style the dark header:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background-color: #1a1a1a;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

What does this code do?

The * selector resets all spacing so every browser starts from the same baseline. The header gets a dark background (#1a1a1a) and position: sticky so it stays visible as you scroll.

The nav uses flexbox to space the logo and links apart, with a max width to keep content centered on wide screens.

  • Below the code you just pasted, add the logo, navigation link, and hover styles:

.logo {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #fff;
}

What does this code do?

The .logo class makes the site name white and uppercase with extra letter spacing for a luxury feel. The navigation links use gap: 2rem to space them evenly, and they lighten to white on hover.

  • Save style.css and refresh your browser.

You should see a dark header bar at the top with "VOGUE ACADEMY" on the left and the navigation links on the right.

  • Back in style.css, paste the hero section styles below what you already have:

.hero {
    background-color: #2c2c2c;
    color: #fff;
    text-align: center;
    padding: 6rem 2rem;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.hero p {
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

What does this code do?

The hero section gets a slightly lighter dark background (#2c2c2c) to distinguish it from the header. The paragraph text is constrained to 600px wide and auto-centered for readability.

  • Next, add the button and programs section styles:

.btn {
    display: inline-block;
    background-color: #e63946;
    color: #fff;
    padding: 0.8rem 2rem;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #c1121f;
}

.programs {
    padding: 4rem 2rem;
    text-align: center;
    background-color: #f8f8f8;
}

.programs h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

What does this code do?

The .btn class creates a bold red call-to-action button that darkens on hover. The .programs section gets a light gray background (#f8f8f8) to visually separate it from the dark hero above.

  • Save style.css and refresh your browser.

You should now see the dark hero section with centered white text and a red "Explore Programs" button. The programs heading appears on a light background below it.

  • Back in style.css, add the card layout styles:

.cards {
    display: flex;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}

.card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    color: #1a1a1a;
}

.card p {
    color: #666;
}

What does this code do?

The .cards container uses flexbox with flex-wrap: wrap so the cards sit side by side on wide screens and stack on narrow screens. Each .card has a subtle shadow and rounded corners for a polished look.

  • Finally, add the about section and footer styles to complete the stylesheet:

.about {
    padding: 4rem 2rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.about p {
    color: #555;
    font-size: 1.1rem;
}

footer {
    background-color: #1a1a1a;
    color: #ccc;
    text-align: center;
    padding: 2rem;
}

footer p {
    margin-bottom: 0.5rem;
}

What does this code do?

The .about section is centered with a max width for comfortable reading. The footer matches the header's dark background (#1a1a1a) to bookend the page.

  • Save style.css and refresh your browser.

Before you look at the result, what do you expect the three program cards to look like?

You should see the full Vogue Academy homepage with a dark sticky header, a hero section with a red button, three white program cards side by side on a light gray background, a centered about paragraph, and a dark footer.

Styles not applying?

Check that the <link> tag in your index.html says href="style.css" and matches the filename exactly (style.css, not styles.css).

Make sure both files are in the same fashion-school folder. Also try a hard refresh with Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows) to clear cached styles.

Help me figure out why my CSS is not loading.

✔️ Awesome, I've got everything!

Great. Make sure you have saved style.css and confirmed the page looks fully styled in your browser.

ⓧ I'd like to double check the full code

Your style.css should contain all six chunks you pasted, in order. Scroll through and confirm you have:

  • The * reset, body, header, and nav styles at the top.
  • The .logo, nav ul, and nav ul li a styles with the hover rule.
  • The .hero, .hero h1, and .hero p styles.
  • The .btn, .btn:hover, .programs, and .programs h2 styles.
  • The .cards, .card, .card h3, and .card p styles.
  • The .about, .about h2, .about p, footer, and footer p styles at the bottom.

Your website is ready for deployment. Next up, you will upload it to AWS S3 and see what happens when you try to make it public.

Deploy to S3 and Hit the Wall

Your Vogue Academy site looks great locally. Now it's time to put it on the internet where anyone can see it.

Amazon S3 is purpose-built for serving static files like HTML and CSS. Uploading is straightforward, but AWS has strong security defaults that might surprise you.

In this step, get ready to:
  • Create an S3 bucket with static website hosting enabled.
  • Upload your website files to the bucket.
  • Test the live endpoint URL and discover what happens.
Create an S3 bucket

An S3 bucket is a container that holds your files in the cloud. Each bucket needs a globally unique name because it becomes part of the URL for your website.

  • Switch to the AWS Management Console in your browser.
  • In the search bar at the top, type S3 and select S3 from the results.
  • Click Create bucket.
  • Under Bucket type, keep General purpose selected.
  • In the Bucket name field, enter a unique name like fashion-school-yourname (replace with your own name to make it unique).
  • Leave all other settings as their defaults.
  • Scroll down and click Create bucket.

You should see a green success banner at the top confirming your bucket was created.

What is an S3 bucket?

Think of a bucket as a top-level folder in Amazon's cloud storage. Every file you put inside is called an object.

Bucket names must be globally unique across all AWS customers because AWS uses the name to build a public URL. That is why you add your name to the end.

Seeing a 'Bucket name already exists' error?

Someone else already claimed that name. Try adding more characters to make it unique, like fashion-school-jane-2026.

Help me fix my S3 bucket name error.

Enable static website hosting

Creating the bucket gives you storage, but it does not make it act like a web server yet. You need to tell S3 to treat your files as a website.

  • Click on your new bucket name to open it.
  • Click the Properties tab.
  • Scroll all the way to the bottom until you see Static website hosting.
  • Click Edit.
  • Under Static website hosting, select Enable.
  • In the Index document field, enter index.html.
  • Click Save changes.

After saving, scroll back down to the Static website hosting section. You now see an Endpoint URL displayed at the bottom.

  • Copy that Endpoint URL and save it somewhere (a sticky note, a text file, or your clipboard). You will use it shortly.

What is the endpoint URL?

This is the public web address AWS creates for your hosted site. It follows the format http://{bucket-name}.s3-website-{region}.amazonaws.com. Anyone with this URL can try to access your site.

Upload your files and test the endpoint

Your bucket is configured as a website host. Now you need to put your actual HTML and CSS files inside it.

  • Click the Objects tab.
  • Click Upload.
  • Click Add files.
  • Navigate to your fashion-school folder on your Desktop and select both index.html and style.css.
  • Click Upload at the bottom of the page.

You should see a green success banner confirming both files uploaded. Your website files are now in the cloud.

Now the big moment. Before you visit your endpoint URL, think about what you expect to see. Will the Vogue Academy homepage load perfectly?

  • Open a new browser tab and paste your Endpoint URL from earlier.
  • Press Enter to visit it.

You see a 403 Forbidden error. Your files are in the bucket, but nobody is allowed to read them.

Why did this happen?

By default, Amazon S3 blocks public access to your account and buckets. This is a security feature that protects your data from accidental exposure.

Your files uploaded successfully, but AWS is refusing to serve them to the public internet. You need to explicitly grant read permission before anyone can view your site. That is what the next step will fix.

Not seeing 403 Forbidden?

If you see a different error or a blank page, make sure you are using the Static website hosting endpoint URL (not the bucket's Object URL). The website endpoint is found under Properties > Static website hosting at the bottom of the section.

Help me find my S3 website endpoint URL.

The 403 error is not a failure. It proves your bucket exists, hosting is configured, and your files are inside. The only thing missing is permission for the public to read them. In the next step, you will fix this and bring your site to life.

Fix Permissions and Go Live on S3

Your files are uploaded and the endpoint URL exists, but that 403 Forbidden proved something important. AWS locks down every bucket by default, protecting your data from accidental exposure.

Now you will intentionally open public access using two layers of permission: the Block Public Access setting and a bucket policy. This is exactly how real teams publish static sites on S3.

In this step, get ready to:
  • Turn off Block Public Access for your bucket.
  • Add a bucket policy that grants public read access to all objects.
  • Verify the Vogue Academy homepage loads for anyone on the internet.
Disable Block Public Access

Block Public Access is a safety switch that overrides any policy you add. You need to turn it off before your bucket policy can take effect.

  • Return to your bucket in the S3 console.
  • Click the Permissions tab.
  • Scroll to Block public access (bucket settings) and click Edit.
  • Clear the Block all public access checkbox so it is unchecked.
  • Click Save changes.
  • A confirmation dialog appears. Type confirm in the text field and click Confirm.

The Block public access (bucket settings) section now shows all settings as Off.

Why does AWS have this extra switch?

Block Public Access acts as a master override. Even if you accidentally write a policy that exposes your data, this switch prevents it from taking effect.

By turning it off, you are telling AWS that you intentionally want to allow public access policies on this bucket.

Add a bucket policy for public read access

A bucket policy is a JSON document that tells S3 who can do what with your objects. You will grant everyone on the internet permission to read (download) your files.

  • Still on the Permissions tab, scroll down to Bucket policy and click Edit.
  • Paste the following policy into the Policy editor, replacing the bucket name with your own:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[[BUCKET_NAME="your-bucket-name"]]/*"
        }
    ]
}

What does this policy do?

  • Principal set to * means anyone in the world.
  • Action set to s3:GetObject means they can only read (download) objects. They cannot upload, delete, or modify anything.
  • Resource with /* at the end means this applies to every object inside the bucket.
  • Click Save changes.

You should see a success message confirming the bucket policy was added.

Seeing "Policy has invalid resource"?

  • Double check that the bucket name in the Resource line matches your actual bucket name exactly. Capitalization and hyphens matter.
  • Make sure you kept /* at the very end of the resource ARN.
  • If saving fails entirely, go back to Block public access (bucket settings) and confirm all four settings show as Off.

Still stuck? Help me fix my S3 bucket policy error.

Confirm your site is live on the internet

Both permissions are in place. Before you visit the endpoint, what do you think will happen this time compared to the 403 Forbidden you saw earlier?

  • Click the Properties tab on your bucket.
  • Scroll down to Static website hosting and click the Endpoint URL.

Your Vogue Academy homepage loads fully styled in the browser. The dark header, hero section, three program cards, and footer are all visible. Anyone with this URL can now see your fashion school site.

What just changed?

The 403 Forbidden is gone because you removed two layers of protection. Block Public Access was the master switch, and the bucket policy was the specific permission grant.

Without both in place, S3 refuses to serve your files to the public. This two-layer design means a single mistake cannot accidentally expose private data.

Your site is live on S3 with zero server management. Next up, you will deploy the same site to an EC2 instance running Apache to experience the hands-on difference of traditional server hosting.

Launch EC2 and Serve Your Site from a Server

Your Vogue Academy site is live on S3. Anyone with the endpoint URL can see it, and you didn't manage a single server to make that happen.

But what if you need to run backend code, process form submissions, or control exactly how your server responds to requests? S3 only serves static files. EC2 gives you a full Linux server in the cloud where you install software, run processes, and control everything. In this step, you will launch an EC2 instance, install a web server, and deploy the same fashion school site from a real server.

In this step, get ready to:
  • Launch an EC2 instance with the right network permissions.
  • Connect to the instance and install Apache.
  • Deploy your website files and confirm the site loads from the server.
Launch your EC2 instance

An EC2 instance is a virtual server you rent from AWS. You pick its operating system, size, and network rules, then AWS provisions it in seconds.

  • In the AWS Management Console, type EC2 in the top search bar and select EC2 from the results.
  • Click Launch instance (the orange button).
  • Under Name and tags, enter fashion-school-server as the name.
  • Under Application and OS Images (Amazon Machine Image), keep the default Amazon Linux 2023 AMI selected (it is already chosen under Quick Start > Amazon Linux).
  • Under Instance type, select the type labeled Free tier eligible (t2.micro or t3.micro depending on your account).
  • Under Key pair (login), click the dropdown and select Proceed without a key pair (Not recommended).

Why no key pair?

You will connect to this instance through the browser using EC2 Instance Connect. Instance Connect pushes a temporary key automatically, so you do not need to download or manage a .pem file.

  • Under Network settings, check the box for Allow SSH traffic from and leave it set to Anywhere.
  • Also check the box for Allow HTTP traffic from the internet.
  • Click Launch instance at the bottom of the page.

What is a security group?

A security group is a virtual firewall for your EC2 instance. By checking those two boxes, you created rules that allow SSH (port 22) so you can connect, and HTTP (port 80) so browsers can reach your web server.

You should see a green "Successfully initiated launch" banner. Click View all instances to return to the instances list.

Wait until the Instance state column shows Running and the Status check column shows 2/2 checks passed. This takes 1-2 minutes. Click the refresh icon if the status has not updated.

Instance stuck in Pending?

Give it up to 2 minutes. If it stays in Pending longer, check that your account has permissions to launch EC2 instances. Contact your account administrator if needed.

help me troubleshoot my EC2 instance not launching

Connect and install Apache

Now that your server is running, you need to connect to it and install web server software. Apache is one of the most popular web servers in the world. It listens for HTTP requests and serves files from a folder on the server.

  • Select your fashion-school-server instance by clicking its checkbox.
  • Click the Connect button near the top of the page.
  • Choose the EC2 Instance Connect tab.
  • Leave Connection type set to Connect using EC2 Instance Connect.
  • Click Connect.

A browser-based terminal opens. You are now inside your Linux server as the ec2-user user.

  • Install and start Apache by running these commands:
sudo yum install httpd -y
sudo systemctl start httpd
sudo systemctl enable httpd

What do these commands do?

  • sudo yum install httpd -y installs Apache (called httpd on Amazon Linux) without asking for confirmation.
  • sudo systemctl start httpd starts the web server immediately.
  • sudo systemctl enable httpd makes Apache start automatically if the server ever reboots.
  • Switch to the browser tab with your EC2 instances list.
  • Select your fashion-school-server instance and find the Public IPv4 address in the details panel below.
  • Copy the IP address, open a new browser tab, and visit http:// followed by the IP address you copied.

You should see an Apache test page with the message "It works!" This confirms your web server is running and reachable from the internet.

Seeing a timeout or connection refused?

Make sure you typed http:// (not https://). Your instance does not have TLS configured.

If the page still does not load, go back to your instance's Security tab and confirm the security group has an inbound rule for HTTP (port 80) from 0.0.0.0/0.

help me fix my EC2 instance not responding to HTTP requests

Create your website files on the server

Apache serves files from the /var/www/html/ directory. You will paste your Vogue Academy HTML and CSS into that folder using the nano text editor.

  • Switch back to your EC2 Instance Connect browser terminal.
  • Open a new file for your homepage by running:
sudo nano /var/www/html/index.html
  • Switch to VS Code where your index.html file is open.
  • Select all the content in index.html by pressing Cmd+A (macOS) or Ctrl+A (Windows).
  • Copy it with Cmd+C (macOS) or Ctrl+C (Windows).
  • Switch back to the browser terminal and right-click inside the nano editor, then select Paste.
  • Press Ctrl+O to save, then press Enter to confirm the filename.
  • Press Ctrl+X to exit nano.
  • Now create the CSS file by running:
sudo nano /var/www/html/style.css
  • Switch to VS Code and select all the content in style.css with Cmd+A (macOS) or Ctrl+A (Windows).
  • Copy it with Cmd+C (macOS) or Ctrl+C (Windows).
  • Switch back to the browser terminal, right-click inside nano, and select Paste.
  • Press Ctrl+O to save, press Enter to confirm, then press Ctrl+X to exit.
  • Confirm both files are in place by running:
ls /var/www/html/

You should see index.html and style.css listed in the output.

Before you refresh the page, what do you think you will see when you visit your EC2 IP address now that Apache has your HTML and CSS files?

  • Switch to the browser tab where you saw the Apache test page earlier and refresh the page.

The Vogue Academy homepage loads from your EC2 server, identical to the S3 version. You now have the same site served from a full Linux server you control.

Why does the test page disappear?

Apache only shows its default test page when there is no content in /var/www/html/. Once you add an index.html file, Apache serves your content instead.

Still seeing the test page or unstyled HTML?

If you still see "It works!", try a hard refresh with Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows) to clear the browser cache.

If the page loads but looks unstyled, confirm style.css exists in /var/www/html/ by running ls /var/www/html/ in the terminal. Both files must be in the same directory.

help me fix my EC2 website not displaying correctly

Why EC2 when S3 already works?

S3 is purpose-built for static files. It costs almost nothing and scales automatically, but you cannot run code on it.

EC2 gives you a full server. You can install databases, run Python scripts, handle form submissions, and configure anything the operating system allows. The trade-off is that you manage updates, security patches, and uptime yourself. For a static site like this one, S3 is the simpler choice. For anything dynamic, EC2 (or a similar compute service) is what you need.

Your fashion school site is now live on two completely different AWS services. Next up, you will take on a secret mission to handle what happens when visitors hit a page that does not exist.

Secret mission

Add a Custom 404 Error Page to Both Deployments

Professional websites need graceful error handling when visitors land on a page that doesn't exist. In this mission, you'll create a styled 404 page and deploy it to both S3 and EC2. You'll discover that each platform handles missing pages in a completely different way.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project uses AWS Free Tier services, so there are no ongoing costs as long as your account remains within Free Tier limits.

Cost warning

If your AWS Free Tier has expired or you exceed 750 hours/month of EC2 usage, you will incur charges. Always terminate instances you are not using.

Resources you used:

  • 1 S3 bucket (fashion-school-yourname) with static website hosting enabled and three uploaded objects.
  • 1 EC2 instance (fashion-school-server) running Amazon Linux 2023 with Apache installed.
  • Local fashion-school folder on your Desktop containing index.html, style.css, and 404.html.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep your site live.

  • Both S3 and EC2 are free-tier eligible. S3 static hosting is free within the 5GB storage limit.
  • Your EC2 instance uses compute hours even when idle. Monitor your Free Tier usage in the AWS Billing dashboard to avoid surprise charges.
  • Your local fashion-school folder stays on your Desktop for future edits.

Pause - I'll come back to this later

Shut down running processes to free up compute hours while keeping your files and configuration intact.

  • In the EC2 console, select your fashion-school-server instance.
  • Click Instance state, then select Stop instance. This halts compute charges but keeps your data and configuration.
  • Your S3 bucket stays active at negligible storage cost. No action needed there.
  • To resume later, select the instance and choose Instance state then Start instance. Note that the public IP address will change when you restart.

Delete - I don't want to use this again

Remove all project resources and start fresh. This is permanent and cannot be undone.

Terminate the EC2 instance:

  • In the EC2 console, select your fashion-school-server instance.
  • Click Instance state, then select Terminate instance.
  • Confirm the termination. The instance will shut down and be removed.

Empty and delete the S3 bucket:

  • In the S3 console, open your fashion-school-yourname bucket.
  • Go to the Objects tab, select all objects, and click Delete. Type permanently delete to confirm.
  • Go back to the S3 buckets list, select your bucket, and click Delete. Type the bucket name to confirm deletion.

Delete local project files:

macOS

  • Open a terminal and run:
rm -rf ~/Desktop/fashion-school

Windows

  • Open PowerShell and run:
Remove-Item -Recurse -Force ~\Desktop\fashion-school

That's a Wrap!

That's a Wrap!

Nice work! You just deployed a fashion school website to the internet using two completely different AWS services. You now have two live URLs proving you can host static content with both serverless storage and a managed Linux server.

You've learned how to:

  • Deploy a static website to S3 static website hosting and configure public access using a bucket policy.
  • Launch an EC2 instance, connect via the browser, and install Apache to serve the same site from a Linux server.
  • Experience the key trade-off firsthand: S3 required zero server management while EC2 gave you full control over the operating system and server configuration.
  • Secret Mission: Added custom 404 error pages to both platforms using their respective configuration methods.

Ready to quiz yourself?