This document outlines a web design syllabus that covers topics like visual design, HTML, CSS, JavaScript, jQuery, responsive design, Bootstrap, Canvas, website optimization, the console, Git, and building a final personal website project. The syllabus includes over 120 hours of content across 11 sections and projects to teach students how to design and build beautiful, interactive websites from scratch. Key skills learned include visual design principles, coding languages like HTML, CSS and JavaScript, responsive design, frameworks like Bootstrap, and tools like the console and Git version control.

1. Web Design Syllabus
In this track, you’ll learn how to design and build beautiful websites by learning the basic
principles of design like color theory, and typography which are all instrumental in the design
process of a website.
You’ll learn how to build beautiful, interactive websites by learning the fundamentals of
HTML, CSS, and JavaScript — three common coding languages on which all modern websites
are built. This is a useful and lucrative skill to acquire as it used by nearly every single business
in the world that needs a website to communicate to its customers.
And we also will dive into WordPress. Starting from the beginning, you’ll learn all about how
you can use WordPress to create awesome CMS-powered websites for your clients.
By the end of this track, you’ll have all the skills required to build your own websites or even
start a career with one of the thousands of companies that have a website.
1. Introduction to Visual Design 12 Hours
a. Photoshop Overview. [ The basics ]
b. Getting to know the tools. [ The principles ]
c. Typography tips, tricks and techniques.
Build two layout page from Scratch [2 project]
2. HTML 12 Hours
a. Introduction to HTML
i. The big three: HTML5, CSS3 and JavaScript
ii. Elements, tags and attributes
iii. Character encoding
iv. Best practices
v. More on tags
Mohammed Elzanati
Front End-Developer
Tel : +(02) 0100 - 3095943

2. 2
b. HTML5
i. Attributes
ii. Semantic meaning
iii. Images
iv. Hyperlinks
v. Forms
vi. Tables
Build simple website suing html technique [1 project]
3. CSS 14 Hours
a. CSS Basics
- CSS (Cascading Style Sheets) is a style sheet language that describes the
presentation of web pages. Whereas HTML is what forms the structure of a web
page, CSS is what we use to style the HTML with colors, backgrounds, font sizes,
layout, and more. As you'll soon learn, CSS is one of the core technologies for
designing and building websites.
a. What we will learn
i. Basics Selectors
ii. Common Values and Units
iii. CSS Layout
iv. New CSS Feature
b. CSS Selectors
- In this short Topic, we're going to go beyond the basic selector concepts
covered in CSS Basics. Besides the common ways to select elements with
type, ID and class selectors, we're able to target elements based on their
attributes, position in the HTML document, even their relation to other
elements. By the end, you'll have gained a better understanding of the power
and flexibility behind CSS selectors. You'll have a new set of valuable tools in
your CSS toolkit to use on your next project.
a. What we will learn
i. Attribute Selectors
ii. Advanced pseudo classes
iii. Pseudo elements
c. CSS Layout Basics
- Learn to work with common layout and positioning methods used in web
design. In this course, you'll get hands-on practice with basic CSS layout
techniques like display modes and floats.
- You'll use your new CSS layout skills to build the layout for a simple web page.
Then learn to enhance the layout using relative, absolute and fixed positioning.
a. What we will learn
i. Getting Started with CSS Layout
ii. Controlling Layout with CSS Display Modes
iii. Page Layout with the Float Property
iv. CSS Layout Project
v. Positioning Page Content
Build landing page for mobile application suing sass [1 project]

