Web Development Course Progression and Resources

Code Club Course

The Code Club HTML & CSS course introduces HTML & CSS with a series of basic short projects that can be completed in an hour or so.

Module 1 has 6 projects – Birthday card, Tell a story, Wanted poster, Recipe, Mystery Letter, Project showcase

Module 2 has 6 projects – Build a robot, Stickers, Sunrise, Linked rooms, Magazine, Pixel Art

Khan Academy Course

If you have used Khan Academy before and already have an account you can log in with the same account. If you are new to Khan Academy you should click Sign Up in top right hand corner and register a new account.

For those who are new to the Web Development you should start at the beginning of the course. If you already know some HTML and CSS, you could skip the intro sections or jump in wherever you like.

Course overview and get started

Codecademy Course – How to make a website

Course overview

There are 4 parts to this course:
1. Site Structure – Build structure with HTML by adding text, links, images and more.
2. A Closer Look at CSS – Learn how to style text and add background images with CSS.
3. Boundaries and space – Learn how CSS can manage boundaries and space on webpages.
4. Building with Bootstrap – Learn to create a webpage quickly using the Twitter Bootstrap library.

There is also a 5th part but it is not free. We show a free way to set up a website domain name and hosting in the Build Your Own Website section below.

Web page layout with HTML & CSS

Follow this tutorial to learn about different layout techniques. Create a Trinket project for this and try out and experiment with all the tutorial examples in Trinket. When you are finished, download your project files from Trinket and upload them to the show case page on your website. If you have time, you can use what you have learned to lay out your showcase page and/or other pages on your website.

Using what you have learned in the layout tutorial, try to create the following layout example:

Codecademy Responsive Web Design Tutorial

Responsive web design means making a website layout that can change to suit a small screen like mobile phone and a big screen like large computer screen. We use media queries to change the layout and styling for different screen sizes. Follow this tutorial to learn how to do responsive web design:

Learn flexbox layout

Flexbox layout is also covered in the Codecademy course, Boundaries and space section, but this ‘Flexbox Froggy’ is a fun way to learn or revise your knowledge of flexbox.

Learn flexbox layout with Flexbox Froggy

Learn JavaScript basics

Follow this video tutorial to learn some JavaScript. You can follow along and try out all the examples in Trinket.

Build a basic website with CSS and HTML

Build a basic 3 page website like the one in the following video. You can make the example website or modify it to make a website about a subject of your choice. You can use Trinket for writing your HTML and CSS. When you finish, upload your site to your hosting account.

Images for example website:

Build your own website

Have a think about what type of a website you would like to build (e.g. a place to put your web projects while you are learning, a hobby or something that interests you, or anything cool that you can think of). So before you start, come up with some ideas for a topic and a name for your website.

You will start setting up place for your website using free services for domain name registration and website hosting.

Follow these guidelines to get started

Then you will start designing and coding your website.

Follow these guidelines to start building your website

Learn WordPress

After you have built a website in HTML and CSS you can learn about WordPress content management system and you can convert yiour HTML/CSS website into a WordPress website. Refer to these instructions: