Build and publish your first website
You plan, build, test and publish a multi-page personal site on the lab server with HTML, CSS and a little JavaScript.
Level 101 · 13 lessons · 12 practice labs
Lessons
Planning
- Site plan: pages and content
- Folder structure and file names
- A wireframe on paper
- Short task: empty page skeletons
Building
- The home page
- About and projects pages
- A shared stylesheet and colour scheme
- A contact form page
- Small interactions: menu and theme button
- Short task: fix the site at phone size
Publishing
- Checking links and validation
- Uploading the site to the server
- Capstone: a showcase site for a friend
Practice labs
- Tidy up a messy site folder: Move a site folder full of file names with spaces and capitals into a tidy structure and update the links.
- Plan a site for a neighbourhood bakery: Prepare a site plan showing pages, content and menu order, plus skeleton pages, for the Altın Başak bakery.
- Turn a wireframe into a page skeleton: Turn a given wireframe into a semantic HTML skeleton and place each section where the sketch puts it.
- Switch to a shared stylesheet: Move style blocks repeated on every page into one shared CSS file.
- Align portfolio cards neatly: Show the different-height project cards on a designer's portfolio page in an even, tidy grid.
- Tie the colour scheme to variables: Move the site's hard-coded colours into CSS variables and change the whole site's colour with a one-line edit.
- Make the mobile menu open and close: Hide the menu at phone width and make it open and close with a button.
- Fix a florist's contact form: Add the right field types, labels and required-field checks to a florist's contact form.
- Add a lightbox to a gallery: Add a lightbox to a photo gallery that closes with Escape, keeps focus inside and returns focus when closed.
- Find broken links and missing images: Find and fix broken internal links and missing images on a five-page site.
- Clear validator errors: Fix the errors the HTML validator reports on a page one by one until the report is clean.
- Upload the site and go live: Upload a finished site to the lab server, publish it with the right permissions and confirm it opens in phone view.
About this course
You plan, build, test and publish a multi-page personal site on the lab server with HTML, CSS and a little JavaScript.
What you will learn
- Planning
- Building
- Publishing
Prerequisites
No prior knowledge is needed; the course starts from zero.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at beginner level; every term is explained where it first appears.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.