My Web Dev Progress (Weeks 1–6)

This page shows what I actually practised in each module and how I applied it in my site. It’s intentionally simple: clean structure, readable text, and layouts that survive on a phone.

Module 1 — Introduction to the Web

I set up my editor (VS Code), a couple of browsers for testing, and connected to cPanel. I learned the basic anatomy of a page: <html>, <head>, <body>. I practised headings in order, paragraphs, links, images (with meaningful alt), and both ordered/unordered lists. I deployed a bare-bones page so I could iterate fast.

Mini example

<h2>Hello!</h2>
<p>This is a short paragraph with a <strong>highlighted</strong> word and a
<a href="index.html">link back to Home</a>.</p>
<img src="images/hero.jpg" alt="Abstract AI image">

Module 2 — Planning Your Website

I used Figma to sketch a low-fi wireframe and a simple sitemap. Defining a color palette and two type styles early helped keep pages consistent. I wrote short notes for each section so every block had a purpose.

Wireframe

Header → hero → content cards → footer, designed to collapse nicely on mobile.

Sitemap

Home, Web Development (this page), Terms, Contact, and an external WordPress link.

Style decisions

Dark theme, high contrast, limited fonts, comfortable line length (~65ch for paragraphs).

Module 3 — Styling & Publishing

Separated content and style: external css/styles.css with variables and a small grid.
Compressed images and used relative paths so deployment doesn’t break.
Checked contrast and focus outlines to keep it keyboard-friendly.

Two-column demo

Column A

Short content in a card with padding and a subtle border.

Column B

Stacks on small screens using a responsive grid.

Module 4 — Introduction to JavaScript

I kept JS light and safe: the active-nav highlight and a dynamic year in the footer. No keyboard traps, no hidden links. Progressive enhancement only.

<script>
  document.getElementById('year').textContent = new Date().getFullYear();
</script>

Module 5 — CMS (WordPress)

I installed WordPress in a separate subfolder (/wpol/) so it wouldn’t overwrite my HTML site. I created pages (Home, Contact, Terms) and built a clean nav. I learned how blocks, themes, and permalinks work, plus where to credit sources. Link to my WP is in the nav as “WordPress”.

Module 6 — Web Developer Professionalism

Wrote commit-style notes and kept a simple changelog.
Credited assets (images, icons, tutorials) directly in the page/footer.
Checked accessibility basics (contrast, headings, focus) before calling a page “done”.

Deployment notes

Uploaded files to public_html (home page is index.html).
Verified all links used relative paths (e.g., css/styles.css, images/hero.jpg).
Tested on laptop and phone; fixed any small layout shifts.

Validation screenshots

Place these PNGs in /images/ with these exact names: index-w3c-check.png, webdev1-w3c-check.png, terms-w3c-check.png, contact-w3c-check.png, css-w3c-check.png.

W3C HTML validator result for index.html — index.html — HTML validation

W3C HTML validator result for webdev1.html — webdev1.html — HTML validation

W3C HTML validator result for terms.html — terms.html — HTML validation

W3C HTML validator result for contact.html — contact.html — HTML validation

W3C CSS validator result for css/styles.css — styles.css — CSS validation

What I want to improve next

Clearer micro-copy for buttons and links.
Add my own image set and compress them for faster loading.
Organise long pages with sub-headings so it’s easier to scan.

References

MDN Web Docs. (2025). HTML elements and attributes.

W3C. (2025). Markup Validation Service.