Have you always wanted to learn how to code but don’t know where to start?
Would you like to make amazing websites and bring your ideas to life?
Then Front End Web Development Course is for you!
Programming is the most in-demand skill in 2022.
The course begins with the basics.
We’ll take you through everything you need to know to start building websites like an expert.
We’ll Cover HTML5, CSS3, JavaScript, jQuery, Bootstrap 4 and SVG from scratch.
You’ll learn all the fundamentals of Front-End Web Development and how you can use them to start creating you own websites. We will cover the following technologies in this course:
- Web Development basics with HTML
- Cascading Style Sheets (CSS)
- JavaScript programming
- jQuery JavaScript Library
- Bootstrap Framework
This course covers the most popular web development frameworks, and will get you started on your path towards becoming a full-stack web developer!
What you will learn?
-
HTML5 Basics
-
Advanced HTML5
-
CSS3 Basics
-
Advanced CSS3
-
JavaScript Basics
-
Advanced JavaScript
-
jQuery Basics
-
Advanced jQuery
-
Bootstrap 5 Basics
-
Advanced Bootstrap 5
-
SVG Basics
-
Advanced SVG
-
Sublime Text 3 (Text Editor)
-
Atom (Text Editor)
-
Visual Studio Code (Text Editor)
-
Brackets (Text Editor)
-
Google Chrome (Web Browser)
-
Firefox Developer Edition (Web Browser)
-
Firefox (Web Browser)
-
Opera (Web Browser)
-
Microsoft Edge (Web Browser)
Course Content
Web Development Basics – HTML
- HTML Document Structure
- HTML Elements – div and span
- HTML Elements – i, b, p, and a
- HTML Elements – ul, li, and ol
- HTML Elements – header and footer
- HTML Elements – section, main and article
- HTML Elements – h1-h6 and aside
- HTML Tables
Advanced HTML Concepts
- Images
- Forms
- Inputs
- Checkboxes
- Radio buttons
- Select, option, and buttons
- HTML5 videos
- HTML5 audio
- Doctypes
- Meta tags
Introduction to Cascading Style Sheets (CSS)
- Targeting color and background
- Element specificity
- ID targeting, margin and border
- Padding, margin and float
- Max-width and background-image
- Switching over to an IDE
- Font weight, style,, and family
- Text Decoration
- Text spacing
- Text decoration modification
- Text Shadow
Advanced CSS
- Pseudo-stats
- Border radius
- Position
- Pseudo-elements
- Z-index
- Viewpoint width and height, overflow content
- Transition property
JavaScript for Beginners
- Intro to JavaScript
- Alerts and console logging
- Integers, strings and variables
- Undefined variables and modifying values of variables
- Boolean operators
- Comparing values
- If statements
- For Loops
- Defining functions
- Event Handling
- Setting and elements innerHTML
More JavaScript Concepts
- Arrays
- Textareas and getting the value of inputs
- Functions – parameters and return values
- Multiple parameters in functions
- Flexible function parameters
- Exercise – find the missing number
- Exercise solution
- Classes Explained
- Class constructor, instance variables and static variables
- Extending classes
Getting started with jQuery
- jQuery setup
- Targeting elements
- Event handling
- Dropdown menus
- Making our dropdown disappear
- Multiple targets, events, and attr method
- Prepend, append, and html
- preventDefault
- event.which and switch properties
- Custom context menu, pageY, and pageX
- is method
More jQuery
-
Writing our own version of jQuery
-
Find method
-
First and last
-
Focusin and focusout
-
Contains, is, and hasClass
-
Each method
-
Callbacks
-
CSS
Bootstrap 5
-
Overview
-
Containers
-
Grid Basic
-
Typography
-
Colors
-
Tables
-
Images
-
Jumbotron
-
Alerts
-
Buttons
-
Button Groups
-
Badges
-
Progress Bars
-
Spinners
-
Pagination
-
List Groups
-
Cards
-
Dropdowns
-
Collapse
-
Navs
-
Navbar
-
Forms
-
Inputs
-
Input Groups
-
Custom Forms
-
Carousel
-
Modal
-
Tooltip
-
Popover
-
Toast
-
Scrollspy
-
Utilities
-
Flex
-
Icons
-
Media Objects
-
Filters