Build A Responsive HTML Website with HTML5, CSS3 & Bootstrap 4


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.

https://w3newbie.com/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 thoughts on “Build A Responsive HTML Website with HTML5, CSS3 & Bootstrap 4

  • March 10, 2021 at 00:12
    Permalink

    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!

  • March 10, 2021 at 00:12
    Permalink

    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?

  • March 10, 2021 at 00:12
    Permalink

    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?

  • March 10, 2021 at 00:12
    Permalink

    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

  • March 10, 2021 at 00:12
    Permalink

    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

  • March 10, 2021 at 00:12
    Permalink

    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>

Leave a Reply