Course Outline

Level 1 - Foundation

Introduction to the WWWW

• What is the Internet and the Web
• Definition of URL, Domain
• History and types of modern browsers
• How browsers work

Introduction to Web Development Console

• Inspect Elements on any web page
• How to debug and correct your codes
• How to tweak your html/css live on your browser

Preparing your Website

• What is a domain, TLD, subdomain and domain hack
• How to get your own domain name
• What is a web host
• What are some web hosting services you can buy

Web Performance and Analytics

• What is a bandwidth and bandwidth limit?
• How to speed up your website performance?
• How to host multimedia
• Web analytics and how to get data
• Introduction to cPanel
• How to use a FTP Client and some common examples

Introduction to coding

• What are the differences between programming languages, frameworks and web apps
• Examples of common web frameworks like jQuery, Joomla, Wordpress
• What is the client-side and server-side for a web app

Introduction to Dreamweaver

• Examples of Text Editors
• Dreamweaver Panels and views
• Dreamweaver Properties Panels
• Dreamweaver preview in Browser

Basic HTML

• What is HTML
• A basic page structure
• Defining the document type, title and meta for a web page
• How to insert html comments

HTML - Text tags

• Paragraphs and headings
• Quotations, abbreviations, codes
• Inline text

HTML - Text formatting

• Bold
• Italic
• Horizontal line
• Break and new lines

HTML - Images

• How to insert images
• What are the common types of image formats
• Image attributes like height, width, title

HTML - Linking other web pages

• How to add hyperlinks
• How to link to another website, your own project or images
• How to link within the same web page

HTML - Other Information displays

• Unordered and Ordered Lists (bulleted and numbered items)
• Tables with merged rows and columns
• Forms with input text, radio buttons, checkboxes, options and submit buttons

HTML - Insert files and media

• Video in your web page
• Link to a stylesheet or javascript

CSS - Styling Text

• Font: family, size, weight, style, variant
• Alignment as left, ceter or justify
• Typography with word-spacing, letter-spacing, line-height

CSS - Styling your website

• Hyperlinks with pseudo elements
• Background color, images and position
• Image and text border width, style and color
• Styling web forms

CSS - Tags, ID, class

• What are the differences among tags, id and class
• When to use each of them
• How to write html and css for tags/id and class

CSS - Page Layout

• Using div boxes to make a page structure
• Div properties like margin, padding, border and width
• Concept of CSS Box Model and calculations
• Absolute, Relative and Fixed position of the dov boxes

Consolidation

• Your first web page
• Agile Web Application development from sketch, code to design
• Using FTP Client to upload your web page in the Internet!

Course Outline

Level 2 - Advanced

Introduction to the WWWW

• What are hardware, operating system, applications and user?
• Role of browsers, uses, types and history
• What are the differences between programming languages, frameworks and web apps
• How browsers work

Introduction to Web Development Console

• Inspect Elements on any web page
• How to debug and correct your codes
• How to tweak your html/css live on your browser
• Common browser add-ons and extensions for web development

Web Performance and Analytics

• How to speed up your website performance?
• Web analytics and how to get data
• Why is web analytics important?

Introduction to HTML5 and CSS3

• First simplest page in html5 and its doctype
• How to recognise a page in html5
• What are the differences between html4 and html5
• What are the difference between css3 and earlier
• Good coding principles and Agile Aoftware Development

Browser Compatibility

• Cross-Browser applications
• Properties supported in various browsers
• Using a difference stylesheet for different browsers
• javascript libraries for detecting modern properties
• vendor prefixes for different browsers e.g. IE, Safari, Firefox and Chrome

HTML5 Introduction

• New doctype for html5
• Additional sematic tags and associated css
• New video and audio tags in html5

HTML5 Web Fonts

• How to use externally hosted creative web fonts
• How to use your own web fonts
• What are the different web font formats
• using @font-face in CSS3 to embed any web fonts

CSS3 decorative elements

• Rounded rectangles and creating shapes in CSS3
• Insert box and text shadows for various photoshop-like effects
• Why create shapes in CSS3 and their benefits
• Create gradients in CSS3
• Create a reflection only any image

CSS3 Movements: Transition, Transformation, Animation

• Transformation of shapes with translate, rotate, skew and scale
• Transition of element with hover effects
• Control timing, timing function, delay, repeatition of your transition effects
• Create keyframes for a full-blown animation using only CSS3

CSS3 Intro to Responsive Web Design

• How can you code for only one website, and optimise viewing in all devices?
• CSS3 Media Queries and options to view in all devices
• What is a mobile content strategy

HTML5 Form validation

• Newer types of inputs like url, email, number, etc
• Required form inputs
• Form validation on the client side

Inserting Javascript in your project

• What are some common javascript libraries e.g. jQuery, Prototype, Dojo, etc
• How to search for javascript plugins
• How to structure your html elements
• Embed javascript codes in your html or an external file
• Use javascript options for your plugins

Consolidation

• Html5 and CSS3 generators and document libraries for references
• Where to ask for help in the Web
• Common web developer and designer communities to join and keep learning
• Common websites to look for inspiration to keep learning!