Web Developer Jr - Newbie Course

(1)

Web Developer Jr - Newbie Course

Session Course Outline Remarks

1  Introduction to web concepts & view samples of good websites.

 Understand the characteristics of good website

 Understand the importance of good design & usability

 Understand what are programming languages and the different types available

 What is HTML and history of WWW

 Show & explain sample web design sketches used for pre-planning and some of the common website structures / layouts

 Research & brainstorm the structure, design & layout of the website and sketch your web pages Online Quiz #1

Exercise #1 – Sketching a simple website design & layout

Pupils will learn to understand what are HTML and the history of website. They will also pre-plan & sketch their proposed website with one homepage & at least 3 other pages

2 Web Design Tools

 Overview of popular WYSIWYG Web Tools & their features

 The importance of learning manual coding Introduction to HTML

 View the HTML codes of our favorite websites

 Understanding the basic structure of HTML

 About the Container and Tags.

 Understand concept of nesting / nested tags

 Understand the importance of indenting your codes to make them readable

My First Web Page

 Using text editor to create the webpage.

 Applying text formatting.

 Adding paragraphs.

 Add in line breaks

 Add in horizontal rules

 Add ordered lists

 Add unordered lists Online Quiz #2

Pupils will understand various tools & approaches to web design. They will learn the HTML structure & the use of tags. They will understand the importance of readability in coding and create their first web page.

(2)

Exercise #2 – Creating your first web page 3

What is Attribute / inline styling?

 Understanding how different elements may have different attributes to style them

Making the web page more appealing

 Changing the background color

 Using a background image Making the text more appealing

 Changing the text color

 Bold and align the text

 Change the font style and size Hyperlink

 Inserting page links

 Inserting external links

 Launching links in new window/tab Online Quiz #3

Exercise #3 – Styling background & text and adding links

Pupils will learn to style their page & text and the different ways to add links

4 Adding Images

 Understand the various image formats

 Using the IMG tag and its various attributes

 Making images into hyperlinks

 Using button images as hyperlink buttons Present data in a table

 Using the TABLE tag and its various attributes

 Understanding how to merge cells

 Using nested tables Creating a thumbnail gallery

 Placing thumbnail images in a table

 Linking thumbnail images to the full size images Online Quiz #4

Exercise #4 – Adding images, data table & thumbnail gallery

Pupils will learn how to add images, how to create tables & customize them, and how to make a thumbnail gallery using images within a table.

(3)

5 Adding Feedback Forms

 Understand the use of forms on websites

 Understand the various form elements to capture user input

 Creating a form

 Adding text input

 Adding radio buttons & checkboxes

 Understanding how radio buttons & checkboxes are grouped using Names

 Adding dropdown menus

 Adding text areas

 Adding Submit & Reset buttons Online Quiz #5

Exercise #5 – Adding feedback forms

Pupils will learn how to add feedback forms with all the various form elements

6 _{Quick revision of past lessons on HTML} Online Quiz #6

Exercise #6: HTML Website Project

 Create a HTML website based on a given design & layout Pupils to reinforce their HTML knowledge by completing a simple HTML website 7 What is CSS?

 Overview of Cascading Style Sheets

 Understand the basic CSS structure

 Compare CSS & HTML structures

 Understand inline CSS, internal CSS & external CSS Styling Texts

 Defining Color

 Defining Line Spacing

 Defining Font Weight and Font Style

 Defining Text Align and Text Indent Styling Hyperlinks

 Defining Default Link Style

 Defining Hover Style

 Defining Visited Style Styling Lists

 Defining Different Bullet Shapes

Pupils to learn CSS to style the various elements in their web page

(4)

 Defining an Image as Bullets Styling Images & Tables

 Defining Padding

 Defining Border

 Defining Margin

 Defining Width and Height More Table Styling

 Defining Background Color

 Defining Background Images

 Defining horizontal & vertical alignment Online Quiz #7

Exercise #7 – Applying basic CSS styles on existing HTML website

8 Advanced CSS

 Add same types of elements in the same page

 Understand how inline styling overrides CSS & how CSS styles override one another within the CSS document based on its sequential order

 Use Classes & IDs to differentiate styles for the same types of elements

Online Quiz #8

Exercise #8: HTML & CSS Website Project

 Create a HTML & CSS website based on a given design & layout

Pupils to learn advanced CSS using classes & IDs and create a new website with HTML & CSS

9

Final Project: Part 1

 Research & brainstorm the structure, design & layout of the website and sketch your final website project

 Begin coding with HTML & CSS

Pupils will start working on their final website project 10

Final Project: Part 2

 Continue working on their project with trainer consultation

 Upload HTML & CSS files to a free web host (such as Google Drive)

Pupils will continue working on their final website project and upload to free web host

(5)

11 Testing & Getting Feedback

 Test website access via different browsers (and even their mobile devices, if available)

 Share & discuss how & why certain features may look different

 Share the web link with peers to gather feedback & suggestions

Enhancing & documenting

 Enhance / Debug website

 Explain the importance of documenting in web development and document how enhancements / debugging are resolved based on feedback & suggestions

Pupils will test their websites on various browsers &

platforms and Gather peer reviews. They will then embark on enhancements & document them.

12

Project presentation, review and online survey

 Selected projects to be presented to the class with sharing of the development process & challenges faced

 Online survey & reflections on their views of the completed course

Pupils will present their completed website and share how they conceived their ideas & designs and some of the challenges they faced. Fun factor (Highlight the elements of fun that will be injected in the

Course to excite the students about this particular field):

- Exercises for each session will result in end-products that will be exciting to students - CSS will be used to create colorful styles and hover effects

- Online quizzes at the end of most sessions provide excitement for students to race to finish fastest & get the highest scores

- An online platform to provide immediate feedback to the trainer, to ask questions to the trainer & peers or to share their progress on their exercises or projects