Skip to main content

Web Development — What This Unit Is About

Welcome to the web development unit. This page explains what you are going to make, what you will learn, and how the notes in this folder fit together.

Read this one first. It is short.

Key words​

WordWhat it means
HTMLThe language that says what things are on a page — a heading, a paragraph, a button.
CSSThe language that says what things look like — colours, sizes, layout.
JavaScriptThe language that makes a page react — a click does something, a box appears.
LayoutHow the boxes on a page are arranged.
ResponsiveThe page works on a phone and a laptop, without breaking.
FlaskA Python tool that builds web pages on a server and sends them to the browser.

What you are going to build​

A working website. Later in the year it will be powered by Flask (Python) so it can store and show real data.

Right now, you are building the part people actually see and use: the pages, the layout, the styling, the forms.

The one rule that shapes everything​

There is no build step.

That sentence means: you write HTML and CSS files, and the browser reads them. That's it. There is nothing to install, nothing to compile, no npm, no waiting. You save the file, you refresh the browser, you see the change.

This is a good thing. It means:

  • Fewer things can go wrong.
  • You can see what your code does immediately.
  • Everything you learn is real CSS, not a tool's version of CSS.

Modern CSS is powerful on its own. You do not need extra tools to do good work.

What order we do things in, and why​

We do layout first. Layout is the skeleton — where the boxes sit on the page. Once you can control layout, everything else is easier.

Here is the important bit: you will not build a page and then "make it responsive" afterwards. That is the old way of doing it, and it causes pain. Instead, you build the layout so it already adapts to different screen sizes. Then, later, you add a few deliberate changes for small screens.

You also learn each layout tool by building something real with it. You will not learn Flexbox from a list of properties — you will learn it by building a navigation bar. That is the lesson.

The notes in this folder​

#NoteThe question it answers
01HTML FoundationsWhat is the structure everything sits on?
02Flexbox LayoutHow do I arrange things in one direction?
03CSS Grid LayoutHow do I arrange a whole page in rows and columns?
04Responsive and Fluid DesignHow do I make it work on a phone?
05Forms and TablesHow do I get data in and out of the page?
06CSS FrameworksShould we use someone else's CSS, or write our own?
07JavaScript RefreshHow much JavaScript do I actually need?
08What You're Being Marked OnHow does this turn into an NCEA grade?

Work through them in order. Each one builds on the one before.

Roughly how the lessons go​

This is a guide, not a rule. We may go faster or slower.

  • Lesson 1 — Note 01. HTML structure and the box model. Short lesson, sets up the vocabulary.
  • Lesson 2 — Note 02. Flexbox. Build a real navigation bar. Start with Flexbox Froggy.
  • Lesson 3 — Note 03. Grid. Build a gallery of cards. Start with Grid Garden.
  • Lesson 4 — Note 04. Take one of your layouts and make it survive a phone screen.
  • Lesson 5 — Note 05. Forms and tables, styled properly.
  • Lesson 6 — Note 06. Decide as a class how we're handling CSS, with reasons.
  • Ongoing — Note 07. JavaScript, whenever the project needs it.

Check yourself​

Before moving on to Note 01, you should be able to say:

  • I know what HTML, CSS and JavaScript each do.
  • I know we are building a real website, not just exercises.
  • I know there is no build step — save the file, refresh the browser.
  • I know layout comes first, and responsive design is built in from the start.

Sites worth bookmarking now​

These are the ones to trust. If you Google a CSS problem and land on a random blog, check the answer against one of these.