Practical Web Development with Basics, Examples and Complete Projects – Build 5 Websites
What you will learn
HTML
CSS
Floating Layouts
Flex Box
CSS Grid
CSS Animations
SASS
Responsive Web Design
Java Script
JavaScript Animations
Web Development Projects
Description
Web Development has always been in demand and a must have skill whether you are looking to have a career in web development, or build web site for you.
Ultimate Web Development Development Boot Camp is build on a practical approach taking you through the basics, implementing the knowledge through examples and then each topic is followed by a Complete Web Site Project.
Whether you are new to programming, already know about the web development and want to take your skills to the advanced level or you are good at web development and looking to have practical projects experience, this course is for you.
A quick bird eye view of the course contents is given below for your reference.
- Introduction of World Wide Web
- How to get the best out of this course
- Coding Environment Setup
- HTML Crash Course
- CSSÂ Crash Course (including CSSÂ Animations)
- CSSÂ Layouts
- CSSÂ Floats
- [PROJECT # 1] DATA CONSULTANTS – Website landing page for a technology company DATA CONSULTANTS with complete design and developed using CSSÂ Floats layout. The project includes responsive web design for the site the work on all different screen sizes.
- CSSÂ Flex Box
- [PROJECT #Â 2] DRIVE EASY – Website landing page for a driving school company DRIVE EASY with complete design and developed using CSSÂ Flex Box layout. The project includes responsive web design for the site the work on all different screen sizes.
- CSS Grid
- [PROJECT #Â 3] HOME SERVICES GROUP – Website landing page for a home services company HOME SERVICES GROUP with complete design developed using CSSÂ Grid layout. The project includes responsive web design for the site the work on all different screen sizes.
- Responsive Web Design
- SASSÂ Crash Course
- [PROJECT # 4] WOOD FURNITURE – Website landing page for a wood furniture company WOOD FURNITURE with complete design developed using SASS and various CSSÂ layout techniques i.e. CSSÂ Floats, CSSÂ Flex Box and CSSÂ Grid. The project includes responsive web design for the site the work on all different screen sizes.
- JavaScript Crash Course
- [PROJECT #Â 5] DEAL SALE – Website landing page for a company offering best deals in town named DEAL SALE with complete design and developed using SASS and JavaScript with various CSSÂ layout techniques i.e CSSÂ Floats, CSSÂ Flex Box and CSSÂ Grid.
- What Next – Where to go from here?
ENROLL NOW and get Life Time access to a complete range of web development resources and projects.
English
language
Content
Introduction
Introduction
Resources To Download
How to Get the best out of this course
Setup
Environment Setup
HTML Crash Course
Introduction
WWW – How World Wide Web Works
Key Languages for Web Development
HTML Learning Resources
Web Page Structure
HTML Elements and Tags
Text Elements – Part 1
Text Elements – Part 2
Hyperlinks
Layout Elements
Images in HTML
Video and Audio in HTML
HTML Tables
HTML Forms
Conclusion
Quiz – HTML Crash Course
CSS Crash Crouse
What is CSS?
How CSS Works
CSS Selectors
Cascading Inheritance and Specificity
The Box Model
Margins Padding and Borders
Backgrounds – Part 1
Backgrounds – Part 2
Overflowing Content
CSS Values and Units
Font Styling – Part 1
Font Styling – Part 2
Using Icons
CSS Transitions
CSS Animations
Quiz – CSS
Layouts with CSS Floats
Introduction – CSS Layouts
CSS Floats
Putting the contents together
Navbar
Sections – Hero Image and About Us
Services Section
Sections – Reviews and Footer
Quiz – CSS Floats
[PROJECT # 1] DATA CONSULTANTS – CSS Floats
[Project – Data Consultants] Introduction
Project Setup
Logo Bar – Part 1
Logo Bar – Part 2
Nav Bar
Hero Image
Cards Section
About Us – Part 1
About Us – Part 2
Our Services Section
Quote Section
Key Numbers Section
Meet Our Team – Part 1
Meet Our Team – Part 2
Meat Our Team – Part 3
Customer Reviews Section
Contact Us Form – Part 1
Contact Us Form – Part 2
Contact Us Form – Part 3
Footer – Part 1
Footer – Part 2
Footer – Part 3
Conclustion
Flex Box Crash Course
Flex Box Introduction
Flex Direction
Flex Wrap
Justify Content
Align Items
Align Content
Flex Grow – Flex Shrink – Flex Basis – Flex
Align Self
Flex Cheat Sheet
Quiz – CSS Flexbox
[PROJECT # 2] DRIVE EASY – Flex Box
[Project – Drive Easy] Introduction
Project Setup
Logo Bar – Part 1
Logo Bar – Part 2
Nav Bar
Hero Image
Easy Enrollment – Part 1
Easy Enrollment – Part 2
Easy Enrollment – Part 3
Easy Enrollment – Part 4
What Makes Us Different
Key Numbers
Section Quote
Package – Part 1
Package – Part 2
Package – Part 3
Package – Part 4
Package – Part 5
Contact Us Form
Footer
Conclusion
CSS Grid Crash Course
Introduction
Grid Template Columns
Column Row Gap
Justify Content
Align Content
Grid Auto Rows and Columns
Chess Board Project
Chess Board Solution
Grid Column Row Start And End
Grid Area
Grid Template Areas
Grid Layout
CSS Grid Cheat Sheet
Quiz – CSS Grid
[PROJECT # 3] HOME SERVICES GROUP – CSS Grid
[Project – Home Services Group] Introduction
Project Setup
Header
CSS Grid – Menu Bar
Header Text and Buttons
Animated Bar – Part 1
Animated Bar – Part 2
Animated Bar – Part 3
Fixed Side Menu – Part 1
Fixed Side Menu – Part 2
Services – Part 1
Services – Part 2
Animated Cards
Excellence in Numbers
Integrated Services – Part 1
Integrated Services – Part 2
Integrated Services – Part 3
Integrated Services – Part 4
Our Partners – CSS Auto Scrolling Animation
Footer
Conclusion
RWD – Responsive Web Design
Introduction – Media Queries
Example 1 – Desktop First Design Breakpoints
Example 2 – Mobile First Design Breakpoints
Example 3 – Display Property
Example 4 – Floating Layout
Example 5 – Flex Layout
Example 6 – Grid Layout
Quiz – CSS Media Queries
[PROJECT # 1 – Continued] RWD – Data Consultants
[RWD Project – Data Consultants] Introduction
Logo Bar
Navbar
Hero Image
Cards
About Us
Services Section
Quote Section
Key Numbers
Team Section
Contact Us
Footer
Auto Prefix CSS
[PROJECT # 2 Continued] RWD – Drive Easy
[RWD – Drive Easy Project] – Introduction
Logo Bar
Navbar
Hero Image
Enrollment Section
Section Different
Section Quote
Packages
Contact Us
Footer
Prefixing CSS
[PROJECT # 3 – Continued] RWD – Home Services Group
[RWD Project – Home Services Group] Introduction
Navbar
Animated Bar
What We Do
Cards Section
Excellence In Numbers
Integrated Services
Footer
Prefixing CSS
SASS Crash Course
SASS Introduction
SASS Installation with SASS Package
node-sass Installation
Live Sass Compiler
SASS Releases
Sass Syntax – SCSS
SASS Syntax – Sass
At-Rules and Partials
SASS Variables
SASS Nesting
Mixins
Extend
Functions
Flow Control Interpolation and Debugging SASS
Example – Flow Control Interpolation and Debugging Sass
BuiltIn Modules – Sass Color
BuiltIn Modules – Sass List
BuiltIn Modules – Sass Map
BuiltIn Modules – Sass Math
BuiltIn Modules – Sass Meta
BuiltIn Modules – Sass Selector
BuiltIn Modules – Sass String
Conclusion
Quiz – Sass
[PROJECT # 4] WOOD FURNITURE – SASS
[Project – Wood Furniture] Introduction
Project Setup
HTML Reset
Logo Bar
Navbar
Hero Image
Catalogue – Part 1
Catalogue – Part 2
Deals of the Day – Part 1
Deals of the Day – Part 2
Deals of the Day – Part 3
Our Services
Customers Feedback
Footer – Part 1
Footer – Part 2
Conclusion
[PROJECT # 4 – Continued] RWD – Wood Furniture
[RWD Project – Wood Furniture] Introduction
Navbar
Hero Image
Catalogue
Deals of the Day
Services
Customers Feedback
Footer
Prefixing CSS
Conclusion
Java Script – Crash Course
Introduction
Getting Started With JavaScript
Variables
Number System
Operators
Arrays – Part 1
Arrays – Part 2
Control Flow and Error Handling
Loops and Iterations
Functions – Part 1
Functions – Part 2
Arrow Functions
Array Iteration
Objects
Date Object
Maps and Sets
Math Object
DOM – Document Object Model
Document Object – Part 1
Document Object – Part 2
DOM Events
Events Listener
DOM Nodes
Create and Update Nodes
Conclusion
Quiz – Java Script
[PROJECT # 5] DEAL SALE – JavaScript
[Project – Deal Sale] Introduction
Project Setup
Top Bar
Navbar
Drop Down Menu
Hero Slider – Part 1
Hero Slider – Part 2
Hero Slider – Part 3
Hero Slider – Part 4
Further Reduction – Count Down Timer – Part 1
Further Reduction – Count Down Timer – Part 2
Deals Accordion – Part 1
Deals Accordion – Part 2
Deals Accordion – Part 3
Deals Accordion – Part 4
Key Numbers – Live – Part 1
Key Numbers – Live – Part 2
Sliding Deals
Customer Feedback – Sliding – Part 1
Customer Feedback – Sliding – Part 2
Footer – Part 1
Footer – Part 2
Footer – Part 3
Footer – Part 4
Footer – Part 5
Where To Go From Here
Next Steps – Where To Go From Here