Featured

HTML & CSS Responsive Website - Complete Website Design Course



Published
In this video we'll build a new responsive website layout with HTML5, CSS3 & Bootstrap 4! First we'll get a quick introduction to Bootstrap which is the responsive website framework we'll be using, then we'll get a brief introduction to the Visual Studio Code text editor that we'll be using in the course. In this design we'll build a sticky navigation menu using the Bootstrap framework as well as add our own custom styling to the framework. We'll also add a responsive carousel image slider with content on top of it and learn how to adjust the transition speed & duration of the slides. Then, after the custom slider, we'll build a sticky social media menu bar where you can link to all of your social media pages and layout various width and columned sections as we work our way through the website design.

➢Tutorial Starter Files: https://m.w3newbie.com/d/tutorial-36.zip
➢Bootstrap Website Templates:
https://w3newbie.com/template-bundle

➢Website Hosting: http://w3newbie.com/bluehost

00:00-00:14 Intro
00:15-10:52 Project Overview & Text Editor
10:53-19:39 Website Starter Files Intro:
➢Tutorial Starter Files: https://m.w3newbie.com/d/tutorial-36.zip
19:40-27:59 Navigation Menu HTML
28:00-32:22 Navigation Menu CSS
32:23-40:24 Carousel Image Slider HTML & CSS Part 1
40:25-52:05 Carousel Image Slider HTML & CSS Part 2
52:06-56:03 Carousel Image Slider HTML & CSS Part 3
56:04-1:05:01 Social Media Menu Bar Icons
1:05:02-1:13:24 Heading & Three Column Section
1:13:25-1:17:59 Two Column Section HTML & CSS
1:18:00-1:18:51 Fixed Image Background & Jumbotron
1:18:52-1:24:08 Second Two & Three Column Sections
1:24:09-1:30:37 Website Footer & Socket Section HTML
1:30:38-1:34:21 Footer & Socket CSS
1:34:22-1:42:12 Responsive CSS Media Queries
1:42:13 How To Put Your Website Online with Website Hosting:
➢Website Hosting: http://w3newbie.com/bluehost

➢3 Website Bundle Bonus: https://w3newbie.com/product/3-website-bundle-bonus/
Category
Web design
Be the first to comment