Build A Complete Bootstrap Website with HTML5, CSS3, Bootstrap 4 & VS Code - Bootstrap Design

➢Website Template Bundle:

In this video we'll build a responsive Bootstrap website layout with HTML5, CSS3, Bootstrap 4.5, & Visual Studio Code! 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 top-bar above out menu, a navigation menu using the Bootstrap framework with the navbar component as well as add our own custom styling to the framework. We'll also build a custom Bootstrap Carousel Image Slider, a fixed background image section with a modal pop-up, and layout various width and columned sections as we work our way through the website design.

00:00-00:32 Intro
00:33-07:51 Project Overview & Text Editor
07:52-13:24 Website Starter Files Intro:
13:25-18:08 Top Bar HTML & CSS
18:09-25:05 Navigation Menu HTML
25:06-29:27 Navigation Menu CSS
29:28-35:31 Bootstrap Carousel Image Slider Part 1
35:32-41:27 Bootstrap Carousel Image Slider Part 2
41:28-57:43 Bootstrap Carousel Image Slider Part 3
57:44-: Heading & Three Column Section HTML
1:02:32-1:07:32 Fixed Background Image Section
1:07:33-1:10:15 Bootstrap Modal Popup HTML
1:10:16-1:17:33 Emoji Navbar Collapse Section
1:17:34-1:25:05 Two Column & Bootstrap Jumbotron Sections
1:25:06-1:30:29 Footer & Socket HTML
1:30:30-1:36:40 Footer & Socket CSS
1:36:41-1:40:25 Responsive Media Query CSS
1:40:26 How To Put Your Website Online with Website Hosting:

[drewr]

Hey guys, this video was recorded right before the Bootstrap 4.5 update but all of the components used here are the same and the starter files had Bootstrap 4.5 / jQuery 3.5.1 😎. Here are the time stamps:
00:00-00:32 Intro
00:33-07:51 Project Overview & Text Editor
07:52-13:24 Website Starter Files Intro:
13:25-18:08 Top Bar HTML & CSS
18:09-25:05 Navigation Menu HTML
25:06-29:27 Navigation Menu CSS
29:28-35:31 Bootstrap Carousel Image Slider Part 1
35:32-41:27 Bootstrap Carousel Image Slider Part 2
41:28-57:43 Bootstrap Carousel Image Slider Part 3
57:44-: Heading & Three Column Section HTML
1:02:32-1:07:32 Fixed Background Image Section
1:07:33-1:10:15 Bootstrap Modal Popup HTML
1:10:16-1:17:33 Emoji Navbar Collapse Section
1:17:34-1:25:05 Two Column & Bootstrap Jumbotron Sections
1:25:06-1:30:29 Footer & Socket HTML
1:30:30-1:36:40 Footer & Socket CSS
1:36:41-1:40:25 Responsive Media Query CSS
1:40:26 How To Put Your Website Online with Website Hosting:

[_renae]

Wonderful tutorial all the same! Was a pleasure to follow through and apply the same.

A few notes on what worked for me incase you get some errors.(2022)
1.) Remember aria-hidden = "false" when calling any emojis from font awesome incase they don't show by default.
2.)This tutorial uses the old version of links from font awesome so you can use version 5 if the new version links don't work.
3.) Don't forget to close the div (sounds obvious but still) especially before the modal as this can affect the modals ability to close once the buttons have been clicked on. 😊😊😊

[rodaf]

This is the best way to get started with Bootstrap. Amazing job Drew!

[pedrolustosa]

Master, you're incridible at teach. A hug of the Brazil and beginner Full-Stack.

[fatimabitar]

Thanks for being here,
I've been looking for a good example for more than a week and finally I saw your video.
It's very good thanks again!

[prashantsisodhiya]

Hi drew i regularly watch your videos and i loved the way you teach us. Please keep up the good work .

[MTWORLD]

Best web development tutorial I've ever watched. Thanks!

[xiaoyuli]

Thanks so much, Ryan. You bulid my confidence. I followed it to make my first wedsite and it looks great. Woo!

[marlontayag]

Your channel is so beginner friendly and so easy to understand, it has all the information needed to build a site and you explain every line of thoroughly, earn a subs great job man

[hpottstock]

Hi! I've been following your tutorials for a while and learning quite a bit, so I decided to purchase your template-bundle to use it for my small business new website. Really cool features in all of them. Cheers!

[jasonbraithwaite]

Thanks Drew. This video is excellent, well presented, well explained, easy to follow and extremely helpful

[victorchukwudianigwe]

This tutorial gave me so much knowledge and motivation. You have changed my life🙏. Amazing job bro 💪

[GeminiLearning]

Great Job drew. I hope you will upload it on YouTube with resource file so that someone can follow along and reproduce it to learn the technology

[triniriddim]

This is by far the best guidance that I have seen. Thanks bro. I
check your coding course

[satyajitchattopadhyayyt]

Love your work man. I want to become a web developoer and work in my free times to earn more and I have a dream to become a freelancer. Thank you for your tutorials. Good wishes from India 🇮🇳

[thomasmartinez]

Great tutorial! And thanks for adding the BlueHost segment as well, very useful! I never actually hosted a site before but will try now

[al_insight]

You are so good man if i knew I was going to be part of this channel

[graemecarroll]

Great demonstration. Learned so much from this.

[yangagurha]

Hi Ryan,

Thank you so much for the fantastic video I've managed to follow along and finished the video for once with an understanding. I've been struggling a lot in coding lately but I think your videos would be perfect for me, keep it up on good work.

[sasukeuchiha]

Thank you very much for this video. It helped me to build a new website using bootstrap. Now I love bootstrap.