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.
