Scribd
Upload
89 views

Course Outline: Professional Web Design

The document outlines a 20-class professional web design course covering topics like HTML, CSS, JavaScript, jQuery, Photoshop, and freelancing. The classes are 2 hours each over 40 total hours. Students will learn to code websites from scratch, work with frameworks like Bootstrap, design in Photoshop, and prepare to freelance by setting up profiles on marketplaces. Assignments include coding exercises and a final project to create a full personal portfolio website.

Uploaded by

Mehejabin Hossain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
89 views

Course Outline: Professional Web Design

The document outlines a 20-class professional web design course covering topics like HTML, CSS, JavaScript, jQuery, Photoshop, and freelancing. The classes are 2 hours each over 40 total hours. Students will learn to code websites from scratch, work with frameworks like Bootstrap, design in Photoshop, and prepare to freelance by setting up profiles on marketplaces. Assignments include coding exercises and a final project to create a full personal portfolio website.

Uploaded by

Mehejabin Hossain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Professional Web Design

Course Outline

Total Class: 20 Every Class: 2 hours Course Duration: 40 hours

Class. #1 Class Location: Date:

• What is web design?


• Basic concept of web design.
• Why you would work as a web designer?
• What is responsive web design and responsive website?
• Difference between web design and development.
• Startup web design
• What is HTML and HTML 5?
• Website design tools.
• File extension.
• Editor and Browser.
• HTML Syntax.
• Head and Body.
• Basic tags.

Class Assignment: HTML Basic tag and Creating html file and syntax.

Class. #2 Class Location: Date:

• HTML single and double tag.


• HTML Comments.
• HTML list.
• HTML Elements and Attributes.
• Find out HTML 5 tags.
• Different types of images.

Class Assignment: HTML all tags & All attributes.


Class. #3 Class Location: Date:

• Form Design.
• Input Types.
• Form Elements.
• Marquee tag.
• Find out HTML 5 tags.
• Audio and Video tag.
• Iframe Design.
• How to use Google map?
• How to use YouTube video?
• How to use W3C Compatible Coding.

Class Assignment: HTML all tags & Use Marquee tag All attributes.

Class. #4 Class Location: Date:

• What is Table?
• Table attribute.
• Table layout design.
• What is nested table?
• Why use nested table?
• Nested table layout.

Class Assignment: Make a website full layout using table.

Class. #5 Class Location: Date:

• Introduction to CSS – CSS3 (Cascading style sheet).


• Syntax of CSS.
• How to use CSS in website (Inline/ Internal/ External).
• How to link External CSS?
• Introduction to Selector.
• Different Between Id & Class.
• Important Property of CSS.

Class Assignment: Create and linking external CSS file.


Class. #6 Class Location: Date:
• Div Introduction.
• Margin and Padding Property Discussion.
• CSS Based Website Layout Design.
• Float.
• Type CSS.
• Inline csss.
• Internal css.
• External css.
• Styling text and Font Size.

Class Assignment: Creating External CSS File Change HTML View .

Class. #7 Class Location: Date:

• Flex box.
• Creating Menu & Dropdown Menu.
• Position.
• Fixed.
• Relative
• Absolute.
• Sticky.
• Icon.
• Font.

Class Assignment: Creating Dropdown menu with icons.

Class. #8 Class Location: Date:


• Input box styling.
• Background Image.
• Parallax Effect.
• Background Position set in webpage.
• Border and Rounded Corner.
• Gradient & Shadow.
• Transition & Transformation.

Class Assignment: Creating webpage (Menu, Background image, etc).


Class. #9 Class Location: Date:

Live Project with HTML & CSS.


Class Assignment: Make Personal Portfolio (Home, About, Service, Contact).

Class. #10 Class Location: Date:


• Responsive CSS Framework.
• Bootstrap.
• Boilerplate.
• Material UI etc.
• Why use Bootstrap.
• Install Bootstrap update.
• Discuss about Bootstrap Layouts.
• Bootstrap Grid System.
• Bootstrap all Components.
• Fully Customize Bootstrap Navbar.
• Fully Customize Bootstrap Slider.

Class Assignment: Bootstrap Grid system and all components use.

Class. #11 Class Location: Date:


Photoshop

• What is Photoshop?
• Basic concept of Photoshop.
• Introduction Photoshop tools-.
• PSD convert system.
• Photoshop image slice.
• Pick PSD Color and Fonts.

• PSD to Html Landing Page Design

Class Assignment: PSD Web Page Requirement Base Slice.


Class. #12 Class Location: Date:

• PSD to Html Landing Page Design

Class Assignment: Landing Page Design with Standard coding structure.

Class. #13 Class Location: Date:

• PSD to Html Landing Page Design

Class Assignment: Landing Page Design with Standard coding structure.

Class. #14 Class Location: Date:


Full Responsive
• Screen size.
• Desktop or Laptop (1200px).
• Tablets (992px).
• Landscape (768px).
• Portrait Phone (576px).

• Class Assignment: Responsive all screen personal portfolio

Class. #15 Class Location: Date:


Basic Concept of JavaScript.
• What is JS?
• Why use JS?
• JS basic syntax.
• JS different type of output.
• JS statement, JS comments.
• JS variable, JS Objects.
• Operators.
• JS condition.
• JS for Loop.
• JS While-Loop
• JS DO-While Loop
Class. #16 Class Location: Date:

• What is JQ?
• Why use JQ?
• JQ basic syntax.
• JQuery Events.
• jQuery Selectors.
• Some effect---
• Fade In-fade out- Toggle.
• Slide up-Slide Down -Slide Toggle.
• Animation etc.

Assignment: Working with jquery.

Class. #17 Class Location: Date:

• JQuery Plugins.
• Owl carousel.
• Isotope gallery.
• Animation css

Assignment: use jquery plugin in lanfing page.

Class. #18 Class Location: Date:


Discussion about Freelancing Marketplace.
• Discussion on(https:/www.freelancer.com/) market place
• Creating account, updating profile.
• Finding jobs, Details of job page.
• Cover letter writing.
• Good profile creating system.
• Bidding technique.
• Contest attend & Review all contest.
• Account Security.

Assignment: Every STUDENT create account in market place & join contest.
Class. #19 Class Location: Date:
• Discussion on(https:/www.fiverr.com/) market place
• Creating account, updating profile.
• Cover letter writing.
• Good profile creating system.
• Gig title writing technique
• Setup Fiverr gigs
• Buyer Request.
• Account Security.
Assignment: Create Fiverr market place account. Set 5 Gigs with tag each

Class. #20 Class Location: Date:


• FINAL EXAM
• FINAL PROJECT SUBMISSION.

You might also like