RESPONSIVE WEB DESIGN COURSE OUTLINE

Total Class: 32

Class # 1 Instructor's Signature: Date:

❖ Discussion about Our Course Module.

❖ Basic Concept of Website.
❖ Differences between Dynamic & Static Website.
❖ What is HTML?
❖ Differences between HTML and HTML5.
❖ Basic Concepts-
• HTTP - Hyper Text Transfer Protocol.
• HTTPS - Hyper Text Transfer Protocol Secure.
❖ Website Design Tools and Software.
❖ HTML File Extension.
❖ HTML Syntax.
❖ HTML Tags.
❖ Single and Double Tag.
❖ HTML Headings Tag.
❖ HTML Attribute.
❖ Iframe Design.
❖ Marquee Tag.
❖ W3C Compatible Coding.
❖ HTML Comments.

Class # 2 Instructor's Signature: Date:

❖ What is Table?
❖ Table Attribute.
❖ Table Layout Design.
❖ What is Nested Table?
❖ Why we use Nested Table?
❖ Nested Table Layout.

Creative IT Institute | Responsive Web Design Course Outline | Page 1

 Class # 3 Instructor's Signature: Date:

❖ Table Problem Discussion.

❖ Form Design.
❖ Input Types.
❖ Form Elements.
❖ List Item.

Previous Classes Review

Project - 01: Table Based Website Layout Design. (Time: 7 days)

** Exam on HTML (Class Test – 01) **

Class # 4 Instructor's Signature: Date:

❖ What is CSS?
❖ Syntax of CSS.
❖ Types of CSS -
• Inline CSS
• Internal CSS
• External CSS
❖ Div. Introduction.
❖ Differences between ID & Class.
❖ Important Properties of CSS.
❖ CSS Comment.

Class # 5 Instructor’s Signature: Date:

❖ Margin and Padding Property Discussion.

❖ Set Background Image Using CSS.
❖ Div. Based Webpage Layout Design.
❖ CSS Position Property.

Class # 6 Instructor's Signature: Date:

❖ CSS3 Transition Effect.

❖ CSS3 Browser Prefix.
❖ CSS3 Animation
❖ Menu/Navigation bar Design.
❖ Dropdown Menu Creation.

Project – 02: DIV Based Layout Design with Standard Coding Structure. (Time: 7 days)

Creative IT Institute | Responsive Web Design Course Outline | Page 2

 Class # 7 Instructor's Signature: Date:

❖ What is Photoshop?
❖ Basic Concept of Photoshop.
❖ Introduction to Photoshop Tools.
❖ Image Slicing at Photoshop.
❖ How to Pick Color and Fonts from Photoshop Document (PSD)

PSD to HTML Landing Page Website Design

Class # 8 Instructor's Signature: Date:

PSD to HTML Landing Page Website Design

Class # 9 Instructor's Signature: Date:

PSD to HTML Multi Page Website Design

Class# 10 Instructor's Signature: Date:

PSD to HTML “Corporate Website Design”

(2 Hours Lab Class)

Class # 11 Instructor's Signature: Date:

❖ Flexbox Introduction

Design Website using Flexbox.

Class # 12 Instructor's Signature: Date:

Design Website using Flexbox.

Class # 13 Instructor's Signature: Date:

Previous Classes Review

** Exam on HTML & CSS (Class Test – 02) **
Project – 03: PSD to HTML Conversion with Standard Coding Structure. (Time: 7 days)

Creative IT Institute | Responsive Web Design Course Outline | Page 3

 Class # 14 Instructor's Signature: Date:

❖ What is JavaScript (JS)?

❖ JavaScript (JS) Basic Syntax.
❖ Types of JS Output.
❖ JS Statements.
❖ JS Data Types.
❖ JS Variable.
❖ JS Array.
❖ Mathematical Operators.
❖ JS Comments.

Class # 15 Instructor's Signature: Date:

❖ JS Conditions.
❖ JS for Loop.
❖ JS while Loop.
❖ JS do while Loop.
❖ JS Functions.

Class # 16 Instructor's Signature: Date:

❖ What is jQuery?
❖ How to Use jQuery?
❖ jQuery effect-
• Hide-Show
• Up-Down
• Toggle
• Slide
• Animation etc.
• Event Binding
• Use Back to Top Button
• Smooth Scroll

Class # 17 Instructor's Signature: Date:

