Scribd
Upload
2K views

Front End Web Development PDF

The document outlines a course plan for front end web development that covers HTML5, CSS3, Bootstrap, responsive design, JavaScript, jQuery, and concludes with building projects. It includes 10 sections that introduce key concepts like HTML tags and structure, CSS selectors and properties, JavaScript variables, functions, and DOM manipulation, responsive design with media queries, and jQuery methods. The final section involves applying the skills learned on projects like a portfolio, blog, or e-commerce site.

Uploaded by

rakib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Front End Web Development PDF

The document outlines a course plan for front end web development that covers HTML5, CSS3, Bootstrap, responsive design, JavaScript, jQuery, and concludes with building projects. It includes 10 sections that introduce key concepts like HTML tags and structure, CSS selectors and properties, JavaScript variables, functions, and DOM manipulation, responsive design with media queries, and jQuery methods. The final section involves applying the skills learned on projects like a portfolio, blog, or e-commerce site.

Uploaded by

rakib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Front End Web Development Course Plan

1. Introduction to Web Development


2. Front-End Web Development
3. Introduction to HTML5
• Anatomy of an HTML Tag
• Structure Text in HTML
• Headings
• Paragraphs
• Lists
• Adding Images
• Images As Links
• Tables
• Span Tag
• Revisiting Links
• Comments
• Adding a Video
• Adding an Audio Player
• Forms
•
4. Introduction to CSS3
• Inline CSS
• Internal CSS
• External CSS
• Anatomy of CSS Syntax
• Element Selectors
• Class Selectors
• Multiple Class Selectors
• ID Selectors
• External Style Sheets
• Borders
• Padding
• Margin
• Box Model
• Grid
• Aligning Text
• Styling Text
• Adding a Background Image
• Making an Image Grid
• Styling Lists
• Styling Links
• Positioning
• Making the Olympic Symbols
• Making a Navigation Bar
• Colors
• Styling Forms
• Styling Tables
• Gradients
• Google Fonts
5. Introduction to Bootstrap4
• What is Bootstrap
• Wireframing
• Navigation Bar
• Grid Layout System
• Containers
• Buttons & Font Awesome
• Carousel
• Cards
• CSS Z-Index and Stacking Order
• Media Query Breakpoints
• Advanced CSS
➢ Combining Selectors
➢ Selector Priority
6. Responsive Design
• What is Responsiveness
• Introducing Media Queries
• Styling Multiple Selectors With Media Queries
• Applying Multiple Styles With Media Queries
• Media Query Minimum Width
• Using Multiple Media Queries
• CSS Flexbox
➢ Justifying Contents
➢ Aligning Items
➢ Online Resources
• Media Queries and CSS Flexbox
7. Introduction to JavaScript
• JavaScript Overview
• External JavaScript
• Using The Console
• Variables
• Let & Const
• Operators
• Control Statements
▪ Decision Statements
➢ If-Else Statements
➢ Nested If-Else Statements
➢ Switch Case Statements
➢ Operators in If-Else Statements
▪ Loop Statements
➢ For Loop Statements
➢ While Loop Statements
• Strings
• Functions
▪ Functions With No Arguments
▪ Functions With One Arguments
▪ Functions With Two Arguments
▪ Functions With Three Arguments
▪ Return Keyword
▪ Arrow Functions
• Arrays
▪ Array Iteration
▪ Push and Pop Array Methods
▪ Concat and Index of Methods
• Objects
▪ What are Objects
▪ Object Literal Notation
▪ Accessing Object Using Dot Notation
▪ Accessing Objects Using Square Bracket Notation
▪ Adding Methods to Objects
▪ The ‘this’ Keyword
▪ The Math Object
• The Document Object Model(DOM) Manipulation
▪ Getting An Element By It’s ID
▪ Changing An Elements Color
▪ Introducing onclick
▪ Changing An Elements Color Based On A User Click
▪ Query Selector
▪ Query Selector All
▪ getElementsByClassName
▪ getElementsByTagName
▪ Making Content Appear & Disappear
▪ Adding Event Listeners
• Validation
▪ Form Validation
▪ Mobile Number Validation
▪ Email Validation
• Array Methods
▪ Map Methods
➢ With Numbers
➢ With Strings
▪ Filter Methods
➢ With Numbers
➢ On An Array of Objects
▪ Reduce Method
▪ Find Method
▪ The forEach Method
8. jQuery a JavaScript Library
• Introduction to jQuery
• Selecting A Class
• Selecting Elements & ID’s
• Changing Text
• Changing A CSS Style
• Changing Multiple Styles
• Hiding & Displaying Content
• fadeIn & fadeOut Methods
• Performing A Manual Content Toggle
• The toggleClass Method
• Adding & Removing Classes
• Changing An Attribute Of An Element
• Introduction To The Animate Method
• Using The Animate Method With Multiple CSS Properties
• The Animate Method & Callback Functions
• Image Animation
• Polishing The Image Animation
9. Projects
• Portfolio
• E-Commerce
• Blog
• Social Media
• School Management
10. Ending and The Next Step

You might also like