课程介绍

HTML、CSS 和 JavaScript。使用 HTML、CSS 和 JavaScript 构建 10 个大型且完整的响应式网站

你将会学到的

10 个使用纯 HTML、CSS 和 JavaScript 的项目

现代技术和技巧

现代 HTML5、CSS3 和 JavaScript 特性

CSS3 动画、变换和过渡

如何创建现代网页设计模板

要求

文本编辑器

现代网络浏览器

HTML、CSS 和 JavaScript 的基础知识

说明

类别中的 #1 最畅销课程

使用 HTML、CSS 和 JavaScript 构建 10 个大型响应式网站

欢迎来到这门课程，在这里你可以学习如何为你的网站创建现代且美观的设计模板

如果你想构建和定制自己的作品集，成为一名经验丰富的开发者，并获得聘用，那么这门课程非常适合你

我们将一起使用三种核心技术（HTML、CSS 和 JavaScript）构建 10 个大型且完整的响应式网站。如果你对这些技术有一定基础知识，但仍有些困难，或者想提升你的开发和设计技能，那么你来对地方了

我们创建这门课程是为了让学生在这三种核心技术中获得最佳体验，并让他们能够创建最佳设计模板，从而吸引他们的客户

我们将从头开始构建 10 个不同的完整网站，而不仅仅是其中的部分。它们将充满现代、美观的效果和设计。我们将从相对简单的项目开始，并逐步过渡到一些高级部分。可以保证的是，完成这门课程后，你将掌握前端网页开发

通过这门课程，你可以获得灵感，帮助你提升项目，并将其放入你的作品集中

仅仅掌握这些前端网页开发的核心技术，你就可以创建出色的现代主题，并轻松获得聘用。此外，你将有足够的知识继续学习其他技术，如流行的前端框架和库，这些技术如今非常受欢迎且需求很高

项目 1 – 美食

项目 2 – 创意设计

项目 3 – 商业代理网站

项目 4 – 苹果电子商务

项目 5 – 个人作品集

项目 6 – 经典汽车

项目 7 – 建筑网站

项目 8 – 旅途

项目 9 – 葡萄酒屋

项目 10 – PayPal 克隆

加入我们！

此课程面向哪些人：

希望在三种核心技术（HTML、CSS 和 JavaScript）中进行实践的学生

具有前端网页开发基础知识并希望提升技能的学生

希望提升网页设计技能的学生

课程目录