3. 3
4. Responsive Web Design Fundamentals 12 Hours
- In this section you'll learn the fundamentals of responsive web design you’ll
create your own responsive web page that works well on any device - phone,
tablet, desktop or anything in between. You’ll start by exploring what makes a
site responsive and how some common responsive design patterns work
across different devices.
- From there, you’ll learn how to create your own responsive layout using the
viewport tag and CSS media queries. As you proceed, you’ll experiment with
major and minor breakpoints, and optimizing text for reading.
- This course consists of 5 lessons. The first one is an overview of responsive
design and introduces the way you’ll need to shift your thinking as you go
from desktop first design, to responsive design. Lessons 2, 3, 4 and 5 will cover
the important theoretical concepts of responsive design, and include plenty of
hands-on exercises implementing what you’ve learned.
a. Lesson 1 - Why Responsive?
b. Lesson 2 - Starting Small
c. Lesson 3 - Building Up
d. Lesson 4 - Common Responsive Patterns
e. Lesson 5 – Optimizations
Build a Blog and Portfolio web site from Scratch [1 project]
5. Responsive Websites Using Bootstrap 3 12 Hours
- Bootstrap is the most popular front-end framework on the web today, and
people are going nuts over it! Why? Because it's incredibly easy to learn, and
because you can save hours of work (or hundreds of dollars in precious
development time)!
a. What we cover in this topic
i. You will learn the fundamentals of Twitter Bootstrap and
how to take advantage of it.
ii. You will learn how to code a jQuery Sliding Carousel
iii. You will be introduced to the Bootstrap 3 "grid", and how to
hand-code any layout at hyper speeds
iv. You will know how to add flair and to your layout using
Bootstrap 3 components, such as: CSS3 Buttons, Icon Fonts,
Device-Specific Text & Elements, Panels and so much more
v. You will learn how to embed a responsive Google Map right
on your website
vi. You will become familiar with popular tactics to engage
your users with compelling call to actions, beautiful
typography, and sexy buttons
vii. By the end of the course, you will have built a fully-
responsive webpage with Bootstrap 3
Build a car washer web site from Scratch [1 project]

4. 4
6. Java script 14 Hours
- JavaScript is a programming language that drives the web: from front-end
user interface design, to backend server-side programming, you'll find
JavaScript at every stage of a web site and web application. In this course,
you'll learn the fundamental programming concepts and syntax of the
JavaScript programming language.
a. What you will learn
i. What JavaScript is and where it is used
ii. Basic programming concepts like variables, data types and
conditional statements
iii. What functions are and why they're useful
iv. How to troubleshoot programming problems
v. The basic syntax of the JavaScript programming language
vi. Loops
vii. Arrays
viii. Objects
ix. DRY Programming
Build a to-do list application and gallery [2 project]
7. jQuery Basics 5 Hours
- JQuery Basics covers why you'd want to use jQuery, what it is and how to
include it in your projects. You'll build several projects over the course to give
you the confidence to integrate jQuery in your own projects and add that level
of flair and interactivity to any site you work on.
a. What you will learn
i. Introduction to jQuery
ii. Creating a Spoiler Revealer
iii. Creating a Simple Lightbox
iv. Creating a Mobile Drop Down Menu
v. Creating a Password Confirmation Form
vi. Creating a Simple Drawing Application
Build a fashion web site from Scratch using parallax technique [1 project]
8. HTML5 Canvas 12 Hours
Build Program a ball and paddle project. [Game][1 project]

5. 5
9. Website Optimization / Performance 6 Hours
- We’ll cover tools needed in keeping your website in top shape. These tools will
help you perform tasks like debugging a problem to improving your page load
times.
- People want to use websites that load quickly, and every second counts. If a
website takes more than 3 seconds to load, you can lose 40% of your audience.
Every additional second in page response can result in a 7% reduction in
conversions. In these lessons, we're going to take a slow website and make it
load faster using front end performance optimization. By the end, you'll know
many practical techniques that can speed up any website.
a. What we learn
i. Chrome Dev-Tools Basics
ii. Performance measurement
iii. Reduce HTTP requests
iv. CSS and JavaScript minification
10. Console Foundations / Git Basics 7 Hours
- The console is an important skill for any developer. Many programs can only be
used via a command line interface, and often the only access you have to a
server will be over a command line interface. Once you are familiar with the
basics of the console, you will be able to perform very powerful tasks quickly
and easily.
- If you’re serious about pursuing a career as a software developer or designer,
at some point, you will need to learn a version control system. A VCS is an
important, but sometimes overlooked, tool that is essential for keeping all but
the most trivial projects on track. In this course we'll talk about what version
control is and how it works before covering the basics of one of the most
popular version control systems available today - Git. By the time you’re finished
with the course, you’ll be ready to start using Git on your next project.
a. What we will learn
i. Getting Started with the Console
ii. Users and Permissions
iii. Processes
iv. Environment and Redirection
v. Installing Software
vi. What Version Control Does
vii. How Version Control Works
viii. What Makes Git a Good Choice
ix. Using Git to Manage Basic Projects
x. Working With GitHub and other Git Hosting Solutions
11. Build Final Project Design and Coding Your Personal Website 12 Hours

6. 6
120 hours with 11 projects 
The End: ////
Mohamed Elzanaty
Co-Founder at QuaNode Start-up & Front End Developer
QuaNode ::=> services.quanode.com
Mob: +(02) 0100 - 3095943

7. 7