10 Mega Responsive Websites with HTML, CSS, and JavaScript

Video description

If you want to build and customize your portfolio, become an experienced developer, and get hired, then this is the right course for you

About This Video

  • Build websites with three core technologies
  • Learn how to make a modern website with beautiful effects and designs
  • Explore the many ways by which one can make the project responsive

In Detail

In this course, we will build together 10 mega and complete responsive websites with three core technologies—HTML, CSS, and JS. If you have some basic knowledge of these technologies and still have some trouble building the websites, or if you want to level up your developer and designer skills, then you have come to the right place.

We have created this course to give students the best experience in three core technologies and give them the opportunity to create the best-designed templates that will allow them to excite their clients.

We will build 10 different complete websites, and not only just parts of them, from scratch. They will be full of modern, nice, and beautiful effects and designs. We will start with simple projects, and we will go through some advanced parts as well.

By mastering just these core technologies of front-end web development, you can create awesome and modern themes. Also, you will have enough knowledge to move on and learn about other technologies such as some front-end frameworks and libraries, which nowadays are popular and in high demand.

Who this book is for

This course is ideal for individuals who want to learn three core technologies—HTML, CSS, and JavaScript. It is also ideal for students who have basic knowledge of front-end web development and want to develop their skills, and for those who want to develop web design skills.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Welcome
    1. Introduction
    2. Setup
  2. Chapter 2 : Project 1 - Foods
    1. Project Preview
    2. Create HTML Markup for Landing and Define Common Styles
    3. Style Landing Page and Create Slideshow
    4. Create and Style 3D Cards
    5. Create and Style Foods Gallery
    6. Create and Customize Footer
    7. Create and Style Fixed Navbar
    8. Make Project Responsive
  3. Chapter 3 : Project 2 – Creative Design
    1. Project Preview
    2. Create HTML Markup for Landing and Define Common Styles
    3. Create "Waves" Effect using Floating Background
    4. Customize Landing Page
    5. Create and Customize Customers Section
    6. Create and Style Team Section
    7. Create and Style Contact Section and Footer
    8. Create Scroll-Up Button and Make Navbar Work
    9. Make Project Responsive
  4. Chapter 4 : Project 3 – Business Agency Website
    1. Project Preview
    2. Create and Customize Landing
    3. Add Animations to Landing
    4. Create and Customize Navbar
    5. Make Navbar Work
    6. Create and Style About Us Section
    7. Make Custom Video Controls Work
    8. Create and Customize Pricing Cards Section
    9. Make Pricing Cards Work using Swiper.js
    10. Create and Style Contact Section
    11. Create and Style Footer
    12. Make Project Responsive
  5. Chapter 5 : Project 4 – Apple eCommerce
    1. Project Preview
    2. Create and Customize Landing Page
    3. Create Background Images Slideshow
    4. Create and Customize Cube
    5. Create and Customize Cube Controllers
    6. Make Cube Work
    7. Create and Customize iPhones Section
    8. Create and Style MacBook Section - Part 1
    9. Create and Style MacBook Section - Part 2
    10. Create and Style Watches Section
    11. Make Watches section Work
    12. Create and Style AirPods Section
    13. Create and Customize Footer
    14. Make Project Responsive
  6. Chapter 6 : Project 5 – Personal Portfolio
    1. Project Preview
    2. Create and Customize Landing
    3. Create and Style Navigation
    4. Create and Customize Progress Bars
    5. Create and Customize Projects Section
    6. Create and Style Contact Section
    7. Create and Style Footer
    8. Make Navbar and Progress Bars Work Using JavaScript
    9. Make Project Responsive
  7. Chapter 7 : Project 6 – Classic Cars
    1. Project Preview
    2. Create HTML Markup for Landing and Define Common Styles
    3. Create and Make Navigation Work
    4. Style and Make Hamburger Menu Work
    5. Create and Customize Landing Page
    6. Create and Customize Popular Cars Section
    7. Create and Style Video Gallery
    8. Create and Style Image Gallery
    9. Create and Customize Contact Section and Footer
    10. Make Project Responsive
  8. Chapter 8 : Project 7 – Architect Website
    1. Project Preview
    2. Create and Customize Landing Page
    3. Create and Make Sidebar Work
    4. Create and Style About Us Section Using CSS Grid
    5. Create and Customize Cards with Tilt.js
    6. Create and Style Contact Section
    7. Make Project Responsive and Create Loading Spinner
  9. Chapter 9 : Project 8 – The Road
    1. Project Preview
    2. Create HTML Markup for Landing and Common Styles
    3. Customize and Make Landing Page Work
    4. Create and Style the Most Popular Tours Section
    5. Create and Customize Testimonials Section with Video Background
    6. Create and Customize Contact Section with Animated Background
    7. Create and Style Footer
    8. Create and Make Navigation Work
    9. Make Project Responsive
  10. Chapter 10 : Project 9 – The Wine House
    1. Project Preview
    2. Create and Customize First, Second, and Third Sections
    3. Create and Customize Fourth and Fifth Sections
    4. Create and Style Navbar and Make Progress Bars Work
    5. Create Horizontal Scroll Effect with JavaScript
    6. Make Progress Bar Work with JavaScript
    7. Make Project Responsive
  11. Chapter 11 : Project 10 – PayPal Clone
    1. Project Preview
    2. Create and Style Landing Page - Part 1
    3. Create and Style Landing Page - Part 2
    4. Create and Make Dropdown Menus work
    5. Create and Customize Services Section
    6. Create and Style Features Section
    7. Create and Style Get Started Section
    8. Create and Style Footer
    9. Create and Style Login Page
    10. Create and Style Sign Up Page
    11. Make the Project Responsive - Part 1
    12. Make the Project Responsive - Part 2
    13. Make the Project Responsive - Part 3
    14. Make the Project Responsive - Part 4

Product information

  • Title: 10 Mega Responsive Websites with HTML, CSS, and JavaScript
  • Author(s): George Lomidze
  • Release date: September 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781801073578