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 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 Exercise #1 Sketching a simple website design & layout 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 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. Online Quiz #2
3 Exercise #2 Creating your first web page 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 learn to style their page & text and the different ways to add links Exercise #3 Styling background & text and adding 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 learn how to add images, how to create tables & customize them, and how to make a thumbnail gallery using images within a table. 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
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 learn how to add feedback forms with all the various form elements 6 7 Online Quiz #5 Exercise #5 Adding feedback forms 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 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 Pupils to reinforce their HTML knowledge by completing a simple HTML website Pupils to learn CSS to style the various elements in their web page Styling Lists Defining Different Bullet Shapes
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 Pupils to learn advanced CSS using classes & IDs and create a new website with HTML & CSS 9 10 Online Quiz #8 Exercise #8: HTML & CSS Website Project Create a HTML & CSS website based on a given design & layout Final Project: Part 1 Research & brainstorm the structure, design & layout of the website and sketch your final website project Begin coding with HTML & CSS 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) start working on their final website project continue working on their final website project and upload to free web host
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 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 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