![The Complete Web Development Course - Build 15 Projects [Video]](https://content.packt.com/V11344/cover_image_small.jpg)
The Complete Web Development Course - Build 15 Projects [Video]
Subscription
FREE
Video + Subscription
$29.99
Video
$44.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
Subscription
FREE
Video + Subscription
$29.99
Video
$44.99
What do you get with a Packt Subscription?
What do you get with a Packt Subscription?
What do you get with Video + Subscription?
What do you get with a Packt Subscription?
What do you get with eBook?
What do I get with Print?
What do I get with Print?
What do you get with video?
What do you get with Audiobook?
-
Free ChapterIntroduction
- Welcome to the Course
- Your Journey Inside the Course
- Structure of a Website
- Your First Website
- Get Your Free Unlimited Web Hosting
- Share Your Website with the World (1)
- Share Your Website with the World (2) - Cyberduck Version
- Share Your Website with the World (2) - FileZilla Version
- Headings
- Paragraphs
- Links
- Images
- Inline Versus Block Elements
- Iframes - Activity: Embed a Nice Relaxing YouTube Video to Your Website
- Unordered Lists
- Ordered Lists
- Description: Lists
- Tables
- Entities
- Forms (1) - Activity: Create a Simple Login Form
- Forms (2) - Activity: Create a Marketplace Checkout Form
- Text Decoration
- Comments
-
CSS
- Introduction
- Inline CSS
- Internal CSS
- External CSS
- Classes and IDs
- Div and Span
- Box Model
- Box Model Padding
- Box Model: Border
- Box Model: Outline
- Box Model: Margin
- Background
- Floating
- Positioning
- Display
- Text Decoration
- Text Align
- Text Font
- Text Effects
- Image Sprites
- Image Opacity
- Styling Lists
- Styling Links
- Gradients
- 2D Transforms
- 3D Transforms
- Transitions
- Animations
-
Professional Project: Mathematics Tutorials Website (HTML and CSS)
-
Advanced CSS with Flexbox, Grid, and SASS
- Flexbox: Introduction
- Flexbox: Basic Flexbox
- Flexbox: Align Flex Items
- Flexbox: Align Flex Lines
- Flexbox: Resize Flex Items (1)
- Flexbox: Resize Flex Items (2)
- Flexbox Application: Photo Gallery (1)
- Flexbox Application: Photo Gallery (2)
- Flexbox Application: Amazon Checkout (1)
- Flexbox Application: Amazon Checkout (2)
- Flexbox Application: Amazon Checkout (3)
- Flexbox Application: Math Website (1)
- Flexbox Application: Math Website (2)
- Flexbox Application: Math Website (3)
- CSS Grid: Introduction and Basic Grid Template
- CSS Grid: Implicit Versus Explicit Grid
- CSS Grid: Grid Areas and Responsive Design
- CSS Grid: Master the "grid-column" Property
- CSS Grid: Grid Coordinates
- CSS Grid: Align Grid Items
- CSS Grid Application: Photo Gallery
- CSS Grid Application: Picture Grid
- Sass: Introduction - Installation - Nesting Syntax
- Sass: .scss Versus .sass - Variables
- Sass: @import and @extend directives
- Sass: Mixins - Operators - Functions
-
JavaScript
- Introduction
- Buttons
- Change HTML Content
- Change HTML Style
- Variables and Data Types
- Change HTML Using Variables - Activity: Random Color Generator
- Functions: Activity: Swap the Content of Two divs
- Objects
- Create Objects Using the "new" Keyword
- Object Constructors
- Arrays
- If and Switch Statements - Activity: Motorway Speed Control
- For Loops
- While Loops - Activity: Spend $1,000 Randomly in a Marketplace
- Regular Expressions
- Errors (1)
- Errors (2) - Activity: Password Validation
- Set Interval and Set Timeout - Activity: Create a Simple Counter
- Window and Screen
- Alert Boxes
- Cookies
-
Professional Project: Math Game (HTML, CSS, and JavaScript)
-
jQuery
- Introduction and Loading jQuery
- Select HTML Elements (1)
- Select HTML Elements (2)
- Respond to Events
- Change HTML Content and Attributes (1)
- Change HTML Content and Attributes (2)
- Change Styling (1)
- Change Styling (2) - Activity: Random Position and Color Generator
- jQuery Effects
- Ajax
- jQuery UI Introduction
- Draggable and Droppable (1) - Activity: Leave Me Alone! Please Drop Me!
- Draggable and Droppable (2) - Activity: Drag Items to Your Basket
- Resizable
- Selectable - Activity: Append Selected Car Makes to a Box
- Sortable - Activity: Sort and Exchange Car Makes Between Two Groups
- Accordion - Activity: Create a Resizable Accordion with Collapsible Sections
- Autocomplete - Activity: City Input with Prepopulated Options
- Button
- Date Picker - Activity: Outbound and Return Flight Date Picker Just Like Expedia
- Dialog - Activity: Are You Sure You Want to Go to the Previous Page?
- Menu
- Progress Bar - Activity: Animated Progress Bar Filled from 0% to 100%
- Select Menu
- Slider - Activity: Car Mileage Range Using a Slider
- More Widgets: Spinners, Tabs, and Tooltips
-
Professional Project: Fruits Slice Game (HTML, CSS, and jQuery)
-
Twitter Bootstrap
- Introduction
- Grid System
- Typography
- Tables
- Forms (1) - Activity: Inline and Horizontal Responsive Login Forms
- Forms (2)
- Forms (3)
- Buttons
- Images
- Navs - Activity: Website Design Using Nav Tabs and Nav Pills
- Navbars - Activity: Website Design Using a Responsive/Collapsible Navigation Bar
- Pagination - Activity: Pagination and Pager Examples Such as Google/Ebay
- Jumbotron
- Thumbnails
- Dropdown Menus
- Modals (1) - Activity: I Have an Inquiry About My Order
- Modals (2) - Activity: I Have an Inquiry About My Order
- Scrollspy
- Tabs
- Tooltips
- Popovers - Activity: Create a Popover Just Like the One You See on an IPAD
- Alerts – Activity: Create an Alert Box to Show a Warning or Success Message
- Button Plugin - Activity: Loading … Download Complete
- Collapse Plugin
- Carousels - Activity: Create an Interactive Carousel Slider
- Affix plugin - Activity: Interactive Website with Content Affixed to a Menu
-
Professional Project: App Landing Page (HTML, CSS, and Bootstrap)
-
Professional Project: Company Website (HTML, CSS, and Bootstrap)
-
Professional Project: Our Lovely Course (HTML, CSS, jQuery, and Bootstrap)
-
Professional Project: Stopwatch App (HTML, CSS, jQuery, and Bootstrap)
-
Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas, Local Storage)
-
ES6 - Modern JavaScript
- Introduction to Modern JavaScript (ES6)
- Variables and Scoping: Review of "var"
- Variables and Scoping: Let Scope and Temporal Dead Zone
- Block Scoping in ES6
- Functions and Block Scoping
- Functions and Block Scoping – use let
- Let Scope Versus Closures
- Closures Challenge
- Read Only Variables - const
- New Features that Make Your Life Easier: Template Literals
- New Features that Make Your Life Easier: Arrow Functions – 'this' Lexical Scope
- Destructuring - Arrays
- Destructuring - Objects
- Destructuring - Functions
- Functions – Default Parameter Values
- Functions – Rest Parameters
- Spread Operator
- Objects New Features
- Iteration: For Of loop
- Iterators - next() - Generators
- Maps - Iteration
- Sets - Iteration
- Sets – Challenge: Intersection and Difference
- Symbols
- Symbol.iterator
- Array.from: Collections, Strings, Arguments
- Array.from: Optional Map, Length Property, Maps and Sets
- Array.of
- More Array Methods
- ES6 Classes: Back to ES5 Constructors
- ES6 Classes: Syntax
- ES6 Classes: Static Methods
- ES6 Classes: Getters and Setters
- Class Inheritance – extends - super
-
"Front End" Versus "Back End"
-
Node.js - Introduction and Installation
-
The "super" Command Line Crash Course
-
Node.js – Let's Dive in (using ES6 + ES7)
- Your First Node Application
- File Exports
- HTTP Built-In Module (1)
- HTTP Built-In Module (2)
- HTTP Built-In Module (3)
- Fs Built-In Module - Blocking Mode
- Fs Built-In Module - Non-Blocking Mode
- Fs Built-In Module - Use ES6 Promises
- Fs Built-In Module – Use ES7 Async Await
- Fs Built-In Module - More Features
-
Professional Project: Online File Explorer App (Pure Node.js, Bootstrap 4)
- Project Introduction: Online File Explorer App (Pure Node.js, Bootstrap 4)
- App Skeleton and Decoration
- App Logic
- Create the Server
- Decode the Path Name and Convert it to a Full Static Path
- Display Folder Content and Print the Title
- Show the Path Inside a "Breadcrumb"
- Loop Through Folder Elements
- Print Icons – Get Introduced to the child_process Module
- Calculate Folders' Size Using the child_process Module
- Convert Folders' Size to Bytes – Retrieve Items' Last Modified Time
- Calculate the Size of Files
- Get the Mime Type of Files
- Serve Files to the Client
- Serve PDF Files on the Browser – Serve Media Content in Chunks Using a Stream
- Re-Order Folder Elements by Name
- Re-Order Folder Elements by Name (2)
- Add the Up and Down Arrows After Sorting Elements by Name
- Sort Elements by Size and Last Modified
- Fix Projects Bugs
-
Git and GitHub
-
Deploy Your App to Heroku
-
PHP
- Introduction
- Embed PHP in HTML
- PHP Variables
- Data Types: Strings
- Data Types: Integers and Floats
- Data Types: Booleans
- Data Types: Arrays
- Data Types: Objects
- Data Types: NULL
- Data Types: Resources
- String Functions
- If and Switch Statements
- For Loops
- While Loops
- Functions
- GET and POST
- Array Functions (1)
- Array Functions (2)
- Send Emails – Activity: Send a Styled Email in HTML Format
- Filter User Inputs (1) – Protect Yourself from Hackers
- Filter User Inputs (2) – User Input Validation
- Activity: Create a Responsive Contact Form Using PHP and Bootstrap (1)
- Activity: Create a Responsive Contact Form Using PHP and Bootstrap (2)
- Activity: Create a Responsive Contact Form Using PHP and Bootstrap (3)
- Date and Time (1)
- Date and Time (2) - Activity: Day of the Week You Were Born? Date in 1000 Days?
- Include PHP Files
- File Handling (1): Open – Read – Write -
- File Handling (2): Open – Read – Write -
- Upload Files Using PHP (1) – Activity: Upload PDF and Text Files Less than 3Mo.
- Upload Files Using PHP (2) – Activity: Upload PDF and Text Files Less than 3Mo.
- Cookies
- Error Handling (1)
- Error Handling (2) – Activity: Log PHP Errors in a File / Trigger Error Emails
- Sessions
-
MySQL
- Introduction
- Create a Database Using PHP MYADMIN
- Remote MySQL (1)
- Remote MySQL (2)
- Create a Database Using PHP and MySQL
- Add a Table to a Database
- Populate a Database Table
- Activity: Populate Database Once the User Submits a Form
- Activity: Populate Database Once the User Submits a Form (2)
- Activity: Populate an HTML Table Using Database Data (1)
- Activity: Populate an HTML Table Using Database Data (2)
- Update Database Data
- Delete Database Data
-
Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL, AJAX)
- Introduction
- App Skeleton and Decoration (1) – Landing Page
- App Skeleton and Decoration (2) - Landing Page
- App Skeleton and Decoration (3) - Landing Page
- App Skeleton and Decoration (4) – Landing Page
- App Skeleton and Decoration (5) - My Notes Page
- App Skeleton and Decoration (6) - Profile Page
- App Logic - Signup, Login, Remember Me, Forgot Password
- Signup/Login Code Structure (1)
- Signup/Login Code Structure (2)
- Signup Code (1)
- Signup Code (2)
- Signup Code (3)
- Signup Code (4)
- Signup Code (5)
- Login Code
- "Remember me" Code (1)
- "Remember me" Code (2)
- "Remember me" Code (3) and Logout Code
- "Forgot Password" Code (1)
- "Forgot Password" Code (2)
- "Forgot Password" Code (3)
- "Forgot Password" Code (4)
- Notes Management: Logic
- Notes Management: Code Structure
- Load Notes: Code (1)
- Load Notes: Code (2)
- Create Notes: Code (1)
- Create Notes: Code (2)
- Edit Notes: Code (1)
- Edit Notes: Code (2)
- Delete Notes: Code (1)
- Delete Notes: Code (2)
- Update Username Code (1)
- Update Username Code (2)
- Update Password Code (1)
- Update Password Code (2)
- Update Email Code (1)
- Update Email Code (2)
-
WordPress (3 Professional Webpages: Blog + About Page + Contact Page)
- Introduction
- Installation – Activity: Create Your First Blog
- Blog Posts and Comments
- Themes
- Pages and Menus
- Customize Pages (1)
- Customize Pages (2)
- Custom CSS
- Plugins
- Activity: Beautiful About Page (Add Content to a WordPress Page)
- Activity: Beautiful About Page (Typography)
- Activity: Beautiful About Page (Logos)
- Activity: Beautiful About Page (Buttons)
- Activity: Create an Awesome Contact Page with a Google Map and Contact Form
-
Google Maps API
- Introduction and Embed Google Map to your Website
- Markers and InfoWindows
- Show, Hide, or Delete Markers
- Animated Drop of Markers
- Direction Service - Activity: Driving Distance and Time Between New York and Toronto
- Geocoding Using the JavaScript API - Activity: Get Geocoordinates of an Address
- Geocoding Using the Geocoding API (1) - Activity: Format Address and Get Postcode
- Geocoding Using the Geocoding API (2) - Activity: Format Address and Get Postcode
- Nearby Search
- Autocomplete
-
Professional Project: Distance Between Cities (HTML, CSS, jQuery, Google Maps)
-
Professional Project: Website with Social Widgets (Facebook, Google+ and Twitter)
-
IOS and Android Mobile Applications Using jQuery Mobile
-
Professional Project: Speed Reader for IOS and Android
- Introduction
- App Skeleton and Decoration (1)
- App Skeleton and Decoration (2)
- Logic of the App Using an Illustrative Flowchart
- Start Reading (1)
- Start Reading (2)
- Pause, Resume, Restart
- Change the Font Size
- Change the Reading Speed
- Control Reading Progress: Go Backward and Forward
- Publish Your App to Google Play
- Publish Your App to the IOS App Store (1)
- Publish Your App to the IOS App Store (2)
-
Professional Project: Car Sharing Website (JavaScript, PHP, MySQL, AJAX, JSON)
- Introduction
- Signup/Login Code (1)
- Signup/Login Code (2)
- Signup/Login Code (3)
- Search Page Skeleton and Decoration (1)
- Search Page Skeleton and Decoration (2)
- Search Page Skeleton and Decoration (3)
- Search Page Skeleton and Decoration (4)
- Search Page Skeleton and Decoration (5)
- Profile Picture Code (1)
- Profile Picture Code (2)
- Profile Picture Code (3)
- Profile Picture Code (4)
- Trips Page Skeleton and Decoration (1)
- Trips Page Skeleton and Decoration (2)
- Trips Page Skeleton and Decoration (3)
- Website Logic
- "Create a Trip" Code (1)
- "Create a Trip" Code (2)
- "Create a Trip" Code (3)
- "Create a Trip" Code (4)
- "Load Trips" Code (1)
- "Load Trips" Code (2)
- "Edit/Delete Trips" Code (1)
- "Edit/Delete Trips" Code (2)
- "Edit/Delete Trips" Code (3)
- "Edit/Delete Trips" Code (4)
- "Search Trips" Code (1)
- "Search Trips" Code (2)
- "Search Trips" Code (3)
- "Search Trips" Code (4)
- "Search Trips" Code (5)
- "Search Trips" Code (6)
- "Search Trips" Code (7)
- "Search Trips" Code (8)
- "Spinner" Code (1)
- "Spinner" Code (2)
- Finishing Touches and Congratulations
About this video
The course will take you from learning the basics to mastering the most advanced web development techniques. Taking this course will help you become ready to build powerful and responsive websites to a highly professional degree using today’s most advanced and up-to-date web technologies within a few weeks from now. In order to guarantee the success of your learning experience, this course is divided into perfectly structured chapters consisting of 100 hours of hands-on videos.
Each chapter covers one of the major web technologies and will take you from the basics to advanced skills. You will first learn the basic concepts, and straight after that apply them in easy practical examples. Then you will easily navigate to more advanced concepts and use them to build more complex applications. Once you have finished the chapter, you will then move to a bigger challenge where you will confidently build a “real-life full professional project”, using the skills you acquired in that chapter combined with the previous ones.
By the end of this course, you will have developed over 15 highly professional websites, games, and mobile apps that can be used to take your career to the next level.
The complete code bundle for this course is available at https://github.com/packtpublishing/the-complete-web-development-course---build-15-projects
- Publication date:
- June 2018
- Publisher
- Packt
- Duration
- 90 hours 0 minutes
- ISBN
- 9781789345445
Latest Reviews
(3 reviews total)