CS202 : Fundamentals of Front End Development

I like this Course

Course Info

Course Category

Computer Science/Information Technology

Course Level


Credit Hours





Faisal Nisar

Course Contents

 Fundamentals of Front End Development

This course starts with describing front end development on web. Build foundations on Html, CSS and JavaScript, and cover advance topics based on current trends, of Html5, CSS3, Responsive Design and some of its frameworks like Bootstrap. Focus is to learn while solving different problems and doing many real life case studies.

Course Outcomes:

-          Enable Course attendant to gain Web Front End Development knowledge and experience with real life case studies

-          Understanding Web Development process

-          Able to develop Web site front end using HTML/5, CSS/3 and JavaScript.

-          Understanding of Advance topics, and current trends in Web Front end development.

- Topics are listed in desired order of delivery
- Some Case Studies are yet to be added

Course Topics:


History: Past and Present, URL, URL hierarchy, HTTP, HTTP request, HTTPS, Web Server, Web Services, Web Agents, Email, SMTP, POP3, IMAP, FTP, Domain, Hosting.

Fundamentals of HTML

Getting started with tags, How to save web pages, Viewing your web pages, Basic HTML template, Paragraph and Break tags, Bold and Italics, HTML lists, Hyperlinks, Linking to other pages, different types of links, labels, buttons, text boxes, passwords, text area, radio buttons, checkboxes, images, hidden fields, HTML Tables, Row and Col span, Table alignment, forms, Layers using div and span, Fluid layout, Publishing Tools.

          Case Study: Developing Layout with tables

Fundamentals of CSS

CSS rules, Where to put your styles, Using CSS selectors, Inline and Embedded styles, CSS and Fonts, Font colors, Font sizes, handling Images through CSS, Text wrapping with CSS, CSS and hyperlinks, External style sheets, HTML lists and navigation bars, The Box Model, CSS Comments, CSS Positioning, CSS floats, Page layouts (A one column CSS layout,  A two column CSS layout, styling layouts etc.), styling tables, Form Tags, Textboxes, Buttons, Formatting Textboxes, Labels, Text areas, Radio buttons Checkboxes with CSS.

Case Study: Developing Layout using Divs and CSS
Case Study: TBD
Case Study: Customization of existing template

Fundamentals of JavaScript

A First Script, JavaScript Tag Placement, The Browser Object Model, Browser Window Methods, The Document Object Model, JavaScript Variables and operators, Control structures, Loop structures, Arrays and functions, JavaScript and forms. Regular Expressions, Validation Function, Form submission after checking Validation rules, Event handling. Difference b/w Client Side and Server side Scripting.


          Case Study: JavaScript Game

          Case Study: Drag n Drop

          Case Study: Tabbed Form Implementation


AJAX as it starts

AJAX, Making server calls, Handling Call, Basic Server Side Script PHP, JSON, Pooling, Making a basic AJAX based Chat System.

          Case Study: Validations Using AJAX
          Case study: Implementing Auto Fill using AJAX



Syntax, Selectors, Events, JQuery Effects, JQuery Traversing, JQuery HTML/CSS, JQuery AJAX.


          Case Study: Validation Using JQuery


Data Representation:


XML Syntax, XML Elements, XML Attributes, XML Namespaces, XML Encoding, XPath, XSLT, JSON Syntax, JSON Http, JSON Files.

          Case Study:

          Case Study: TBD     


Understanding HTML5

Introduction, HTML5 Graphics, Canvas, HTML5 Drag n Drop, HTML5 Multimedia, SVG in HTML5, HTML5 in Mobiles.


Take a grip on CSS3

Browser Support for CSS3, Selectors, Pseudo Classes & Elements, Fonts and Text effects, Colors, Gradients, Background Images, Parallax, Border and Box Effects, Transitions and Animations, Layout, Embedding Media, Forms, Media Queries.

          Case Study: Implementing Parallax Design

Multimedia Handling

Image (Formats, Sizing, Cropping Techniques), Sound (Formats, Sizing, Cropping Techniques), Video (Formats, Encoding, Cropping Techniques)

Responsive Web Design

Media Queries Implementation, What is Framework, Bootstrap and other frameworks, Setting up Bootstrap, Why it’s Require, How to gain most of it, implementation using Bootstrap, Testing Responsive Layout.