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.
Codecademy Course – How to make a website
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:
https://www.codecademy.com/learn/learn-responsive-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 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.
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:
https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch/