[ad_1]
https://i.ytimg.com/vi/xAm2aKLtV6k/hqdefault.jpg
➢Tutorial Starter Files: https://m.w3newbie.com/w/tutorial-51.zip
➢Website Templates: https://w3newbie.com/template-bundle
➢Bootstrap Udemy Course: https://w3newbie.com/courses/
➢Website Hosting: https://w3newbie.com/bluehost
In this video we’ll build a complete responsive HTML website with HTML5, CSS3 and Bootstrap 4. Bootstrap is a CSS framework that we’ll use which will allow us to add HTML classes that have pre-defined CSS styles attached to them to make it easy for us to develop a responsive, mobile friendly website design.
The Nest Bootstrap Theme developed in this video is a shortened, or light, version of the complete website theme seen in the complete course and theme as seen on my website.
Create A Bootstrap Theme From Scratch with Bootstrap 4, HTML5, & CSS3
0:15 – Website Design Overview
3:00 – Starter Website Files Overview
4:30 – Text Editor Resource (Visual Studio Code)
5:15 – HTML included in the website files already
8:15 – Website Development Resources (FA/Bootstrap)
9:07 – CSS included in the website files already
10:25 – Bootstrap Scrollspy in the HTML Body tag
11:45 – Navbar Drop Navigation Menu HTML
19:55 – Full Screen Landing Page HTML
20:49 – Fixed Landing Page CSS & Background Image
22:41 – Navigation Menu CSS Styling
28:44 – Landing Page Content HTML
29:27 – Landing Page Heading & Button CSS
32:55 – Responsive Three Column About Section HTML
40:20 – Three Column Heading & Icon CSS
42:11 – Image Portfolio Section HTML
46:18 – Image Portfolio CSS Styling
47:54 – Bootstrap Scrollspy Offset Height CSS
49:52 – Testimonials Bootstrap Cards HTML
57:35 – Contact/Footer Section HTML with Social Icons
59:52 – Footer CSS/HTML Continued
1:05:43 – Social Icons & Website Socket CSS
1:08:43 – Responsive CSS Styling with Media Queries
1:09:57 – Complete – Thanks for watching and Subscribe!
Original source
12 responses to “Build A Responsive HTML Website with HTML5, CSS3 & Bootstrap 4”
Hey guys thanks for the likes on this video :). Here are the time stamps:
0:15 – Website Design Overview
3:00 – Starter Website Files Overview
4:30 – Text Editor Resource (Visual Studio Code)
5:15 – HTML included in the website files already
8:15 – Website Development Resources (FA/Bootstrap)
9:07 – CSS included in the website files already
10:25 – Bootstrap Scrollspy in the HTML Body tag
11:45 – Navbar Drop Navigation Menu HTML
19:55 – Full Screen Landing Page HTML
20:49 – Fixed Landing Page CSS & Background Image
22:41 – Navigation Menu CSS Styling
28:44 – Landing Page Content HTML
29:27 – Landing Page Heading & Button CSS
32:55 – Responsive Three Column About Section HTML
40:20 – Three Column Heading & Icon CSS
42:11 – Image Portfolio Section HTML
46:18 – Image Portfolio CSS Styling
47:54 – Bootstrap Scrollspy Offset Height CSS
49:52 – Testimonials Bootstrap Cards HTML
57:35 – Contact/Footer Section HTML with Social Icons
59:52 – Footer CSS/HTML Continued
1:05:43 – Social Icons & Website Socket CSS
1:08:43 – Responsive CSS Styling with Media Queries
1:09:57 – Complete – Thanks for watching and Subscribe!
i like it
why do I get this Warnings:
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:5500/js/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:5500/css/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Is this done in visual studio code?
Can I use the cdn's instead of the files for the supporting files?
Amazing tutorial man, thank you so much!!!!
My About Section's content is overlapping in the Landing Page Section's bottom and does not come out. Also the Landing Page Image is being displayed all over the page. Do you have any idea how?
I'm having issues with the portfolio images, they appear but ontop of one and other and the last one is smaller than the others?
Having difficulty with the landing image isn't appearing… The landing image is in the img folder but isn't appearing… My code editor is VS
Hi Drew, your video's are great, Thank you. I am wondering ifyou can share with me how you increase a logo size within the header without changing the header size. Thanks M
In the thumbnail the "Nest" text is blue on the landing page, here's how you do that with the heading:
<h1 class="text-light text-uppercase"><span style="color:blue;">Nest</span> Responsive Bootstrap Theme</h1>
Could you help me, in my VS Code doesn't work Live Server.
I have reboot my PC and reinstalled plugin.