AN OVERVIEW OF

FUNDAMENTALS OF WEB DESIGN WITH

HTML, CSS AND JAVASCRIPT

©GEM Center for Human Capital Development www.gem4success.com

COURSE DESCRIPTION
This course takes you through the essentials of web design using HTML, CSS and JavaScript. In
reality, HTML and CSS are responsible for your website's presentation. JavaScript is used for client-
side programming (interactivity/ dynamism) that enhances the content delivered using HTML and
CSS.

CORE MODULES
1) HTML
The HTML is the basic building blog of any web application. In this class we will learn the basics of
HTML5. We'll start with how to set up your development environment, go over HTML5 basics like
valid document structure, which elements can be included inside other elements and which cannot,
discuss the meaning and usefulness of HTML5 semantic tags, and go over essential HTML5 tags.
2) CSS
CSS is useful for the design of a web page. They are used to determine the structure and format
(colour, text style, etc.) of the web page. A lot of people "tinker" with CSS. In this class, we'll take you
from the very basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict
resolution. We'll go over the 'box model', background property, etc. We'll finish off the module with
learning about Responsive Design using our own CSS code as well as start introducing Twitter
Bootstrap with its essential Grid System.
3) A Static Website
Ready for some REAL fun? This course is it! We'll go over some basics of interacting with a client
when managing a web site project and then go visit a real client at their place of business (a Chinese
restaurant), help the owner figure out what she wants in a site, and get acquainted with the
restaurant in general. We'll spend the rest of the course building a real web site for this business
from scratch and watch as the site comes together
4) JavaScript
What fun would a web site be if there was no functionality to it? In this course, we are going to
concentrate on learning the fundamentals of the JavaScript language. A lot of even seasoned
developers “tinker” with JavaScript without really understanding how the language works. That
leads to viewing the language as more of a nuisance instead of a powerful tool. That is why we are
going to concentrate not only on the “how” but also on the “why”, so you are empowered by the
JavaScript language features, not confused by them. We’ll cover just about everything - from
common language constructs and JavaScript types to objects, functions, arrays, closures, and scope
isolation.
5) A Dynamic Website with JavaScript
In this module, we are going to take all those newly learned JavaScript language skills and learn how
to utilize them within the context of a web page. We’ll start by learning how to properly manipulate
the web page components using the JavaScript Document Object Model API. We will then move on
to learning one of the most popular ways of serving up data to a web site - Ajax. We'll learn about
the protocol that the language of the web speaks in (HTTP), how to set up and handle Ajax requests
and responses, as well as how to process JSON data. We'll finish the module by connecting our
restaurant web site from Module 3 to a real backend service that will allow us to pull the data for
the restaurant menu dynamically from the server without having to reload the entire page.

©GEM Center for Human Capital Development www.gem4success.com

WHY YOU SHOULD LEARN HTML
1- HTML is Easy to Use and Understand:
Is it hard? that tiny question races in every mind. Well the answer is simple NO

2- HTML is Supportive:
Browsers support HTML. Certainly more browsers support HTML than any other web language. If
you want your website to be display all around the World then build a site with HTML cause mostly
browsers support HTML. The programmer takes care to optimize the website for the most
commonly used browsers. Optimizing a HTML based website for the browser compatibility is neither
difficult nor complex. That is the greatest advantage of learning HTML.

3- HTML and XML:

Extensible Markup Language, abbreviated as XML. XML is increasingly being used for data storage.
There is no difference between HTML and XML’s syntax, they both are pretty much similar. XML
means that it is easier and seamless working between the two platforms. This means you are
indirectly learning two things: HTML and XML

4- HTML is Search Engine Friendly:

With HTML creating SEO compliant websites is significantly easier than any other programming
language. Of all the web programming languages, HTML is the most search engine friendly. An HTML
website is easiest to read and access for search engine crawlers. HTML reduces crawling and
improves page load time also, helping your website perform better in search results.

WHY YOU SHOULD LEARN CSS

