Websites

By the end of the video, you will be able to ...

• Describe, exemplify and implement HTML Code for: header, nav, main, footer, section

• Describe, exemplify and implement efficient inline, internal and external CSS using grouping and descendant selectors to ... create horizontal navigations bars.

Practical Activity: Hogwarts NavBar  |  Edinburgh Zoo (recap N5 Content)

By the end of the video, you will be able to ...

• Describe, exemplify and implement efficient inline, internal and externals CSS using grouping and descendant selectors to control appearance and positioning:

  • display (block, inline, none)

  • float (left, right)

  • clear (both)

  • sizes (height, width)

Practical Activity: Ice Cream Flavours

By the end of the video, you will be able to ...

• Describe, exemplify and implement efficient inline, internal and externals CSS using grouping and descendant selectors to control appearance and positioning:

  • margins

  • padding

Practical Activity: Ice Cream Flavours (Version 2)  |  House of Sound 

By the end of the video, you will be able to ...

• Describe, exemplify and implement coding of JavaScript functions related to mouse events ...

  • onmouseover

  • onmouseout

  • onclick

Practical Activity: Ice Cream Website

By the end of the video, you will be able to ...

• Describe, exemplify and implement form elements. 

• Describe, exemplify and implement form validation. 

• Read and explain code that make use of the above HTML. 

This video reviews the entire Higher Computing Science Website Design & Development Unit

Below are some practical projects that you can complete these incorporate the skills required for Higher Computing Science. 

• Hogwarts School of Witchcraft & Wizardry

HTML (NavBar); CSS (Position & Layout)

• House of Sound

HTML (NavBar & Form); CSS (Position, Layout, Margins & Padding)

• Scotlands Air Ambulance

HTML (NavBar & Form); CSS (Position, Layout, Margins & Padding)

• Fred Olsen Cruises

HTML (NavBar & Form); CSS (Position, Layout, Margin & Padding); JavaScript

• How to Train Your Dragon

HTML (NavBar); CSS (Position, Layout, Margin & Padding); JavaScript