WEB DEVELOPMENT COURSE OUTLINE

COURSE OBJECTIVE:

This course provides a foundation of front-end development. The first part covers environment setting,
HTML and CSS Basics The second part covers client-side programming in JavaScript. The class focuses on
helping students develop fundamental web programming skills. Students will reinforce their
understanding of concepts and coding skills in hands-on exercises and projects.

COURSE TITLE: WEB DEVELOPMENT WITH HTML, CSS AND JAVASCRIPT.

COURSE INSTRUCTOR: SALMAN SAMNANI AND ALIYAR

TEXTBOOK: HTML AND CSS DESIGN AND BUILD WEBSITE BY JON DUCKETT.

COURSE DURATION: 08 WEEKS (32 HOURS).

PREREQUISITE:

 Technical Skill: Must have the fluent operating skill of Computer

 Must have the skill to use internet
 A little or basic knowledge on Web Design and Development would be fine but not necessary

COURSE REQUIREMENT:

 A personal computer is required.

TOOLS:
 Sublime Text
 Google Chorme, Mozrilla or any other web browser
 Github
 VSCode
 BootStrap

COURSE CONTENT:

WEEK 01:
 Introduction
 The Structure Of A Webpage
 what is HTML
 Global Structure of HTML Document
 headings and paragraphs
 creating list
 creating links
 Semantic HTML: <header>, <footer> and <section>
 Sectioning content with <article>, <nav> and <aside>
 Grouping content with <main> and <div>
 Understanding File Paths
 Adding Images to page
 Captioning Images
 Creating Breaks in Content
 Linking to Sections of a Web Page
 Root-relative Paths
 Link to Email
 HTML Entities and Reserved Characters
 Adding Developer Notes with HTML Comments
 EXCERSICE

WEEK 02:
 REVISION
 The Form Element
 The Input Element
 The Textarea Element
 The Button Element
 The Label Element
 Fieldsets and Legends
 Select Menus
 Radio Buttons
 Checkboxes
 Create a Basic Table
 The Table Header Cell Element
 The Table Head and Body Elements
 The Table Foot Element
 The Caption Element
 More Table Tips
 EXCERSICE

WEEK 03:
 REVISION
 CSS Basics, Colors and Inline Styles
 Internal Style Sheets and Basic Formatting
 External Stylesheets
 Common Properties
 Selectors
 Classes IDs Divs Spans
 Colors
 Floating
 Positioning
 Margins
 Padding
 Borders
 EXCERSICE

WEEK 04:
 REVISION
 Fonts
 Styling Text
 Aligning
 Styling Links
 Icons
 Opacity
 Navigation bar
 Forms
 Flexbox
 Website Layout
 EXCERSICE

WEEK 05:
 REVISION
 JAVASCRIPT:
 Introduction to javascript
 What Is Javascript?
 Internal Javascript
 Accessing Elements
 Responding To A Click
 Changing Website Content
 Manipulating Styles With Javascript
 Mini Challenge - Disappearing Circles

 Hello World in javascript
 use strict
 EXCERSICE

WEEK06:
 REVISION
 variables
 datatype
 type conversion
 operators
 comparisons
 interaction alert, prompt and confirm
 conditional operators : if, ?
 Logical Operators
 EXCERSICE

WEEK 07:
 REVISION
 Arrays
 Loops: While and For
 The “switch” statement
 functions
 functions Expression
 Arrow function Basics
 External Javascript
 EXCERSICE

WEEK 08:
 REVISION
 Explore Bootstrap Elements
 Downloading Bootstrap
 Downloading a Bootstrap Example
 Reviewing the Example Code
 Replacing Page Content
 Customizing the Design
 Additional Resources
 EXCERSICE

references:
1.https://javascript.info/
2.https://developer.mozilla.org/en-
US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
3.https://www.w3schools.com/js/js_operators.asp
4.https://www.w3schools.com/css/default.asp
5.https://www.w3schools.com/html/default.asp
6.https://www.udemy.com/course/the-complete-web-developer-course-2/
7.http://www.primeit.org/wp-content/uploads/2013/12/Final-Basic-Web-Development.pdf
8.https://teamtreehouse.com/tracks/web-design
9.https://learningforlife.fsu.edu/introduction-to-web-design-course-outline/