Build a Training Program Website
Build and deploy a branded business website using HTML, CSS, and Netlify.
Introduction
30 Second Summary
A small business without a website is invisible to most potential customers. For a training provider like BE TECH APPLIANCE, that means students who need practical skills can't find the courses being offered.
In this project, you will build a professional training program website from scratch using HTML and CSS, style it with bold blue and yellow branding, make it mobile-responsive, and deploy it live to the internet using Netlify.
What You'll Build
When you share the live URL with someone, they see a polished blue and yellow branded site advertising refrigeration and house wiring courses, complete with pricing, trainer details, and a click-to-call phone number.
By the end of this project, you'll have:
- A multi-section business website with a hero banner, about section, service cards showing course pricing, and a contact section with a clickable phone link.
- A mobile-responsive layout that stacks neatly on phones and tablets so potential students can browse on any device.
- A live public URL ending in .netlify.app that BE TECH APPLIANCE can share with anyone to advertise their training programs.
- Secret Mission: A floating WhatsApp contact button that lets potential students message the business directly.
Are there any prerequisites?
You should have basic familiarity with HTML tags and CSS properties. You also need VS Code installed on your computer and a free Netlify account ready to go.
Before We Start
Before We Start...
Before we dive in, let's lock in what you're about to build and why it matters.
Set Up Your Project
Every website starts with a clear folder structure. Having your HTML and CSS files organized in one place makes them easy to find and edit.
In this step, you'll create a project folder on your desktop, add the two files your website needs, and write the starter HTML code that every web page requires.
In this step, get ready to:
- Create a be-tech-appliance folder on your desktop.
- Add the index.html and style.css files.
- Write the HTML boilerplate and verify it loads in Chrome.
Create your project folder
You need a dedicated folder on your desktop to hold all the website files. Creating it on the desktop makes it easy to find later when you deploy.
- In VS Code, open the integrated terminal by pressing Ctrl+` (Windows) or Cmd+` (macOS). The backtick key is next to the 1 key on your keyboard.
- Move to your Desktop by running this command:
cd ~/Desktop- Create the project folder by running:
mkdir be-tech-appliance- Confirm the folder was created by running:
lsYou should see be-tech-appliance listed in the output alongside any other files on your Desktop.
Don't see the folder?
Make sure you typed the folder name exactly as be-tech-appliance with hyphens, not spaces. If you see a "no such file or directory" error on the cd command, your Desktop folder might be in a different location. Try cd ~/OneDrive/Desktop on Windows if you use OneDrive.
Help me find my Desktop folder
- Now open this folder as your VS Code workspace. Click File in the top menu bar.
- Click Open Folder.
- Navigate to your Desktop, select the be-tech-appliance folder, and click Open (macOS) or Select Folder (Windows).
VS Code reloads with the folder as your workspace. The Explorer sidebar on the left now shows BE-TECH-APPLIANCE as the workspace name.
Create the project files
Your website needs two files: one for the page structure (HTML) and one for the visual styling (CSS).
- In the Explorer sidebar, hover over the BE-TECH-APPLIANCE folder name. Four small icons appear to the right.
- Click the New File icon (the leftmost icon that looks like a page with a plus sign).
- Type index.html and press Enter.
- Click the New File icon again.
- Type style.css and press Enter.
Both files now appear in the Explorer sidebar under the folder name.
Files not showing up?
Make sure you pressed Enter after typing each filename. If you accidentally created a file with the wrong name, right-click it in the Explorer and select Delete, then try again.
Help me create files in VS Code
Add the HTML boilerplate
Every web page needs a basic HTML structure to tell the browser how to read the content. This boilerplate includes the page title and a link to your CSS file.
- Click index.html in the Explorer sidebar to open it in the editor.
- Paste the following HTML boilerplate into the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BE TECH APPLIANCE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>What does this code do?
- <!DOCTYPE html> tells the browser this is an HTML5 document.
- The <meta name="viewport"> tag makes the page display properly on mobile phones and tablets.
- <title> sets the text shown in the browser tab.
- <link rel="stylesheet"> connects your style.css file so any styles you write later will apply to the page.
- Save the file by pressing Cmd+S (macOS) or Ctrl+S (Windows).
Before you open this in the browser, what do you expect to see on the page?
- Right-click index.html in the VS Code Explorer sidebar and select Reveal in Finder (macOS) or Reveal in File Explorer (Windows).
- Double-click index.html in the file explorer window to open it in Google Chrome.
You should see a completely blank white page. Look at the browser tab at the top. It reads "BE TECH APPLIANCE", which confirms your HTML boilerplate is working correctly.
Tab title not showing BE TECH APPLIANCE?
Make sure the text inside your <title> tag is exactly BE TECH APPLIANCE with no extra spaces or typos. Save the file again with Cmd+S / Ctrl+S, then refresh the browser page.
Help me fix my page title
✔️ Awesome, I've got everything!
Great. Make sure you've saved index.html and you can see the blank page with the correct tab title in your browser.
ⓧ I'd like to double check the full code
Here is the complete index.html file. Make sure yours matches exactly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BE TECH APPLIANCE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Your style.css file should be empty for now. You will add styles in a later step.
Your project is set up and ready to go. Next, you'll fill this blank page with all the content that tells visitors what BE TECH APPLIANCE offers.
Build the Website Content
Your project structure is ready with both files linked. Now it is time to fill the website with actual content that tells visitors what BE TECH APPLIANCE offers.
A business website needs clear sections: a bold introduction, information about the company, details on services, and a way to get in touch. You will build all four sections in HTML so visitors can find everything they need.
In this step, get ready to:
- Add a hero section with the business name and tagline.
- Build About and Services sections with training program details.
- Add a Contact section with a clickable phone number and a footer.
Add the hero section
The hero is the first thing visitors see when the page loads. It needs to immediately communicate the business name and what the company does.
- In VS Code, click on index.html in the Explorer sidebar to open it.
- Find the empty <body> and </body> tags. Place your cursor on the blank line between them.
- Add the hero section by pasting this code between the body tags:
<header class="hero">
<h1>BE TECH APPLIANCE</h1>
<p class="tagline">Professional Appliance Training - Build Your Future in Technical Skills</p>
</header>What does this code do?
The <header> element wraps the hero section at the top of the page. The class="hero" attribute gives you a hook to style it later.
The <h1> is the main heading for the page. The <p> with class="tagline" holds a short description of what the business does.
- Save index.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
- Switch to Google Chrome and refresh the page.
- You should see "BE TECH APPLIANCE" as a large heading and the tagline text below it, both in plain black text on a white background.
Don't see any text on the page?
Make sure you pasted the code between <body> and </body>, not inside the <head> section. Content inside <head> is invisible to visitors.
Also confirm you saved the file. Look for a white dot on the index.html tab in VS Code. If it is there, the file has unsaved changes.
Still stuck? Help me figure out why my HTML content is not showing in the browser.
Add the About and Services sections
Visitors need to know who is behind the business and what training programs are available. These two sections cover the company background and course details.
- In index.html, place your cursor on the blank line after the closing </header> tag.
- Add the About and Services sections by pasting this code below the header:
<section class="about">
<h2>About Us</h2>
<p>BE TECH APPLIANCE is a professional training provider specializing in hands-on technical skills. Led by Lisa Nywebeni, we equip students with practical knowledge in refrigeration and electrical house wiring. Our courses are designed to get you job-ready with real-world skills that employers demand.</p>
</section>
<section class="services">
<h2>Our Training Programs</h2>
<div class="services-grid">
<div class="service-card">
<h3>Refrigeration Training</h3>
<p class="duration">Duration: 1 Month</p>
<p class="price">R2,500</p>
<p>Learn the fundamentals of refrigeration systems, including installation, maintenance, and repair of fridges, freezers, and air conditioning units.</p>
</div>
<div class="service-card">
<h3>House Wiring Training</h3>
<p class="duration">Duration: Flexible</p>
<p class="price">R5,000</p>
<p>Master residential electrical wiring, including circuit installation, safety compliance, fault finding, and working with distribution boards.</p>
</div>
</div>
</section>What does this code do?
The About section uses a <section> element with an <h2> heading and a paragraph introducing the business and Lisa Nywebeni as the trainer.
The Services section contains a services-grid wrapper div holding two service-card divs. Each card lists the course name, duration, price, and a description of what students learn.
- Save index.html and refresh Chrome.
- You should now see the "About Us" heading with the business description, followed by "Our Training Programs" with both course names, durations, and prices listed.
Only seeing partial content?
If the services section or one of the cards is missing, check that every opening <div> has a matching closing </div>. The services section has three closing </div> tags (one for each card and one for the grid wrapper).
Need a hand? Help me find the missing closing tag in my HTML services section.
Add the contact section and footer
The final content sections give visitors a way to reach the business and close out the page professionally.
- In index.html, place your cursor on the blank line after the closing </section> tag of the services section.
- Add the contact section and footer by pasting this code:
<section class="contact">
<h2>Contact Us</h2>
<p>Ready to start your training? Get in touch today!</p>
<p class="phone">
<a href="tel:0824206517">082 420 6517</a>
</p>
</section>
<footer>
<p>2026 BE TECH APPLIANCE. All rights reserved.</p>
</footer>What does this code do?
The tel: link format makes the phone number clickable on mobile devices. When someone taps it, their phone opens the dialer with the number pre-filled.
The <footer> element closes the page with a copyright line. This is a standard pattern that signals professionalism to visitors.
- Save index.html.
Before you refresh, take a guess. What do you think the page will look like with all this content but no CSS styling applied?
- Refresh the page in Chrome.
You see all the text content on the page: the business name, the about paragraph, both training courses with their prices, and the contact number. Everything is plain black text on a white background with no layout or colors.
Why does it look so plain?
HTML handles the structure and content of a page. CSS handles the visual presentation. Without any styles, the browser displays everything in its default format: black text, white background, stacked top to bottom.
This is actually a good sign. All the content is in place and ready to be transformed with styling in the next step.
Missing the contact number or footer?
Make sure you pasted the contact section after the last </section> tag (the one closing the services section), not inside it. The footer goes after the contact section's closing </section> tag.
Need help? My contact section or footer is not appearing on the page.
✔️ Awesome, I've got everything!
Great. Double check you have saved index.html before moving on.
ⓧ I'd like to double check the full code
Scroll up and confirm each of these chunks is present in your index.html file, in this order:
- The existing <!DOCTYPE html> boilerplate with <head> containing the title and stylesheet link.
- The hero <header> with the h1 and tagline paragraph.
- The <section class="about"> with the About Us heading and paragraph.
- The <section class="services"> containing two service-card divs inside a services-grid wrapper.
- The <section class="contact"> with the phone link.
- The <footer> with the copyright line.
- The closing </body> and </html> tags.
The content is all in place, but it looks like a plain text document. In the next step, you will transform this raw HTML into a professional-looking site with blue and yellow branding that builds trust with potential students.
Style with Blue and Yellow Branding
Your website has all the right content, but right now it looks like a plain text document. Black text on a white background does not inspire trust or attract potential students.
In this step, you will transform the raw HTML into a professional-looking site using BE TECH APPLIANCE's blue and yellow brand colors. The styling will make the site look credible and worth exploring.
In this step, get ready to:
- Set up a CSS reset and base font styles.
- Style the hero, about, contact, and footer sections with the blue and yellow color scheme.
- Create styled service cards with a flexbox layout.
Set up base styles
Browsers add their own default spacing to elements, which creates inconsistencies. A CSS reset removes all that default spacing so you start from a clean slate.
- In VS Code, click on style.css in the Explorer sidebar to open it.
- Add the CSS reset and body font by pasting this code:
/* Remove default browser spacing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Set the base font for all text */
body {
font-family: Arial, sans-serif;
color: #333333;
line-height: 1.6;
}What does this code do?
The * selector targets every element on the page. Setting margin: 0 and padding: 0 removes all default spacing browsers add.
The box-sizing: border-box rule ensures padding never makes elements wider than you expect. The body styles set Arial as the font and a comfortable line height for readability.
- Save style.css and refresh your browser.
The text changes from the browser's default serif font to a clean Arial. The spacing around the edges of the page disappears too.
Style the hero section
The hero is the first thing visitors see. A bold dark blue background with the business name in yellow will immediately communicate the brand.
- Add the hero styles below your existing code in style.css:
/* Hero banner with brand colors */
.hero {
background-color: #1a3a6b;
color: #ffffff;
text-align: center;
padding: 80px 20px;
}
.hero h1 {
font-size: 2.5rem;
color: #f5c518;
margin-bottom: 15px;
}
.hero .tagline {
font-size: 1.2rem;
color: #ffffff;
}What does this code do?
The .hero class gets the dark navy blue (#1a3a6b) as its background. The h1 gets the bright yellow (#f5c518) so the business name pops against the dark background.
The generous padding: 80px 20px gives the hero breathing room so it feels like a proper banner, not a cramped header.
- Save style.css and refresh your browser.
The top of the page now has a bold dark blue banner. "BE TECH APPLIANCE" appears in bright yellow, with the tagline in white below it.
Still seeing plain text at the top?
- Confirm your HTML has class="hero" on the <header> tag.
- Check that your <link> tag in index.html says href="style.css" and matches your file name exactly.
Why isn't my hero section showing blue and yellow?
Now let's style the remaining text sections so they match the brand's polished look.
- Add the About and Contact section styles below your hero code in style.css:
/* About section - centered with max width */
.about {
padding: 60px 20px;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.about h2 {
color: #1a3a6b;
font-size: 2rem;
margin-bottom: 20px;
}
.about p {
font-size: 1.1rem;
color: #555555;
}
/* Contact section - centered layout */
.contact {
padding: 60px 20px;
text-align: center;
}
.contact h2 {
color: #1a3a6b;
font-size: 2rem;
margin-bottom: 15px;
}What does this code do?
Both sections get centered text and generous padding. The About section uses max-width: 800px with margin: 0 auto to keep paragraphs from stretching too wide on large screens.
The headings use the brand navy blue (#1a3a6b) for consistency with the hero banner.
- Save style.css and refresh your browser.
The About and Contact headings now appear in dark blue. The About paragraph text is centered and nicely contained instead of stretching edge to edge.
- Add the remaining Contact styles, phone button, and footer below your existing code in style.css:
/* Contact paragraph and phone button */
.contact p {
font-size: 1.1rem;
color: #555555;
margin-bottom: 10px;
}
.contact .phone {
margin-top: 20px;
}
.contact .phone a {
color: #1a3a6b;
font-size: 1.8rem;
font-weight: bold;
text-decoration: none;
border: 2px solid #f5c518;
padding: 15px 30px;
display: inline-block;
}
.contact .phone a:hover {
background-color: #f5c518;
color: #1a3a6b;
}
/* Footer matches the hero banner */
footer {
background-color: #1a3a6b;
color: #ffffff;
text-align: center;
padding: 20px;
font-size: 0.9rem;
}What does this code do?
The phone link becomes a prominent button with a yellow border. When visitors hover over it, the background fills with yellow to invite a click.
The footer uses the same dark blue as the hero, wrapping the page in matching color at top and bottom. This creates a sense of visual completeness.
- Save style.css and refresh your browser.
The phone number now appears as a large clickable button with a yellow border. The footer at the bottom shows dark blue matching the hero. Try hovering over the phone button to see the yellow fill effect.
Phone button not showing a border?
- Make sure your HTML has class="phone" on the paragraph wrapping the <a> link.
- Verify there are no typos in .contact .phone a. The space between .contact and .phone matters.
Why isn't my phone link styled as a button?
Style the services section with card layout
The services section is where potential students decide whether to enroll. Displaying the two training programs as side-by-side cards with clear pricing makes comparison easy.
- Add the services container and grid layout below your footer styles in style.css:
/* Services section with light background */
.services {
background-color: #f0f4f8;
padding: 60px 20px;
text-align: center;
}
.services h2 {
color: #1a3a6b;
font-size: 2rem;
margin-bottom: 40px;
}
/* Flexbox grid for side-by-side cards */
.services-grid {
display: flex;
justify-content: center;
gap: 30px;
max-width: 900px;
margin: 0 auto;
flex-wrap: wrap;
}What does this code do?
The services section gets a light gray background (#f0f4f8) to visually separate it from the white sections above and below.
The display: flex on the grid puts the two cards side by side. The flex-wrap: wrap ensures cards drop to a new row if the screen is too narrow.
- Save style.css and refresh your browser.
The services area now has a light gray background. The two training programs sit side by side, though they still lack card-like styling.
- Add the service card styles below your grid code in style.css:
/* Individual service cards */
.service-card {
background-color: #ffffff;
border-left: 5px solid #f5c518;
padding: 30px;
text-align: left;
flex: 1;
min-width: 280px;
max-width: 400px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.service-card h3 {
color: #1a3a6b;
font-size: 1.4rem;
margin-bottom: 10px;
}
.service-card .duration {
color: #777777;
font-size: 0.95rem;
margin-bottom: 5px;
}
.service-card .price {
color: #f5c518;
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 15px;
}
.service-card p:last-child {
color: #555555;
font-size: 1rem;
}What does this code do?
Each card gets a white background, a yellow left border accent (border-left: 5px solid #f5c518), and a subtle shadow that lifts them off the gray background.
The price gets the same bright yellow as the hero heading, making it the first thing the eye lands on. Card headings stay in brand blue for consistency.
- Save style.css and refresh your browser.
Before you look, predict what the service cards will look like with these styles applied.
You should see two white cards side by side, each with a bold yellow stripe on the left edge. The prices (R2,500 and R5,000) stand out in large yellow text. The cards have a soft shadow that makes them look elevated off the page.
Cards stacked vertically instead of side by side?
- Make sure your HTML has the services-grid class on the <div> wrapping both cards.
- Check that display: flex is on the .services-grid selector, not on .service-card.
- If your browser window is narrow, the flex-wrap rule may wrap them. Try making your browser wider.
Why are my flexbox cards not appearing side by side?
✔️ Awesome, I've got everything!
Great. Double check you have saved style.css and that all sections are styled in the browser.
ⓧ I'd like to double check the full code
Here is the full style.css up to this point. Scroll through and confirm each section matches what you have. Your file should contain these chunks in order:
- CSS reset (* selector) and body styles.
- Hero styles (.hero, .hero h1, .hero .tagline).
- About section styles (.about, .about h2, .about p).
- Contact section styles (.contact through .contact .phone a:hover).
- Footer styles (footer).
- Services section and grid (.services, .services h2, .services-grid).
- Service card styles (.service-card through .service-card p:last-child).
The site already looks like a real business page. Next up, you will make it work just as well on mobile phones where most potential students will find it.
Make It Mobile-Responsive
Your site looks professional on a desktop browser. But most potential students will view it on their phones.
Without responsive styling, the two-column service cards overflow on narrow screens and the text becomes too small to read. In this step, you'll add a CSS media query that adapts the layout for smaller devices.
In this step, get ready to:
- Confirm the viewport meta tag is already in place.
- Add a CSS media query that stacks the service cards and adjusts font sizes for mobile.
- Verify the site displays correctly on phone-sized screens using Chrome DevTools.
Check the current mobile layout
Before writing any responsive code, let's see what the site actually looks like on a phone right now.
- In Chrome (with your site open), press F12 to open DevTools.
- Click the device toggle icon in the top-left of the DevTools toolbar. It looks like a phone and tablet overlapping.
- In the device dropdown at the top of the viewport, select a phone size like iPhone SE or iPhone 12 Pro.
What do you think the two service cards look like at this narrow width?
You'll see the cards squeezed side by side or partially overflowing off screen. The hero heading is oversized for the small viewport, and the phone number button may stretch beyond the edges. This is exactly the problem we're about to fix.
What is a media query?
A media query is a CSS rule that only applies when the screen matches a certain condition. For example, @media (max-width: 768px) targets any screen narrower than 768 pixels.
Styles inside the media query override the desktop defaults, so you can stack columns, shrink fonts, and adjust spacing for phones without changing the desktop layout at all.
Your index.html already includes the viewport meta tag that makes responsive CSS work. You can confirm by opening index.html in VS Code and checking the <head> section.
- Look for this line inside the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">What does the viewport meta tag do?
Without this tag, mobile browsers render the page at a desktop width (usually 980px) and then zoom out to fit the screen. The viewport meta tag tells the browser to match the page width to the actual device width, so your media queries can kick in properly.
Add a media query for mobile screens
Now you'll add a media query that overrides specific styles when the screen is narrower than 768px. This threshold covers most phones and small tablets.
- In VS Code, open style.css and scroll to the very bottom of the file (below the footer styles).
- Add the following media query at the end of the file:
@media (max-width: 768px) {
/* Shrink the hero heading for small screens */
.hero h1 {
font-size: 1.8rem;
}
/* Reduce tagline size */
.hero .tagline {
font-size: 1rem;
}
/* Stack service cards in a single column */
.services-grid {
flex-direction: column;
align-items: center;
}
/* Let cards fill the full width */
.service-card {
max-width: 100%;
}
/* Shrink the phone button for mobile */
.contact .phone a {
font-size: 1.4rem;
padding: 12px 20px;
}
}What does this code do?
Everything inside @media (max-width: 768px) only applies when the browser window is 768px wide or narrower.
- The hero heading drops from 2.5rem to 1.8rem so it fits on one or two lines instead of overflowing.
- The flex-direction: column rule stacks the service cards vertically instead of side by side.
- The max-width: 100% on each card lets it stretch to fill the available space.
- The contact phone button gets smaller padding and font size so it doesn't overflow on narrow screens.
- Save style.css.
Not seeing any change?
Make sure your media query is placed after all other styles in style.css. If it appears before the desktop styles, the desktop rules override it.
Also confirm the opening { and closing } braces match. A missing brace can silently break all styles below it.
Help me debug my CSS media query.
✔️ Awesome, I've got everything!
Great. Make sure you've saved style.css before moving on.
ⓧ I'd like to double check the full code
Your style.css is over 30 lines now, so confirm these pieces are present in order:
- The CSS reset (* selector with margin, padding, box-sizing) at the top.
- Body styles, then .hero styles.
- The .about, .services, .service-card, and .contact sections in the middle.
- The footer styles.
- The @media (max-width: 768px) block at the very bottom, containing rules for .hero h1, .hero .tagline, .services-grid, .service-card, and .contact .phone a.
Your index.html is unchanged from the previous step.
Verify the responsive layout in DevTools
Time to see if your media query fixed the mobile layout. Do you think the service cards will stack vertically now?
- Return to Chrome with your site open in DevTools device mode (the phone/tablet toggle should still be active).
- Refresh the page by pressing Cmd+R (macOS) or Ctrl+R (Windows).
- Confirm the device preset is still set to a phone size (like iPhone SE).
The service cards now stack vertically in a single column. The hero heading fits comfortably, and the phone number button sits neatly within the screen edges. Nothing overflows.
- Try switching to a larger device like iPad Air to confirm the two-column card layout returns on wider screens.
- Click the device toggle icon again to exit device mode and confirm the desktop layout is unchanged.
Cards still side by side on mobile?
Check that your .services-grid rule inside the media query has flex-direction: column (not row). Also confirm the media query wraps all five rules inside a single @media (max-width: 768px) { ... } block.
If styles apply on desktop but not mobile, your media query might have a typo in the condition. Double check the spelling of max-width and the colon after it.
Help me fix my responsive layout.
Your site now adapts beautifully to any screen size. Next up, you'll deploy it live to the internet so anyone can visit it.
Deploy Live to Netlify
Your website looks professional locally, with the blue and yellow branding, responsive layout, and all content sections in place.
Right now, only you can see it. To share the site with potential students, you need to put it on the internet. Netlify lets you deploy a website by simply dragging a folder into your browser.
In this step, get ready to:
- Deploy your project folder to Netlify Drop.
- Get a live public URL ending in .netlify.app.
- Verify the full site is accessible to anyone on the internet.
Open Netlify Drop in your browser
Netlify Drop is a page where you can deploy a website just by dragging a folder into the browser. No terminal commands or Git setup required.
- Open a new tab in Chrome.
- Type the following URL into the address bar and press Enter:
- https://app.netlify.com/drop
- Make sure you are logged in to your Netlify account. If you see a login page, sign in with the account you already created.
You should see the Netlify Drop page with a large drop zone area where you can drag your project folder.
What is Netlify Drop?
Netlify Drop is a drag-and-drop deployment tool. You give it a folder containing your website files, and Netlify publishes them to a public URL on its global CDN. No command line, no Git, no build process.
On the free plan, each production deploy costs 15 credits out of your 300 monthly credits. That means you can redeploy up to 20 times per month for free.
Seeing a login page?
If you are not already logged in, sign in with the email and password you used when creating your Netlify account. After logging in, navigate back to https://app.netlify.com/drop.
Help me log in to Netlify
Drag your project folder into the drop zone
Now you need to find your project folder on your computer and drag it directly into the Netlify Drop zone in your browser.
- Open Finder (macOS) or File Explorer (Windows).
- Navigate to your Desktop.
- Find the be-tech-appliance folder.
- Drag the entire be-tech-appliance folder into the Netlify Drop zone area on the page.
Drag the folder, not individual files
Make sure you drag the be-tech-appliance folder itself, not the individual files inside it. Netlify needs the whole folder to correctly link your HTML and CSS together.
After dropping, Netlify starts deploying your site. You should see a progress indicator followed by a success message with your new site URL.
Deploy not starting?
Make sure you dropped the folder into the designated drop zone area, not just anywhere on the page. The drop zone is the large highlighted region that says something about dragging your folder.
Also confirm your folder contains both index.html and style.css. Netlify needs at least an index.html to deploy.
Help me deploy my folder to Netlify Drop
Verify your live site
Once the deploy completes, Netlify gives you a public URL ending in .netlify.app. This is your live website that anyone in the world can visit.
Before you click the link, what do you expect to see? Will it look the same as it does locally, or different?
- Click the preview URL that Netlify generated (it ends in .netlify.app).
The full website loads with the dark blue hero section, yellow business name, About section, both service cards with yellow borders, and the contact phone number. It looks identical to your local version because Netlify serves both your HTML and CSS files together.
- Scroll through the entire page to confirm all sections are present and styled correctly.
- Try the phone number link to confirm it triggers a call action on your device.
- Resize the browser window to confirm the responsive layout still works on the live site.
Site looks unstyled or broken?
If the site shows plain text with no styling, your style.css file may not have been included in the folder you dragged. Go back to your Desktop, open the be-tech-appliance folder, and confirm both index.html and style.css are inside it.
If both files are there, check that the link tag in your HTML says href="style.css" (not a different filename or path). Then re-drag the folder to Netlify Drop to redeploy.
My Netlify site looks unstyled even though I have both files
Your training program website is now live on the internet. Anyone with the URL can see what BE TECH APPLIANCE offers. Next up, you can take on a bonus challenge to make it even easier for students to get in touch.
Secret mission
Add a WhatsApp Contact Button
Your website has a phone number, but most potential students in South Africa prefer WhatsApp. Can you add a floating WhatsApp button that lets visitors message BE TECH APPLIANCE with a single tap?
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 Netlify's free tier, so your site costs nothing to keep live.
Resources you used:
- One Netlify site (free tier, hosted at your .netlify.app URL).
- Local project folder be-tech-appliance on your Desktop containing index.html and style.css.
Keep everything running
No action needed. Choose this if you want to keep sharing the live URL with potential students.
- Your site stays live for free on Netlify's free plan. With low traffic, your 300 monthly credits are more than enough.
- To make changes later, edit your local files and re-drag the be-tech-appliance folder to Netlify Drop.
- Your local files remain on your Desktop for future edits.
Pause - I'll come back to this later
Disable your Netlify site to take it offline while keeping the configuration saved. Your local files stay on your Desktop for when you return.
- Log in to your Netlify dashboard at app.netlify.com.
- Select your BE TECH APPLIANCE site.
- Go to Project configuration, then General, then scroll to Danger zone.
- Click Disable project. Your site goes offline but keeps its configuration so you can re-enable it later.
Delete - I don't want to use this again
Remove all project resources and start fresh. This permanently deletes your Netlify site and local files.
- Log in to your Netlify dashboard at app.netlify.com.
- Select your BE TECH APPLIANCE site.
- Go to Project configuration, then scroll to Danger zone.
- Follow the guided steps to delete your site.
- Delete your local project folder by opening a terminal and running the command below.
rm -rf ~/Desktop/be-tech-applianceOn Windows?
Use this command instead in PowerShell:
Remove-Item -Recurse -Force ~\Desktop\be-tech-applianceNice Work!
Nice Work!
You just built and deployed a professional training program website for BE TECH APPLIANCE. The site is live on the internet, ready for potential students to discover.
You learned how to:
- Built a complete multi-section business website using HTML and CSS with professional blue and yellow branding.
- Created a responsive layout using media queries that adapts from desktop to mobile screens so the site looks sharp on any device.
- Deployed a live website to Netlify with a public URL that anyone on the internet can visit and share.
- Secret Mission: Added a floating WhatsApp contact button so potential students can message the business directly with one tap.
Ready to quiz yourself?