Introduction to 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

HTML/CSS Express on Grok Learning

This course is a really quick intro to HTML and CSS. All done in your Browser.

Course Link: https://groklearning.com/course/intro-html-css-starter/

Or

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

If you are fast keep going through the course there are lots of useful tools you can use!

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 DT is!

You will need Visual Studio Code and Github Account.

Follow the tutorial below for a full step by step to get your website up and hosted.

Year 10 Website Tutorial

Download THIS FILE first.

Follow along with this short tutorial to get your website up and running.

You'll learn about using VSCode to manage your Version Control and how to get Github to host your website once your code is up there.

Once you have made a start, you'll be able to use your immense HTML and CSS Knowledge to customise the base to code to show off all of your cool work in 10DGT all year.

Applying

Customising, adding content and make your website aesthetically pleasing.

Step 2 - Look Through the Website

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.

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?

The Home page and the Reflection page are slightly different to the rest. This may help you see some difference.

Note: if you want to try some things but don't want to mess with the template you can make a new 'Test' html page. Same goes for the css i.e test.css. You will just need to link these two pages together on line 7 of your HTML.

~ Start by customising ~

Put your own Welcome message
Replace the placeholder header with the one you made
Add your name to the footer

~ Add content to the About Me Page ~

Replace the placeholder images with some images that relate to you
In the About Me introduce who you are and your interests

~ Add content to the Image Creation Page ~

Replace the placeholder images with the images you created on gimp & inkscape.
Write your evaluation of the topic

~ Make it Aesthetically Pleasing ~

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

WHAT YOU NEED TO CONSIDER

Simplicity is the best way to go when considering the user experience and the usability of your website.

Below are some ways to achieve simplicity through design.

Colour

Colour has the power to communicate messages and evoke emotional responses.

Finding a colour palette that fits your personality will allow your style to shine.

Keep the colour selection limited to less than 5 colours. Complementary colours work very well.

Pleasing colour combinations increase engagement and make the user feel good.

https://coolors.co/

Type

Typography has an important role to play on your website.

It commands attention and works as the visual interpretation of your personality.

Typefaces should be legible and only use a maximum of 3 different fonts on the website.

* Imagery *

Imagery is every visual aspect used within communications. This includes still photography, illustration, video and all forms of graphics.

All imagery should be expressive and capture the spirit of you.

Most of the initial information we consume on websites is visual and as a first impression it is important that high-quality content is used giving an impression of professionalism and credibility to the viewer.

Part 3 | Documenting your DT journey.

At the end of the course 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 for your tab
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.

Updating Your Live Website

Any changes you make to your local copy (the one on your machine that you dowloaded and opened in VSCode) will not be reflected in the Live website (the one hosted on Github) until you Sync the changes.

The video above explains and demonstrates the process but remember.

Make Changes to your local code
Stage all changes
Commit the changes with a nice short commit message
Sync the changes up to Github
And wait- they are not always instant!

Remember to stay organised!

Basic Website Folder / File Structure

The following is a list of folders with the kinds of files that are in them:

Note: except for the Project (Root) Folder all files and folders should be (a) lower case, (b) have no spaces in the name, (c) start with a letter or number and not a special character.

Project (Root) Folder: This is the main folder for the project and contains ALL other files and folders. On the web it’s called the root folder. It's the folder you open in VSCode and contains all your other files and folders
HTML files: these are all of the files that end with .html. These should be directly in the Project/Root folder and not in any sub folders. Doing that makes it easy to see all of your files and makes all of the paths to resources (images, css files) the same. The only required file is index.html but your sites might have more .html files.
CSS Folder: all .css files go here. In this class we will not write css either in style elements on the web page or in attributes of elements. Instead all CSS will go in external stylesheets and those will be put in the css folder. You will need to have at least one stylesheet called either main.css or style.css (only have one of these not both). Other CSS files should have names referring to what they are styling.
Images Folder: all images go here (.jpg, .png, .gif, etc). You can name the folder images or img.
JavaScript Folder: all JavaScript files go here if they are required. They end in .js. You can name the folder javascript or js.

Page updated

Google Sites

Report abuse