The Complete Web Development Course - Build 15 Projects

The Complete Web Development Course - Build 15 Projects

by Issam Baou
Released June 2018
Publisher(s): Packt Publishing
ISBN: 9781789345445

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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.

Table of contents

  1. Chapter 1 : Introduction
    1. Welcome to the Course
    2. Your Journey Inside the Course
    3. Structure of a Website
    4. Your First Website
    5. Get Your Free Unlimited Web Hosting
    6. Share Your Website with the World (1)
    7. Share Your Website with the World (2) - Cyberduck Version
    8. Share Your Website with the World (2) - FileZilla Version
    9. Headings
    10. Paragraphs
    11. Links
    12. Images
    13. Inline Versus Block Elements
    14. Iframes - Activity: Embed a Nice Relaxing YouTube Video to Your Website
    15. Unordered Lists
    16. Ordered Lists
    17. Description: Lists
    18. Tables
    19. Entities
    20. Forms (1) - Activity: Create a Simple Login Form
    21. Forms (2) - Activity: Create a Marketplace Checkout Form
    22. Text Decoration
    23. Comments
  2. Chapter 2 : CSS
    1. Introduction
    2. Inline CSS
    3. Internal CSS
    4. External CSS
    5. Classes and IDs
    6. Div and Span
    7. Box Model
    8. Box Model Padding
    9. Box Model: Border
    10. Box Model: Outline
    11. Box Model: Margin
    12. Background
    13. Floating
    14. Positioning
    15. Display
    16. Text Decoration
    17. Text Align
    18. Text Font
    19. Text Effects
    20. Image Sprites
    21. Image Opacity
    22. Styling Lists
    23. Styling Links
    24. Gradients
    25. 2D Transforms
    26. 3D Transforms
    27. Transitions
    28. Animations
  3. Chapter 3 : Professional Project: Mathematics Tutorials Website (HTML and CSS)
    1. Introduction
    2. Header (1)
    3. Header (2)
    4. Menu
    5. Introduction Box
    6. Sidebars (1)
    7. Sidebars (2)
    8. Footer and Congratulations
  4. Chapter 4 : Advanced CSS with Flexbox, Grid, and SASS
    1. Flexbox: Introduction
    2. Flexbox: Basic Flexbox
    3. Flexbox: Align Flex Items
    4. Flexbox: Align Flex Lines
    5. Flexbox: Resize Flex Items (1)
    6. Flexbox: Resize Flex Items (2)
    7. Flexbox Application: Photo Gallery (1)
    8. Flexbox Application: Photo Gallery (2)
    9. Flexbox Application: Amazon Checkout (1)
    10. Flexbox Application: Amazon Checkout (2)
    11. Flexbox Application: Amazon Checkout (3)
    12. Flexbox Application: Math Website (1)
    13. Flexbox Application: Math Website (2)
    14. Flexbox Application: Math Website (3)
    15. CSS Grid: Introduction and Basic Grid Template
    16. CSS Grid: Implicit Versus Explicit Grid
    17. CSS Grid: Grid Areas and Responsive Design
    18. CSS Grid: Master the "grid-column" Property
    19. CSS Grid: Grid Coordinates
    20. CSS Grid: Align Grid Items
    21. CSS Grid Application: Photo Gallery
    22. CSS Grid Application: Picture Grid
    23. Sass: Introduction - Installation - Nesting Syntax
    24. Sass: .scss Versus .sass - Variables
    25. Sass: @import and @extend directives
    26. Sass: Mixins - Operators - Functions
  5. Chapter 5 : JavaScript
    1. Introduction
    2. Buttons
    3. Change HTML Content
    4. Change HTML Style
    5. Variables and Data Types
    6. Change HTML Using Variables - Activity: Random Color Generator
    7. Functions: Activity: Swap the Content of Two divs
    8. Objects
    9. Create Objects Using the "new" Keyword
    10. Object Constructors
    11. Arrays
    12. If and Switch Statements - Activity: Motorway Speed Control
    13. For Loops
    14. While Loops - Activity: Spend $1,000 Randomly in a Marketplace
    15. Regular Expressions
    16. Errors (1)
    17. Errors (2) - Activity: Password Validation
    18. Set Interval and Set Timeout - Activity: Create a Simple Counter
    19. Window and Screen
    20. Alert Boxes
    21. Cookies
  6. Chapter 6 : Professional Project: Math Game (HTML, CSS, and JavaScript)
    1. Introduction
    2. Page Structure and Styling (1)
    3. Page Structure and Styling (2)
    4. Page Structure and Styling (3)
    5. Page Structure and Styling (4)
    6. Game Logic using an illustrative flowchart
    7. JavaScript Code (1)
    8. JavaScript Code (2)
    9. JavaScript Code (3)
    10. JavaScript Code (4) and Congratulations
  7. Chapter 7 : jQuery
    1. Introduction and Loading jQuery
    2. Select HTML Elements (1)
    3. Select HTML Elements (2)
    4. Respond to Events
    5. Change HTML Content and Attributes (1)
    6. Change HTML Content and Attributes (2)
    7. Change Styling (1)
    8. Change Styling (2) - Activity: Random Position and Color Generator
    9. jQuery Effects
    10. Ajax
    11. jQuery UI Introduction
    12. Draggable and Droppable (1) - Activity: Leave Me Alone! Please Drop Me!
    13. Draggable and Droppable (2) - Activity: Drag Items to Your Basket
    14. Resizable
    15. Selectable - Activity: Append Selected Car Makes to a Box
    16. Sortable - Activity: Sort and Exchange Car Makes Between Two Groups
    17. Accordion - Activity: Create a Resizable Accordion with Collapsible Sections
    18. Autocomplete - Activity: City Input with Prepopulated Options
    19. Button
    20. Date Picker - Activity: Outbound and Return Flight Date Picker Just Like Expedia
    21. Dialog - Activity: Are You Sure You Want to Go to the Previous Page?
    22. Menu
    23. Progress Bar - Activity: Animated Progress Bar Filled from 0% to 100%
    24. Select Menu
    25. Slider - Activity: Car Mileage Range Using a Slider
    26. More Widgets: Spinners, Tabs, and Tooltips
  8. Chapter 8 : Professional Project: Fruits Slice Game (HTML, CSS, and jQuery)
    1. Introduction
    2. Page Structure and Styling
    3. Game Logic Using an Illustrative Flowchart
    4. jQuery Code (1)
    5. jQuery Code (2)
    6. jQuery Code (3)
    7. jQuery Code (4)
  9. Chapter 9 : Twitter Bootstrap
    1. Introduction
    2. Grid System
    3. Typography
    4. Tables
    5. Forms (1) - Activity: Inline and Horizontal Responsive Login Forms
    6. Forms (2)
    7. Forms (3)
    8. Buttons
    9. Images
    10. Navs - Activity: Website Design Using Nav Tabs and Nav Pills
    11. Navbars - Activity: Website Design Using a Responsive/Collapsible Navigation Bar
    12. Pagination - Activity: Pagination and Pager Examples Such as Google/Ebay
    13. Jumbotron
    14. Thumbnails
    15. Dropdown Menus
    16. Modals (1) - Activity: I Have an Inquiry About My Order
    17. Modals (2) - Activity: I Have an Inquiry About My Order
    18. Scrollspy
    19. Tabs
    20. Tooltips
    21. Popovers - Activity: Create a Popover Just Like the One You See on an IPAD
    22. Alerts – Activity: Create an Alert Box to Show a Warning or Success Message
    23. Button Plugin - Activity: Loading … Download Complete
    24. Collapse Plugin
    25. Carousels - Activity: Create an Interactive Carousel Slider
    26. Affix plugin - Activity: Interactive Website with Content Affixed to a Menu
  10. Chapter 10 : Professional Project: App Landing Page (HTML, CSS, and Bootstrap)
    1. Introduction
    2. Header and Featured Content (1)
    3. Header and Featured Content (2)
    4. Header and Featured Content (3)
    5. Trial Section, Footer and Congratulations
  11. Chapter 11 : Professional Project: Company Website (HTML, CSS, and Bootstrap)
    1. Introduction
    2. Structure of Our Work
    3. Background
    4. Navbar
    5. Header and Icons Section
    6. Contact Button and Footer
  12. Chapter 12 : Professional Project: Our Lovely Course (HTML, CSS, jQuery, and Bootstrap)
    1. Introduction
    2. Structure of Our Work
    3. Add a Background Video
    4. Navigation Bar with Advanced Styling
    5. Home Section
    6. About Section
    7. Carousel Slider (1)
    8. Carousel Slider (2)
    9. Adapt for Small Devices
    10. Add ScrollSpy Feature to Navbar and Congratulations'/
  13. Chapter 13 : Professional Project: Stopwatch App (HTML, CSS, jQuery, and Bootstrap)
    1. Introduction
    2. App Skeleton and Decoration (1)
    3. App Skeleton and Decoration (2)
    4. App Logic Using an Illustrative Flowchart
    5. jQuery Code (1)
    6. jQuery Code (2)
    7. jQuery Code (3)
  14. Chapter 14 : Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas, Local Storage)
    1. Introduction
    2. App Skeleton and Decoration (1)
    3. App Skeleton and Decoration (2)
    4. App Skeleton and Decoration (3)
    5. Learn HTML5 Canvas
    6. App Logic Using an Illustrative Flowchart
    7. jQuery Code Structure
    8. jQuery Code (1)
    9. jQuery Code (2)
    10. jQuery Code (3)
  15. Chapter 15 : ES6 - Modern JavaScript
    1. Introduction to Modern JavaScript (ES6)
    2. Variables and Scoping: Review of "var"
    3. Variables and Scoping: Let Scope and Temporal Dead Zone
    4. Block Scoping in ES6
    5. Functions and Block Scoping
    6. Functions and Block Scoping – use let
    7. Let Scope Versus Closures
    8. Closures Challenge
    9. Read Only Variables - const
    10. New Features that Make Your Life Easier: Template Literals
    11. New Features that Make Your Life Easier: Arrow Functions – 'this' Lexical Scope
    12. Destructuring - Arrays
    13. Destructuring - Objects
    14. Destructuring - Functions
    15. Functions – Default Parameter Values
    16. Functions – Rest Parameters
    17. Spread Operator
    18. Objects New Features
    19. Iteration: For Of loop
    20. Iterators - next() - Generators
    21. Maps - Iteration
    22. Sets - Iteration
    23. Sets – Challenge: Intersection and Difference
    24. Symbols
    25. Symbol.iterator
    26. Array.from: Collections, Strings, Arguments
    27. Array.from: Optional Map, Length Property, Maps and Sets
    28. Array.of
    29. More Array Methods
    30. ES6 Classes: Back to ES5 Constructors
    31. ES6 Classes: Syntax
    32. ES6 Classes: Static Methods
    33. ES6 Classes: Getters and Setters
    34. Class Inheritance – extends - super
  16. Chapter 16 : "Front End" Versus "Back End"
    1. Understand the Back End (1)
    2. Understand the Back End (2)
  17. Chapter 17 : Node.js - Introduction and Installation
    1. Introduction to Node.js
    2. Node.js Installation + REPL (Read-Eval-Print-Loop)
  18. Chapter 18 : The "super" Command Line Crash Course
    1. Command Line Crash Course (1)
    2. Command Line Crash Course (2)
    3. Command Line Crash Course (3)
    4. Command Line Crash Course (4)
  19. Chapter 19 : Node.js – Let's Dive in (using ES6 + ES7)
    1. Your First Node Application
    2. File Exports
    3. HTTP Built-In Module (1)
    4. HTTP Built-In Module (2)
    5. HTTP Built-In Module (3)
    6. Fs Built-In Module - Blocking Mode
    7. Fs Built-In Module - Non-Blocking Mode
    8. Fs Built-In Module - Use ES6 Promises
    9. Fs Built-In Module – Use ES7 Async Await
    10. Fs Built-In Module - More Features
  20. Chapter 20 : Professional Project: Online File Explorer App (Pure Node.js, Bootstrap 4)
    1. Project Introduction: Online File Explorer App (Pure Node.js, Bootstrap 4)
    2. App Skeleton and Decoration
    3. App Logic
    4. Create the Server
    5. Decode the Path Name and Convert it to a Full Static Path
    6. Display Folder Content and Print the Title
    7. Show the Path Inside a "Breadcrumb"
    8. Loop Through Folder Elements
    9. Print Icons – Get Introduced to the child_process Module
    10. Calculate Folders' Size Using the child_process Module
    11. Convert Folders' Size to Bytes – Retrieve Items' Last Modified Time
    12. Calculate the Size of Files
    13. Get the Mime Type of Files
    14. Serve Files to the Client
    15. Serve PDF Files on the Browser – Serve Media Content in Chunks Using a Stream
    16. Re-Order Folder Elements by Name
    17. Re-Order Folder Elements by Name (2)
    18. Add the Up and Down Arrows After Sorting Elements by Name
    19. Sort Elements by Size and Last Modified
    20. Fix Projects Bugs
  21. Chapter 21 : Git and GitHub
    1. Introduction to Version Control Using Git
    2. Git Using the Command Line
    3. Git Branching and Merging
    4. GitHub – Introduction
    5. GitHub - Cloning, Forking, and Pull Requests (1)
    6. GitHub - Cloning, Forking, and Pull Requests (2)
    7. GitHub - Cloning, Forking, and Pull Requests (3)
  22. Chapter 22 : Deploy Your App to Heroku
    1. Deploy Your App to Heroku
  23. Chapter 23 : PHP
    1. Introduction
    2. Embed PHP in HTML
    3. PHP Variables
    4. Data Types: Strings
    5. Data Types: Integers and Floats
    6. Data Types: Booleans
    7. Data Types: Arrays
    8. Data Types: Objects
    9. Data Types: NULL
    10. Data Types: Resources
    11. String Functions
    12. If and Switch Statements
    13. For Loops
    14. While Loops
    15. Functions
    16. GET and POST
    17. Array Functions (1)
    18. Array Functions (2)
    19. Send Emails – Activity: Send a Styled Email in HTML Format
    20. Filter User Inputs (1) – Protect Yourself from Hackers
    21. Filter User Inputs (2) – User Input Validation
    22. Activity: Create a Responsive Contact Form Using PHP and Bootstrap (1)
    23. Activity: Create a Responsive Contact Form Using PHP and Bootstrap (2)
    24. Activity: Create a Responsive Contact Form Using PHP and Bootstrap (3)
    25. Date and Time (1)
    26. Date and Time (2) - Activity: Day of the Week You Were Born? Date in 1000 Days?
    27. Include PHP Files
    28. File Handling (1): Open – Read – Write - Close
    29. File Handling (2): Open – Read – Write -
    30. Upload Files Using PHP (1) – Activity: Upload PDF and Text Files Less than 3Mo.
    31. Upload Files Using PHP (2) – Activity: Upload PDF and Text Files Less than 3Mo.
    32. Cookies
    33. Error Handling (1)
    34. Error Handling (2) – Activity: Log PHP Errors in a File / Trigger Error Emails
    35. Sessions
  24. Chapter 24 : MySQL
    1. Introduction
    2. Create a Database Using PHP MYADMIN
    3. Remote MySQL (1)
    4. Remote MySQL (2)
    5. Create a Database Using PHP and MySQL
    6. Add a Table to a Database
    7. Populate a Database Table
    8. Activity: Populate Database Once the User Submits a Form
    9. Activity: Populate Database Once the User Submits a Form (2)
    10. Activity: Populate an HTML Table Using Database Data (1)
    11. Activity: Populate an HTML Table Using Database Data (2)
    12. Update Database Data
    13. Delete Database Data
  25. Chapter 25 : Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL, AJAX)
    1. Introduction
    2. App Skeleton and Decoration (1) – Landing Page
    3. App Skeleton and Decoration (2) - Landing Page
    4. App Skeleton and Decoration (3) - Landing Page
    5. App Skeleton and Decoration (4) – Landing Page
    6. App Skeleton and Decoration (5) - My Notes Page
    7. App Skeleton and Decoration (6) - Profile Page
    8. App Logic - Signup, Login, Remember Me, Forgot Password
    9. Signup/Login Code Structure (1)
    10. Signup/Login Code Structure (2)
    11. Signup Code (1)
    12. Signup Code (2)
    13. Signup Code (3)
    14. Signup Code (4)
    15. Signup Code (5)
    16. Login Code
    17. "Remember me" Code (1)
    18. "Remember me" Code (2)
    19. "Remember me" Code (3) and Logout Code
    20. "Forgot Password" Code (1)
    21. "Forgot Password" Code (2)
    22. "Forgot Password" Code (3)
    23. "Forgot Password" Code (4)
    24. Notes Management: Logic
    25. Notes Management: Code Structure
    26. Load Notes: Code (1)
    27. Load Notes: Code (2)
    28. Create Notes: Code (1)
    29. Create Notes: Code (2)
    30. Edit Notes: Code (1)
    31. Edit Notes: Code (2)
    32. Delete Notes: Code (1)
    33. Delete Notes: Code (2)
    34. Update Username Code (1)
    35. Update Username Code (2)
    36. Update Password Code (1)
    37. Update Password Code (2)
    38. Update Email Code (1)
    39. Update Email Code (2)
  26. Chapter 26 : WordPress (3 Professional Webpages: Blog + About Page + Contact Page)
    1. Introduction
    2. Installation – Activity: Create Your First Blog
    3. Blog Posts and Comments
    4. Themes
    5. Pages and Menus
    6. Customize Pages (1)
    7. Customize Pages (2)
    8. Custom CSS
    9. Plugins
    10. Activity: Beautiful About Page (Add Content to a WordPress Page)
    11. Activity: Beautiful About Page (Typography)
    12. Activity: Beautiful About Page (Logos)
    13. Activity: Beautiful About Page (Buttons)
    14. Activity: Create an Awesome Contact Page with a Google Map and Contact Form
  27. Chapter 27 : Google Maps API
    1. Introduction and Embed Google Map to your Website
    2. Markers and InfoWindows
    3. Show, Hide, or Delete Markers
    4. Animated Drop of Markers
    5. Direction Service - Activity: Driving Distance and Time Between New York and Toronto
    6. Geocoding Using the JavaScript API - Activity: Get Geocoordinates of an Address
    7. Geocoding Using the Geocoding API (1) - Activity: Format Address and Get Postcode
    8. Geocoding Using the Geocoding API (2) - Activity: Format Address and Get Postcode
    9. Nearby Search
    10. Autocomplete
  28. Chapter 28 : Professional Project: Distance Between Cities (HTML, CSS, jQuery, Google Maps)
    1. Introduction
    2. App Skeleton and Decoration
    3. App Logic Using an Illustrative Flowchart
    4. JavaScript Code
  29. Chapter 29 : Professional Project: Website with Social Widgets (Facebook, Google+ and Twitter)
    1. Introduction
    2. App Skeleton and Decoration
    3. Facebook Widgets
    4. Google+ Widgets
    5. Tweet Button
    6. Twitter Timeline
  30. Chapter 30 : IOS and Android Mobile Applications Using jQuery Mobile
    1. Introduction
    2. Pages, Dialogs, and Transitions
    3. Navbars
    4. Grid System
    5. List Views
    6. Form Inputs
    7. Events
  31. Chapter 31 : Professional Project: Speed Reader for IOS and Android
    1. Introduction
    2. App Skeleton and Decoration (1)
    3. App Skeleton and Decoration (2)
    4. Logic of the App Using an Illustrative Flowchart
    5. Start Reading (1)
    6. Start Reading (2)
    7. Pause, Resume, Restart
    8. Change the Font Size
    9. Change the Reading Speed
    10. Control Reading Progress: Go Backward and Forward
    11. Publish Your App to Google Play
    12. Publish Your App to the IOS App Store (1)
    13. Publish Your App to the IOS App Store (2)
  32. Chapter 32 : Professional Project: Car Sharing Website (JavaScript, PHP, MySQL, AJAX, JSON)
    1. Introduction
    2. Signup/Login Code (1)
    3. Signup/Login Code (2)
    4. Signup/Login Code (3)
    5. Search Page Skeleton and Decoration (1)
    6. Search Page Skeleton and Decoration (2)
    7. Search Page Skeleton and Decoration (3)
    8. Search Page Skeleton and Decoration (4)
    9. Search Page Skeleton and Decoration (5)
    10. Profile Picture Code (1)
    11. Profile Picture Code (2)
    12. Profile Picture Code (3)
    13. Profile Picture Code (4)
    14. Trips Page Skeleton and Decoration (1)
    15. Trips Page Skeleton and Decoration (2)
    16. Trips Page Skeleton and Decoration (3)
    17. Website Logic
    18. "Create a Trip" Code (1)
    19. "Create a Trip" Code (2)
    20. "Create a Trip" Code (3)
    21. "Create a Trip" Code (4)
    22. "Load Trips" Code (1)
    23. "Load Trips" Code (2)
    24. "Edit/Delete Trips" Code (1)
    25. "Edit/Delete Trips" Code (2)
    26. "Edit/Delete Trips" Code (3)
    27. "Edit/Delete Trips" Code (4)
    28. "Search Trips" Code (1)
    29. "Search Trips" Code (2)
    30. "Search Trips" Code (3)
    31. "Search Trips" Code (4)
    32. "Search Trips" Code (5)
    33. "Search Trips" Code (6)
    34. "Search Trips" Code (7)
    35. "Search Trips" Code (8)
    36. "Spinner" Code (1)
    37. "Spinner" Code (2)
    38. Finishing Touches and Congratulations

Product information

  • Title: The Complete Web Development Course - Build 15 Projects
  • Author(s): Issam Baou
  • Release date: June 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789345445