Website Design

Whaowhia te kete mātauranga

Fill the basket of knowledge.

Web design is the process of planning, conceptualizing, and arranging content online. Today, designing a website goes beyond aesthetics to include the website’s overall functionality. Web design also includes web apps, mobile apps, and user interface design. 

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimisation.  

Learn the fundamentals of HTML & CSS

Learn HTML & CSS Basics

First you are going to work through a tutorial provided by Khan Academy. Khan Academy Unit: Intro to HTML/CSS: Making webpages will teach you the basics of Website Design. 

Make sure you sign up using your google account to save your progress. 

You should aim to complete the:

NOW "Create" your own website

You are going to create a Website Portfolio from an existing template. (Don't worry, we wouldn't ask you to write it from scratch at this stage!) 

This Website will be YOUR showcase of all of the units of work that you do this year. It'll be a place to show off all your images, games, animations, programs and everything else you do throughout the year.

And the best thing is, it's live! So the link can be shared with your parents or friends and they can all see how cool DTG is!

Repl.it Teams

You will be given a link to your new repl.it team by your teacher. Follow their instructions closely and make sure you can access your new Team and the "Digi Portfolio" Project. Ask if you need help- this is important.

Look Through the Digi Portfolio Project

Take a look through the Digi Portfolio Project in your new repl.it Team. Play around with it and see if you can understand how it works. It contains HTML (the content of each of the pages) and the CSS (the styling- how it looks). Do you think you understand a little about how it works? Do you think you could change some of the content to work for you?

Try changing the "Name- Bob Johnston" to your own name now on all the pages.

As you can see this template has a basic structure and placeholder content. You need to use the skills you have to edit/change/customise. 

There are 2 parts:

Part 1 | To make your website aesthetically pleasing. 

To start with it might just be changing fonts / colours. If you are more saavy it might be the layout and background. The look of the website should reflect you!

Part 2 | To document your DT journey. 

At the end of our 8 topics (not including your own project) we should see an awesome website that highlights everything you've learnt & created.

To help with this at the end of each topic follow this work flow:

See below for file types and how to get the right formats to use.

EXTRAS

If you have added a header banner, changed colours, changed page titles, changed fonts etc you might like to:

And if you are loving HTML & CSS you could go further and integrate Javascript, to have a gallery slideshow.

More Resources

W3 schools is a great reference for finding lots of the functions in HTML and CSS. Use it as a reference if you want to do something special!

HTML

CSS

File Formats for website

Images

In your working file Export (for web) as a JPG or PNG 

use PNG if you have a transparent background

Videos

EXPORTING FROM PREMIERE PRO

OR UPLOAD TO YOUTUBE FIRST

Instead

Games

Student Examples