➢Tutorial Starter Recordsdata: https://m.w3newbie.com/d/tutorial-38.zip
➢Web site Template Bundle:
On this video we’ll construct a responsive Bootstrap web site format with HTML5, CSS3, Bootstrap 4.5, & Visible Studio Code! First we’ll get a fast introduction to Bootstrap which is the responsive web site framework we’ll be utilizing, then we’ll get a quick introduction to the Visible Studio Code textual content editor that we’ll be utilizing within the course. On this design we’ll construct a top-bar above out menu, a navigation menu utilizing the Bootstrap framework with the navbar part in addition to add our personal customized styling to the framework. We’ll additionally construct a customized Bootstrap Carousel Picture Slider, a set background picture part with a modal pop-up, and format varied width and columned sections as we work our manner by way of the web site design.
➢Tutorial Starter Recordsdata: https://m.w3newbie.com/d/tutorial-38.zip
➢Web site Template Bundle: https://w3newbie.com
➢Web site Internet hosting: http://w3newbie.com/bluehost
00:00-00:32 Intro
00:33-07:51 Challenge Overview & Textual content Editor
07:52-13:24 Web site Starter Recordsdata Intro:
➢Tutorial Starter Recordsdata: https://m.w3newbie.com/d/tutorial-38.zip
13:25-18:08 Prime Bar HTML & CSS
18:09-25:05 Navigation Menu HTML
25:06-29:27 Navigation Menu CSS
29:28-35:31 Bootstrap Carousel Picture Slider Half 1
35:32-41:27 Bootstrap Carousel Picture Slider Half 2
41:28-57:43 Bootstrap Carousel Picture Slider Half 3
57:44-: Heading & Three Column Part HTML
1:02:32-1:07:32 Fastened Background Picture Part
1:07:33-1:10:15 Bootstrap Modal Popup HTML
1:10:16-1:17:33 Emoji Navbar Collapse Part
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 Question CSS
1:40:26 How To Put Your Web site On-line with Web site Internet hosting:
➢Web site Internet hosting: http://w3newbie.com/bluehost
➢3 Web site Bundle Bonus: https://w3newbie.com
source
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:
➢Tutorial Starter Files: https://m.w3newbie.com/d/tutorial-38.zip
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:
➢Website Hosting: http://w3n.link/38-bluehost
Hiya my friend, you ask US for ideas on future video guides, well heres a MASSIVE one, as no body seems to give that Clear Version, they just talk about it but never show us.
How about you show us your process from start to finish, the whole process of "Handing off your WordPress site to a client"
Even down to the "Final" configurations of the working site, there you wanted a challenge 🙂
I dare you…
i am new to html and LOOK 2 hour of tutorial! i hope it edible..
I know that this video is a couple years old now, but it would be so much easier to follow if you would fix the jumping back and forth between the windows so much. If you would just keep the editor on the right or left and the website on the other. Right now you have it just jumping back and forth constantly and it is impossible to read what you typed because you immediately jump to the website as being built, or move on to the next section.
The html isn't working on my windows it just takes me to a website.
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. 😊😊😊
Is there anyway to get the source code
Where is the html code html code? I am not able to find html code
How can this handcoded website be hosted in WordPress? Thanks for the great tutorial
Hello friend, I greet you from Puebla Mexico, do you think you can guide me? I have to insert images from top to bottom in a web page, and I don't know how to do it, the images overlap me, could you please?
Hey Ryan, does this have everything for an Ecommerce website? Would this work if I dropped it in a BigCommerce site? I am not sure I am asking the right questions. A website is different than an Ecommerce website?
what version of all.in.js did you use ?
Hi, is it possible to let the mobile navbar dropdown overlap the content?
Great tutorial and thanks for the effort but just curious why you used wordpress for your site and not bootsrap.
Hi drew i regularly watch your videos and i loved the way you teach us. Please keep up the good work .
I need to add notice bar (if you know what that is) in my website. Can you please help?
Would you allow us to include this website on our resume
if we want to upload our website to the internet are we obliged to buy a domain?. do you just buy a domain or do you have to have the same hosting?
Great demonstration. Learned so much from this.
Thanks so much, Ryan. You bulid my confidence. I followed it to make my first wedsite and it looks great. Woo!
13:41 shortcuts