使用HTML CSS和JavaScript构建10个大型响应式网站(英文版)|Udemy

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