❖ Sticky Menu
❖ jQuery Custom Preloader
❖ Slick Slider (All Demonstration)

Creative IT Institute | Responsive Web Design Course Outline | Page 4

Class # 18 Instructor's Signature: Date:

❖ What is jQuery Plugin?

❖ How to Use Plugin in a Website.
❖ jQuery Counter Plugin
❖ jQuery Counter Down Timer.
❖ jQuery Lightbox.
❖ jQuery Typed JS.
❖ jQuery Filter Gallery.

Class # 19 Instructor's Signature: Date:

Preview Class Review and Problem Solving

Exam on JavaScript & jQuery (Class Test – 03)
Project – 04: PSD to HTML using All jQuery Plugin. (Time: 7 days)

❖ What is Responsive Website?

❖ Responsive CSS Framework:
• Bootstrap 5
❖ What is Bootstrap?
❖ How to Use Bootstrap?
❖ Bootstrap Code Structure.

Class # 20 Instructor's Signature: Date:

Design to HTML Responsive Multi Page Website Design with Bootstrap

With jQuery Plugins

Class Assignment: Responsive Website Design

Class # 21 Instructor's Signature: Date:

Design to HTML Responsive Multi Page Website Design with Bootstrap

With jQuery Plugins

Class Assignment: Responsive Website Design

Class # 22 Instructor's Signature: Date:

Creative IT Institute | Responsive Web Design Course Outline | Page 5

 Design to HTML Responsive Multi Page Website Design with Bootstrap

With jQuery Plugins

Class Assignment: Responsive Website Design

Class # 23 Instructor's Signature: Date:

Bootstrap Review and Problem-Solving Class

Project – 05: Design to HTML with Bootstrap and jQuery Plugin. (Time: 7 days)

Class # 24 Instructor's Signature: Date:

❖ Bootstrap Collapse / Accordion.

❖ Bootstrap Tabs / Navs.
❖ Bootstrap Modals.
❖ Background Video
❖ jQuery Progress bar

Class # 25 Instructor's Signature: Date:

Figma to HTML with Bootstrap

Class Assignment: Figma to HTML Design

Class # 26 Instructor's Signature: Date:

Figma to HTML with Bootstrap

Class Assignment: Figma to HTML Design

Class # 27 (Special) Instructor’s Signature: Date:

❖ Discussion in Re-sellable Market Place?

❖ Why Best Theme Forest.
❖ Theme Forest Requirement.
❖ Theme Forest Rules and Regulation.
❖ Theme Forest Coding Structure.
❖ Why Reject File in Theme Forest?

Creative IT Institute | Responsive Web Design Course Outline | Page 6

 ❖ File Re-submission System.
❖ Payment System.
❖ Account Security.
❖ Theme Forest File Upload System.

Class 28 (Special) Instructor's Signature: Date:

❖ What is Domain?
❖ What is Hosting?
❖ cPanel Functionalities
❖ Creating Database in cPanel.
❖ Website Hosting Process.

Class # 29 (Special) Instructor’s Signature: Date:

❖ Discussion on (www.fiverr.com) Marketplace.

❖ Fiverr Marketplace Facility.
❖ Creating an Account.
❖ Cover Letter Writing.
❖ Gig Title Writing Technique.
❖ Set Up Fiverr Gigs.
❖ Buyer Request.
❖ Post a Request.
❖ Withdrawal Process.
❖ Account Security.

Class # 30 (Special) Instructor’s Signature: Date:

❖ Discussion in (www.freelancer.com) Market Place.

❖ Creating Account. Updating Profile.
❖ Finding Jobs. Details of Job Page.
❖ Cover Letter Writing.
❖ Good Profile Create System.
❖ Bidding Techniques.
❖ Contest Attend and Review All Contest.
❖ Facing Interview. Communicating with Client
❖ Payment Withdrawn.
❖ Review Questions and Answers.
❖ Account Security.

Class # 31 (Special) Instructor’s Signature: Date:

Creative IT Institute | Responsive Web Design Course Outline | Page 7

 All Previous Classes Review

GitHub

Class # 32 (Special) Instructor’s Signature: Date:

** Final Exam of Web Design Course **

** Viva on Web Design Course **
** Final Project Submission of Web Design Course **
** Discussion about Future Goals **

Creative IT Institute | Responsive Web Design Course Outline | Page 8