As you can see HTML helps us a lot. But with HTML you can only create structure of your web page,
to design it you need to learn an another language called “CSS” which is stands for “Cascading Style
Sheets” means to give style and design to your web-page. The following are some reasons why you
should learn CSS
1- Faster Websites
CSS makes HTML pages smaller in file size, thereby speeding page download times.

2- World Wide Web Consortium (W3C) Recommendation

CSS is one of the W3C’s core recommendations, so your CSS-styled site will comply with the current
standards. Moreover, most HTML formatting tags are being deprecated by older browsers and aren’t
even supported in XHTML code, so you have no good reason not to use CSS for most, if not all, of
your content styling and positioning needs.

3- Easy to Edit
CSS is infinitely editable, giving you the flexibility of changing the look of your pages as often as you
like without ever altering the content.
4- Easy to Control
CSS helps separate presentation (how the page looks) from content (what’s on the page) by moving
all the page-styling instructions into a centralized location. That location can either be in-line with
the code or internal in the head area of the Web page, or in an external CSS document to which all
the pages on a site are linked, the latter being the most useful method for working with CSS. The

©GEM Center for Human Capital Development www.gem4success.com

benefit of having an entire site’s style information contained in a single external CSS file is that doing
so allows for instant site-wide style updates.

5- Always Will be Trend

CSS styles your content semantically, which means that it requires fewer styles than the old HTML
formatting tags. For example, CSS allows designers to redefine the presentation of content
contained inside particular tags, such as automatically adding a particular color and font face to any
content marked up with H3 tags or applying the same background color and border attributes to any
tables on the site.

6- No Need for Extra Codes

CSS can be used to style the look of text, images, and objects as well as to position objects on a Web
page. This feature alone drastically reduces the amount of code required to display objects on a
page. For instance, objects contained in div tags can be absolutely positioned on a page with CSS.
Before, to place something in an exact spot on a page required code hacks involving the use of tables
with empty table cells and spacer gifs. All that extra code goes away with CSS.
Other code hacks involve the unorthodox and creative use of HTML, CSS, JavaScript, and other code
to manipulate objects on a Web page and/or work around existing limitations of the Web to achieve
a desired visual effect.

7- Easy to Update
CSS is a more affordable solution for styling content because it takes less time to implement and
update than the older styling techniques did. With the old way, even simple changes might require
the hand-editing of all the individual pages on a site. With CSS, one change there can update a style
across an entire Web site.
After you begin styling your content with external CSS, you’ll probably never want to go back to
using the old tags for styling.

WHY YOU SHOULD LEARN JAVASCRIPT

JavaScript is an object-oriented computer language that’s used to create effects within web
browsers. In most instances, they are interactive, and that’s why it has become the most commonly
used programming language in the world. The following are the benefits of learning Javascript
1. JavaScript uses simple syntax making it an easy language to learn compared to alternatives.
2. JavaScript enables users to write snippets of code which can extend the functionality of web
pages.
3. JavaScript has a wide range of uses from on screen visual effects to processing and
calculating data on web pages with ease.
4. There are many libraries that contain snippets of code which users can use and thereby save
a lot of time. jQuery is one of the biggest libraries of reusable JavaScript code.
5. JavaScript is a client-side language that reduces demand and bandwidth on website servers.
6. JavaScript code is based in coordinated object-oriented units improves speed and efficiency
of websites.
7. JavaScript uses a 16-bit character system that can translate into any language. Other
programming languages use 8-bit characters that only work in the West.

©GEM Center for Human Capital Development www.gem4success.com

 8. JavaScript plays nicely with other languages and can be used in a huge variety of
applications.
9. Learning JavaScript is an essential skill for any Web developer and will open the door to
many job opportunities.

COURSE OVERVIEW
This course is for beginners and no prior programming experience is required. It covers the basic
training on HTML, CSS and JavaScript.

HTML
 Introduction to HTML
 HTML tags
 Creating forms
 Creating tables
 Managing home page

CSS
 Introduction to CSS
 Three ways to use CSS
 CSS properties
 Designing website
 Working with templates

JavaScript
 Introduction to JavaScript
 Three ways to use JavaScript
 Working with events
 Client-side validation

©GEM Center for Human Capital Development www.gem4success.com