Basic Website Skills

Overview and Teachers Notes

Course Length: Approximately 5 weeks.

This is ONLY the required learning for the Website Project course. The suggested learning is by no means comprehensive and you should feel free to replace or add additional resources as part of your teaching and learning program. Students who have a good knowledge of HTML and CSS may run through this quickly.

Please ensure that you provide checkpoint opportunities in your LMS and formative assessment throughout this learning. Task 4 is a document and task 5 is a link to a github repo containing a complete website.

Grok Learning has a complete Teacher Dashboard to set up. Once set-up, it'll allow you to monitor your students progress and intervene where required. It is highly recommended you use this approach to teach the foundational knowledge of HTML and CSS.

Software requirements:

Any Web Browser (eg Chrome, Edge, Firefox or Safari)

Visual Studio Code: https://code.visualstudio.com/

Git: https://git-scm.com/downloads

Suggested Timetable:

3 weeks to gain foundational knowledge in the "Understand" section

3 weeks on the Apply completing the scaffolded project. Students who have not done the Design will have 2 weeks extra to complete the Rapid Web Design unit. Adjust the timing to accomodate this if required

4 weeks to complete the "Do" assessment with minimal help from you, the teacher.

WHAT IS WEBSITE DEVELOPMENT?

What is Website Development?

Front End Web Developers create the pages that people see when they browse the web. From your Netflix and Youtube to the page you are looking at right now, all are made with HTML and CSS.

In this NCEA Level 1 Module you'll becoming a front-end developer by learning HTML and CSS and developing a website from a design. You'll also be using github to keep track of your code, as you develop, test and enhance your website.

UNDERSTAND HTML & CSS

Task 1a | Complete one of the Grok Learning HTML & CSS Tutorials

Choose the best fit for your level.

Grok Academy Learning

HTML/CSS Starter

Great beginner tutorial series with quizzes, challenges and explanations all the way through

HTML/CSS Beginner 1

A bit more advanced and shorter. Great follow on to the beginner course.

HTML/CSS Beginner 2

And a third course for even more information and practice.

Or

Task 1b | Complete the Khan Academy HTML & CSS Tutorials

This is the absolute best tutorial for learning HTML and CSS.

It contains short videos, written instruction, and interactive enviroment to write code to complete challenges and quizzes to test your knowledge as you go.

It is highly recommended that you complete:

If you have time, feel free to keep going! there is a tonne more content including an excellent section on layouts.

Task 2 | Checkpoint - I know the basics of HTML & CSS

W3 Schools

While there is a great written tutorial on both HTML and CSS on W3 Schools, it remains one of the best places to go for help on anything to do with HTML and CSS.

Familiarize yourself with this site. You'll be using a lot when you start making your own websites.

Can you find example code for a navbar? Can you see how you might use Grid? Have a good look through and move on to the next task.

Task 3 | Test your knowledge

HTML 5 Quiz

Test Your knowledge to be sure you are ready to move on!

CSS Quiz

Think you know enough now?

Task 4 | Learning Checklist

Learned enough?

Make sure you've gained all the foundational knowedge that you'll need to progress.

Click on the document to the right and make a copy of the Google Doc in your own Drive.

Submit this document to your teacher for the first checkpoint

WebDev Learning CheckList

Task 5: Make a Website with me!

Make a website with me!

This is a complete video tutorial to make a cool basic website from start to finish.

We'll cover:

Setting up your project in VSCode
Setting up and using version control on github
Linking and writing CSS to your HTML pages
Coding common layout sections (eg Hero Section)
Publishing and viewing it LIVE with github pages.

Submit the link to your completed website to your teacher now

Congratulations. Your ready for the assessment.

Extension and Extras

Grid Layout Explanation

Try it out in your own project

Using an IDE

VSCode is a lightweight cross platform tool to write HTML and CSS. Take a look at how it can help you be more productive at this link.

Using Github with VSCode

This takes practics and you will probably mess up a few times but it's worth it. Become a real developer and join the other 100 Million developer who rely on this to keep their code safe.

Making Wireframes

Layouts 101

Figma Tutorial for beginners

Page updated

Google Sites

Report abuse