Website Outcome

Overview and Teachers Notes

Course Length: Approximately 6-8 weeks.

AS92005- Develop a digital technologies outcome.

This course is the assessment phase of the Website Design Course and will asess students against the AS92005 Achievement Standard.

Please ensure students have completed the Website Learning unit before continuing.

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 AGAIN?

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.

Instructions

Develop A Website

The following website contains all the teaching and learning that you will need to complete the Assessment Task: "My Website" shown here.

Make a copy of the following document if your teacher has not given you one.

You will hand in the completed documented to be assessed against AS92004- Develop a digital technologies outcome for 5 credits.

Ensure you complete every section and check that your final website is hosted publicly on github.

Before beginning, please ensure you have completed Website Learning

Develop a Website 2026

Task#1 Decide what to make

You are going to make your own website about any topic that you like. It needs to be something you feel strongly about. And it needs to be appropriate. Talk over some ideas with a friend and with your teacher. Remember that the Website can't break any copyright or privacy laws and it should be appropriate for a general audience of all ages. You must also identify WHO this website is for.

Example Topics:

My Team- an information website about my school team containing pictures of some of our game, a team list and some of our scores from this season so far. This will be useful for anyone in the team, parents and friends who want to see our successes and some great pictures of our players in action. It could be used to promote our team and get more people interesting in joining it.

Recipes- A website with recipes for some of my favorite meals including ingredients lists and instructions and beautiful photos of the finished product. This could be used by anyone who likes to cook. Adults and children could use it to find nice looking meals and then would have all they need to be able to buy all the right ingredients and make the dish with clear instructions.

My Home- Maybe you moved to Christchurch from somewhere else and you'd like to make a website about where you came from. This site could be like a tourism showcase of your old home town/country and contain information and photographs that really show off how beautiful and amazing it is. This could be used by anyone who is interested in finding out more about my home country. It might help my friends to be be able to better appreciate our cultural differences.

etc.....

Task #2- Learn how to design

Watch these videos. Engage in conversation and think about these concepts. A good understanding of these concepts and how they affect the people and the enviroment around you will make you a better designer.

Design Principles

These topics are so important in design and this video gives us a lightning fast introduction with great examples.

Web Layouts 101

You'll never think of website design the same way after watching this. The "Website Architect" simplifies everything.

Your Design Process

Alexandruionascu, CC BY-SA 4.0, via Wikimedia Commons

Design Stages

Low Fidelity - is a simplified or basic representation of a design, concept, or system. It is commonly used in various fields, including product design, user experience (UX) design, software development, and prototyping. In the context of product or UX design, a Low Fidelity model typically involves creating rough sketches, wireframes, or basic mock-ups of a user interface or product concept.

High Fidelity/Mockup - is a detailed and polished representation of a design, concept, or system, often used in various fields such as design, user experience (UX) design, audio technology, virtual reality (VR), and more. A High Fidelity model is characterized by its attention to detail, realistic presentation, and a focus on accurately capturing the final look, feel, and functionality of the intended end product.

Prototype - is a preliminary or early version of a product, system, that is created to test and demonstrate key functionalities, and interactions. It serves as a tangible representation of an idea or concept and allows designers, developers, stakeholders, and users to interact with and evaluate the design's feasibility, usability, and overall effectiveness. You will not be making a prototype in this assignment.

Drawing Sheet Template A4 5mm dots.pdf

Task#3 Make some Sketches

Use your knowledge of web layouts and design principles to make a hand drawn wireframe of your design idea. The idea is to quickly prototype three layout options and find one that you think will work for your end users. You are then going to get feedback from your teacher or your classmates on which design or elements of a design are best.

Task#4 Create A High Fidelity Wireframe

Watch these videos to gain an insight into how to use Figma and how to create a simple color pallette.

Then Use Figma to make a High Fidelity Design for your Website

Add it to your document!

How to get a great color palette

Amazing video without going into too much depth. Gives some great advice, and shows simple methods, tips and tools.

https://mycolor.space/

Figma Tutorial

Long (but great!) tutorial for using Figma to create low and high fidelity mockups.

Task#5: Learn and set up an Agile process

Agile Project Management

Agile development is very common in software engineering and involves deliberate planning and testing in short "sprints" of development.

Your teacher will set up milestone dates for you and your class where you will all test each other's websites and provide simple feedback to help you refine your plan for the next sprint.

Watch the video here for a quick overview and lesson on the tools and techniques you'll need to use.

Task#6- Make A Plan In Trello

Use the above video to help you. (project management overview)

Make a new Trello Board with "To Do", "Doing" and "Done" lists and add at least 10 tasks to it now. Check it over with your teacher before continuing.

When your teacher is happy, add a screenshot to your document.

Task #7- Develop your Website

At the end of each sprint you will TEST your Website for how it looks and how it functions.

Get feedback from at LEAST 3 PEOPLE and write it down. Use this feedback to help you REPLAN and refine your website as you go.

Main Sprint Goals:

Sprint#1- Basic Layout of at least one page. Might have "lorem ipsum" placeholder text and placeholder or repeated images but will have correct layout to help testers see what it "might" end up looking like
Sprit#2- Refinement. Start adding the content and images and have at least one page able to look approximately like the final design.
Sprint#3- Polish. Test and remove all typos, sort out allignment, margins, padding and layout issues and complete the entire site with consistent fonts/pallette. Make sure information and images are correct and run on more than one browser.

Task#8- Hand in Your Assignment

Congratulations you are done!

Your teacher will now assess this against AS92004- Develop a digital technologies outcome.

Make sure you have complete the entire document and that ALL LINKS are public.

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