10 Mega Responsive Websites with HTML, CSS, and JavaScript

10 Mega Responsive Websites with HTML, CSS, and JavaScript

by George Lomidze
Released September 2021
Publisher(s): Packt Publishing
ISBN: 9781801073578

Watch 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

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.

What You Will Learn

  • Build 10 Projects with pure HTML, CSS, and JavaScript
  • Learn modern techniques and tricks of web designing
  • Explore modern HTML5, CSS3, and JavaScript features
  • Explore CSS3 animations, transforms, and transitions
  • Learn how to create modern web design templates

Audience

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.

About The Author

George Lomidze: George Lomidze is a full-stack web developer/designer, co-founder at ‘Code and Create’, and an author of several best-selling courses on Udemy. He is excited that he has a chance to help people learn one of the most interesting and hottest fields in the world.

He specializes in the following technologies: HTML, CSS, SASS, Bootstrap, JavaScript, React, React Native, NodeJS, MongoDB, Express, and many more. He is looking forward to seeing you follow his courses and helping you become a professional web developer.

He is also the founder of MicroGrinder Poker School, an online poker school dedicated to micro stakes poker players, where he provides a wide array of free and low-cost poker resources and poker training, including poker strategy articles and poker training videos series. He is also the Amazon #1 best-selling author of Essential Poker Math, Expanded Edition.

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