• 01 - Welcome
• 001 Introduction
• 001 Introduction.srt
• 001 Introduction_en.srt
• 002 Setup
• 002 Setup.srt
• 002 Setup_en.srt
• -
• 02 - Project 1 - Foods
• 001 Porject-1-Foods
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 002 Create HTML Markup for Landing and Define Common Styles
• 002 Create HTML Markup for Landing and Define Common Styles.srt
• 002 Create HTML Markup for Landing and Define Common Styles_en.srt
• 003 Style Landing Page and Create Slideshow
• 003 Style Landing Page and Create Slideshow.srt
• 003 Style Landing Page and Create Slideshow_en.srt
• 004 Create and Style 3D Cards
• 004 Create and Style 3D Cards.srt
• 004 Create and Style 3D Cards_en.srt
• 005 Create and Style Foods Gallery
• 005 Create and Style Foods Gallery.srt
• 005 Create and Style Foods Gallery_en.srt
• 006 Create and Customize Footer
• 006 Create and Customize Footer.srt
• 006 Create and Customize Footer_en.srt
• 007 Create and Style Fixed Navbar
• 007 Create and Style Fixed Navbar.srt
• 007 Create and Style Fixed Navbar_en.srt
• 008 Make Project Responsive
• 008 Make Project Responsive.srt
• 008 Make Project Responsive_en.srt
• -
• 03 - Project 2 - Creative Design
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 001 Project-2-Creative-Design
• 002 Create HTML Markup for Landing and Define Common Styles
• 002 Create HTML Markup for Landing and Define Common Styles.srt
• 002 Create HTML Markup for Landing and Define Common Styles_en.srt
• 003 Create Waves Effect using Floating Background
• 003 Create Waves Effect using Floating Background.srt
• 003 Create Waves Effect using Floating Background_en.srt
• 004 Customize Landing Page
• 004 Customize Landing Page.srt
• 004 Customize Landing Page_en.srt
• 005 Create and Customize Customers Section
• 005 Create and Customize Customers Section.srt
• 005 Create and Customize Customers Section_en.srt
• 006 Create and Style Team Section
• 006 Create and Style Team Section.srt
• 006 Create and Style Team Section_en.srt
• 007 Create and Style Contact Section and Footer
• 007 Create and Style Contact Section and Footer.srt
• 007 Create and Style Contact Section and Footer_en.srt
• 008 Create Scroll-up Button and Make Navbar Work
• 008 Create Scroll-up Button and Make Navbar Work.srt
• 008 Create Scroll-up Button and Make Navbar Work_en.srt
• 009 Make Project Responsive
• 009 Make Project Responsive.srt
• 009 Make Project Responsive_en.srt
• -
• 04 - Project 3 - Business Agency Website
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 001 Project-9-Business-Agency
• 002 Create and Customize Landing
• 002 Create and Customize Landing.srt
• 002 Create and Customize Landing_en.srt
• 002 MADE-Soulmaze
• 003 Add Animations to Landing
• 003 Add Animations to Landing.srt
• 003 Add Animations to Landing_en.srt
• 004 Create and Customize Navbar
• 004 Create and Customize Navbar.srt
• 004 Create and Customize Navbar_en.srt
• 005 Make Navbar Work
• 005 Make Navbar Work.srt
• 005 Make Navbar Work_en.srt
• 006 Create and Style About Us Section
• 006 Create and Style About Us Section.srt
• 006 Create and Style About Us Section_en.srt
• 007 Make Custom Video Controls Work
• 007 Make Custom Video Controls Work.srt
• 007 Make Custom Video Controls Work_en.srt
• 008 Create and Customize Pricing Cards Section
• 008 Create and Customize Pricing Cards Section.srt
• 008 Create and Customize Pricing Cards Section_en.srt
• 009 Make Pricing Cards Work using Swiper.js
• 009 Make Pricing Cards Work using Swiper.js.srt
• 009 Make Pricing Cards Work using Swiper.js_en.srt
• 010 Create and Style Contact Section
• 010 Create and Style Contact Section.srt
• 010 Create and Style Contact Section_en.srt
• 011 Create and Style Footer
• 011 Create and Style Footer.srt
• 011 Create and Style Footer_en.srt
• 012 Make Project Responsive
• 012 Make Project Responsive.srt
• 012 Make Project Responsive_en.srt
• -
• 05 - Project 4 - Apple eCommerce
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 001 Project-8-Apple-eCommerce
• 002 Clip-path.txt
• 002 Create and Customize Landing Page
• 002 Create and Customize Landing Page.srt
• 002 Create and Customize Landing Page_en.srt
• 003 Create Background Images Slideshow
• 003 Create Background Images Slideshow.srt
• 003 Create Background Images Slideshow_en.srt
• 004 Create and Customize Cube
• 004 Create and Customize Cube.srt
• 004 Create and Customize Cube_en.srt
• 005 Create and Customize Cube Controllers
• 005 Create and Customize Cube Controllers.srt
• 005 Create and Customize Cube Controllers_en.srt
• 006 Make Cube Work
• 006 Make Cube Work.srt
• 006 Make Cube Work_en.srt
• 007 Create and Customize iPhones Section
• 007 Create and Customize iPhones Section.srt
• 007 Create and Customize iPhones Section_en.srt
• 008 Create and Style MacBook Section - Part 1
• 008 Create and Style MacBook Section - Part 1.srt
• 008 Create and Style MacBook Section - Part 1_en.srt
• 009 Create and Style MacBook Section - Part 2
• 009 Create and Style MacBook Section - Part 2.srt
• 009 Create and Style MacBook Section - Part 2_en.srt
• 010 Create and Style Watches Section
• 010 Create and Style Watches Section.srt
• 010 Create and Style Watches Section_en.srt
• 011 Make Watches section Work
• 011 Make Watches section Work.srt
• 011 Make Watches section Work_en.srt
• 012 Create and Style AirPods Section
• 012 Create and Style AirPods Section.srt
• 012 Create and Style AirPods Section_en.srt
• 013 Create and Customize Footer
• 013 Create and Customize Footer.srt
• 013 Create and Customize Footer_en.srt
• 014 Make Project Responsive
• 014 Make Project Responsive.srt
• 014 Make Project Responsive_en.srt
• -
• 06 - Project 5 - Personal Portfolio
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 001 Project-3-Personal-Portfolio
• 002 Create and Customize Landing Page
• 002 Create and Customize Landing Page.srt
• 002 Create and Customize Landing Page_en.srt
• 003 Create and Style Navigation
• 003 Create and Style Navigation.srt
• 003 Create and Style Navigation_en.srt
• 004 Create and Customize Progress Bars
• 004 Create and Customize Progress Bars.srt
• 004 Create and Customize Progress Bars_en.srt
• 005 Create and Customize Projects Section
• 005 Create and Customize Projects Section.srt
• 005 Create and Customize Projects Section_en.srt
• 006 Create and Style Contact Section
• 006 Create and Style Contact Section.srt
• 006 Create and Style Contact Section_en.srt
• 007 Create and Style Footer
• 007 Create and Style Footer.srt
• 007 Create and Style Footer_en.srt
• 008 Make Navbar and Progress Bars Work Using JavaScript
• 008 Make Navbar and Progress Bars Work Using JavaScript.srt
• 008 Make Navbar and Progress Bars Work Using JavaScript_en.srt
• 009 Make Project Responsive
• 009 Make Project Responsive.srt
• 009 Make Project Responsive_en.srt
• -
• 07 - Project 6 - Classic Cars
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 001 Project-4-Classic-Cars
• 002 Create HTML Markup for Landing and Define Common Styles
• 002 Create HTML Markup for Landing and Define Common Styles.srt
• 002 Create HTML Markup for Landing and Define Common Styles_en.srt
• 003 Create and Make Navigation Work
• 003 Create and Make Navigation Work.srt
• 003 Create and Make Navigation Work_en.srt
• 004 Style and Make Hamburger Menu Work
• 004 Style and Make Hamburger Menu Work.srt
• 004 Style and Make Hamburger Menu Work_en.srt
• 005 Create and Customize Landing Page
• 005 Create and Customize Landing Page.srt
• 005 Create and Customize Landing Page_en.srt
• 006 Create and Customize Popular Cars Section
• 006 Create and Customize Popular Cars Section.srt
• 006 Create and Customize Popular Cars Section_en.srt
• 007 Create and Style Video Gallery
• 007 Create and Style Video Gallery.srt
• 007 Create and Style Video Gallery_en.srt
• 008 Create and Style Image Gallery
• 008 Create and Style Image Gallery.srt
• 008 Create and Style Image Gallery_en.srt
• 009 Create and Customize Contact Section and Footer
• 009 Create and Customize Contact Section and Footer.srt
• 009 Create and Customize Contact Section and Footer_en.srt
• 010 Make Project Responsive
• 010 Make Project Responsive.srt
• 010 Make Project Responsive_en.srt
• -
• 08 - Project 7 - Architect Website
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 001 Project-5-Architect-Website
• 002 Create and Customize Landing Page
• 002 Create and Customize Landing Page.srt
• 002 Create and Customize Landing Page_en.srt
• 003 Create and Make Sidebar Work
• 003 Create and Make Sidebar Work.srt
• 003 Create and Make Sidebar Work_en.srt
• 004 Create and Style About Us Section Using CSS Grid
• 004 Create and Style About Us Section Using CSS Grid.srt
• 004 Create and Style About Us Section Using CSS Grid_en.srt
• 005 Create and Customize Cards with Tilt.js
• 005 Create and Customize Cards with Tilt.js.srt
• 005 Create and Customize Cards with Tilt.js_en.srt
• 006 Create and Style Contact Section
• 006 Create and Style Contact Section.srt
• 006 Create and Style Contact Section_en.srt
• 007 Make Project Responsive and Create Loading Spinner
• 007 Make Project Responsive and Create Loading Spinner.srt
• 007 Make Project Responsive and Create Loading Spinner_en.srt
• -
• 09 - Project 8 - The Road
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 001 Project-6-The-Road
• 002 Create HTML Markup for Landing and Common Styles
• 002 Create HTML Markup for Landing and Common Styles.srt
• 002 Create HTML Markup for Landing and Common Styles_en.srt
• 003 Customize and Make Landing Page Work
• 003 Customize and Make Landing Page Work.srt
• 003 Customize and Make Landing Page Work_en.srt
• 004 Create and Style The Most Popular Tours Section
• 004 Create and Style The Most Popular Tours Section.srt
• 004 Create and Style The Most Popular Tours Section_en.srt
• 005 Create and Customize Testimonials Section with Video Background
• 005 Create and Customize Testimonials Section with Video Background.srt
• 005 Create and Customize Testimonials Section with Video Background_en.srt
• 006 Create and Customize Contact Section with Animated Background
• 006 Create and Customize Contact Section with Animated Background.srt
• 006 Create and Customize Contact Section with Animated Background_en.srt
• 007 Create and Style Footer
• 007 Create and Style Footer.srt
• 007 Create and Style Footer_en.srt
• 008 Create and Make Navigation Work
• 008 Create and Make Navigation Work.srt
• 008 Create and Make Navigation Work_en.srt
• 009 Make Project Responsive
• 009 Make Project Responsive.srt
• 009 Make Project Responsive_en.srt
• -
• 10 - Project 9 - The Wine House
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 001 Project-7-The-Wine-House
• 002 Create and Customize First, Second, and Third Sections
• 002 Create and Customize First, Second, and Third Sections.srt
• 002 Create and Customize First, Second, and Third Sections_en.srt
• 003 Create and Customize Fourth and Fifth Sections
• 003 Create and Customize Fourth and Fifth Sections.srt
• 003 Create and Customize Fourth and Fifth Sections_en.srt
• 004 Create and Style Navbar and Make Progress Bars Work
• 004 Create and Style Navbar and Make Progress Bars Work.srt
• 004 Create and Style Navbar and Make Progress Bars Work_en.srt
• 005 Create Horizontal Scroll Effect with JavaScript
• 005 Create Horizontal Scroll Effect with JavaScript.srt
• 005 Create Horizontal Scroll Effect with JavaScript_en.srt
• 006 Make Progress Bar Work with JavaScript
• 006 Make Progress Bar Work with JavaScript.srt
• 006 Make Progress Bar Work with JavaScript_en.srt
• 007 Make Project Responsive
• 007 Make Project Responsive.srt
• 007 Make Project Responsive_en.srt
• -
• 11 - Project 10 - PayPal Clone
• 001 Project Preview
• 001 Project Preview.srt
• 001 Project Preview_en.srt
• 001 Project-10-PayPal-Clone
• 002 Create and Style Landing Page - Part 1
• 002 Create and Style Landing Page - Part 1.srt
• 002 Create and Style Landing Page - Part 1_en.srt
• 003 Create and Style Landing Page - Part 2
• 003 Create and Style Landing Page - Part 2.srt
• 003 Create and Style Landing Page - Part 2_en.srt
• 004 Create and Make Dropdown Menus work
• 004 Create and Make Dropdown Menus work.srt
• 004 Create and Make Dropdown Menus work_en.srt
• 005 Create and Customize Services Section
• 005 Create and Customize Services Section.srt
• 005 Create and Customize Services Section_en.srt
• 006 Create and Style Footer
• 006 Create and Style Footer.srt
• 006 Create and Style Footer_en.srt
• 007 Create and Style Login Page
• 007 Create and Style Login Page.srt
• 007 Create and Style Login Page_en.srt
• 008 Create and Style Sign Up Page
• 008 Create and Style Sign Up Page.srt
• 008 Create and Style Sign Up Page_en.srt
• 009 Make the Project Responsive - Part 1
• 009 Make the Project Responsive - Part 1.srt
• 009 Make the Project Responsive - Part 1_en.srt
• 010 Make the Project Responsive - Part 2
• 010 Make the Project Responsive - Part 2.srt
• 010 Make the Project Responsive - Part 2_en.srt
• 011 Make the Project Responsive - Part 3
• 011 Make the Project Responsive - Part 3.srt
• 011 Make the Project Responsive - Part 3_en.srt
• 012 Create and Style Get Started Section
• 012 Create and Style Get Started Section.srt
• 012 Create and Style Get Started Section_en.srt
• 013 Create and Style Features Section
• 013 Create and Style Features Section.srt
• 013 Create and Style Features Section_en.srt
• 014 Make the Project Responsive - Part 4
• 014 Make the Project Responsive - Part 4.srt
• 014 Make the Project Responsive - Part 4_en.srt
• -
• 12 - BONUS
• 001 Bonus Lecture.html