Video description
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.
What You Will Learn
- Create a professional math game using HTML5, CSS3, and JavaScript
- Create a professional fruits slice game using HTML5, CSS3, and jQuery
- Create a professional app landing page using HTML5, CSS3, and Bootstrap
- Create a professional company website using HTML5, CSS3, and Bootstrap
- Create a professional blog using WordPress
- Create a professional website with social widgets
Audience
This course is designed for people with no web development knowledge or experience. This course is also for people with web development knowledge but want to learn new skills and enrich their portfolio with 15 highly professional interactive websites, games, and mobile apps.
About The Author
Issab Baou: Issam Baou is the founder and director of Development Island based in Bedford, United Kingdom, and is specialized in providing the best technology courses on the Internet. He has two master’s degrees in engineering and management from Cranfield University (UK) and Ecole Centrale, Paris. He has worked for many world-class companies in the past, including Amadeus, Ford, and Airbus, in different roles including web development, consulting, simulation, and teaching. He has a solid and successful track record of teaching mathematics and web development.
Publisher resources
Table of contents
-
Chapter 1 : Introduction
- 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
-
Chapter 2 : 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
- Chapter 3 : Professional Project: Mathematics Tutorials Website (HTML and CSS)
-
Chapter 4 : 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
-
Chapter 5 : 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
- Chapter 6 : Professional Project: Math Game (HTML, CSS, and JavaScript)
-
Chapter 7 : 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
- Chapter 8 : Professional Project: Fruits Slice Game (HTML, CSS, and jQuery)
-
Chapter 9 : 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
- Chapter 10 : Professional Project: App Landing Page (HTML, CSS, and Bootstrap)
- Chapter 11 : Professional Project: Company Website (HTML, CSS, and Bootstrap)
- Chapter 12 : Professional Project: Our Lovely Course (HTML, CSS, jQuery, and Bootstrap)
- Chapter 13 : Professional Project: Stopwatch App (HTML, CSS, jQuery, and Bootstrap)
- Chapter 14 : Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas, Local Storage)
-
Chapter 15 : 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
- Chapter 16 : "Front End" Versus "Back End"
- Chapter 17 : Node.js - Introduction and Installation
- Chapter 18 : The "super" Command Line Crash Course
-
Chapter 19 : 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
-
Chapter 20 : 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
- Chapter 21 : Git and GitHub
- Chapter 22 : Deploy Your App to Heroku
-
Chapter 23 : 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 - Close
- 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
-
Chapter 24 : 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
-
Chapter 25 : 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)
-
Chapter 26 : 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
-
Chapter 27 : 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
- Chapter 28 : Professional Project: Distance Between Cities (HTML, CSS, jQuery, Google Maps)
- Chapter 29 : Professional Project: Website with Social Widgets (Facebook, Google+ and Twitter)
- Chapter 30 : IOS and Android Mobile Applications Using jQuery Mobile
-
Chapter 31 : 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)
-
Chapter 32 : 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
Product information
- Title: The Complete Web Development Course - Build 15 Projects
- Author(s):
- Release date: June 2018
- Publisher(s): Packt Publishing
- ISBN: 9781789345445
You might also like
video
The Full Stack Web Development
With the fast paced nature of technology, developers can no longer become experts in aspects of …
video
Tailwind CSS From Scratch - Learn by Building Projects
We will start with coding Sandbox and explore pages/videos for colors, typography, spacing, flex classes, and …
video
30+ Web Projects with HTML, CSS, and JavaScript
We will build together more than 30 different and creative web projects with three core technologies—HTML, …
video
Front-End Web Development with Modern HTML, CSS, and JavaScript
JavaScript code runs your browser as your HTML page loads. Adding JavaScript to your code can …