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:
Intro to HTML
Intro to CSS
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!
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:
Jump into your repl.it file and add your media content to showcase what you have made or learnt. Most of the work you have done should already be in a suitable format.
See below for file types and how to get the right formats to use.
Write up your reflection. This should be a paragraph or two explaining what you learnt, what worked well, what didn't etc.
EXTRAS
If you have added a header banner, changed colours, changed page titles, changed fonts etc you might like to:
add a Favicon & Title for your tab
add an About Me page
add a Footer
use flexboxes
use grid layout
have responsive design
have mobile first design
And if you are loving HTML & CSS you could go further and integrate Javascript, to have a gallery slideshow.
More Resources
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
Drag your images from your computer into repl.it into the images folder
Change the link from "images/placeholder.png" to the file name of your image i.e images/catflower.jpg
Modify the alt tag to a brief description of image
Modify the <h5>What is this?</h5> to your own description
Videos
EXPORTING FROM PREMIERE PRO
In Premier Pro Export -> Media
Then use these settings
H.246
Youtube 1080 - frame rate 23.976
OR UPLOAD TO YOUTUBE FIRST
Upload your video to Youtube
Click the share button under your video and copy the embed code onto your website
Instead
If you export your video as a MP4, WebM, or Ogg you can directly import your video into your website
Games
Upload your game to itch.io (Full instructions on the Game Design page)
Embeding your game - https://itch.io/updates/introducing-game-embeds