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
