Web Development

SKILLS YOU NEED TO MASTER:

This is the list of recommended skills you need to demonstrate in your website. If you are wishing to be assessed on your skills with web then you must show the complex procedures as well.

Task: Use the tutorials below and in the PowerPoint and present your work in a Google Doc to show what you have learnt.

Checklist Web Development

Tutorials:

HMTL5/CSS3 Cheat sheets: Level 1, Level 2, Level 3

JavaScript cheat sheets: Level 1, Level 2, Level 3

GETTING STARTED WITH WEB

If you have no experience or need a recap with web development this Lynda.com course will help you get started.

You will need to use your Hutt City library card to gain access to the Lynda.com courses.

HTML Essential Training

CSS Essential Training 1

CSS Essential Training 2

FRAMEWORKS TO HELP YOU WITH MAKING YOUR SITE RESPONSIVE

Selecting a Framework to help you make your website responsive

Bootstrap 3 Essential Training

Responsive Layout

SPECIFIC COMPLEX PROCEDURES FOR 3.4

You need to include 2 types of media and use 3-4 Complex Skills, e.g. this slideshow will demo:

Responsive Web Design
Responsive Images
Social Media integration
Interactive Jquery Slideshow / Modal
FTP Hosting / GitHub
PHP dynamic includes / Email Form

Web Development: Complex Procedures With Web LEVEL 3 NCEA

Setting up GitHub & Glitch

Level Up your CSS Animation

video1_1.mp4

Section 1: Build an animated hero header

In this section, you will build an animated hero header. You will learn about Animating the background, adding a scroll cue, simplifying keyframes and so on.

Hero header?
Animating the background
Introducing the titles
Adding a scroll cue
Simplifying keyframes
Waiting till the content is ready
Examples to download

video2_1.mp4

Section 2: Touch and hover animations

This section is about touch and hover animations. You will learn about Animating links, animating tooltips, Animating buttons here.

Introducing touch and hover animations
Animating links
Animating tooltips
Revealing content on hover
Animating buttons
Examples to download

video3_1.mp4

Section 3: Scroll and parallax animations

This section is about Scroll and parallax animations. You will learn about scroll animations, animating content on scroll, Parallax scrolling and lot more.