D4mations.com

Code A Complete Responsive Website with HTML5, CSS3, Bootstrap 4 & VS Code – Complete Website Course

[ad_1]
https://i.ytimg.com/vi/JPcP2HJdqJw/hqdefault.jpg



➢Tutorial Starter Files: https://m.w3newbie.com/d/tutorial-36.zip
➢Bootstrap Website Templates (Coupon “FLASHSALE”):

Template Bundle

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.

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://w3n.link/36-bluehost

Please remember to subscribe here on YouTube and follow:
Facebook: http://www.facebook.com/w3newbie
Twitter: http://twitter.com/drewoncue

➢3 Website Bundle Bonus: https://w3newbie.com/product/3-website-bundle-bonus/

Original source

d4mer

,
, , , , , , , , , , , , , ,

30 responses to “Code A Complete Responsive Website with HTML5, CSS3, Bootstrap 4 & VS Code – Complete Website Course”

  1. Hi guys! I'm excited to release a new video after a long hiatus of doing a complete rebuild of my website, w3newbie.com, and developing a number of new designs that I'll be basing new courses and YouTube tutorials on. So let me know which design from 'The 12 Website Bundle Pack' on my website you'd most like to see a new course or tutorial based on! Thanks for being subscribed and supporting my channel :). Here are the time stamps:
    0:15 – Project Overview & Text Editor
    10:53 – Website Starter Files Intro:
    ➢Tutorial Starter Files: https://m.w3newbie.com/d/tutorial-36.zip
    19:40 – Navigation Menu HTML
    28:00 – Navigation Menu CSS
    32:23 – Carousel Image Slider HTML & CSS Part 1
    40:25 – Carousel Image Slider HTML & CSS Part 2
    52:06 – Carousel Image Slider HTML & CSS Part 3
    56:04 – Social Media Menu Bar Icons
    1:05:02 – Heading & Three Column Section
    1:13:25 – Two Column Section HTML & CSS
    1:18:00 – Fixed Image Background & Jumbotron
    1:18:52 – Second Two & Three Column Sections
    1:24:09 – Website Footer & Socket Section HTML
    1:30:38 – Footer & Socket CSS
    1:34:22 – Responsive CSS Media Queries
    1:42:13 – How To Put Your Website Online with Website Hosting:
    ➢Website Hosting: https://w3newbie.com/hosting/

  5. Today i spent almost 10 hours on boootstrap and css doing one fu***ng button with dropdown menu left from my search form. Button doesn't wanted to stay i just one position at navbar, and I haven't found the solution. I know how to make it arrive when I need (col-md-1) but he's crazy, he can be only after my header or order-last. I thought about create additional navbar under the main and hidding it when increasing dev width, but that's not perfect. I decidet to finush my carrer with writing css. I'am looking for intuitive visual css editor, where I would easly configure my website without spending hours on writing it manualy, if you now some software like that, I'd appreciate to get link 🙂

  11. Drew,
    Do you offer professional web design services? If not, do you have anyone that you can recommend for Bootstrap 4 Web Design?
    I have a web design project of about 10-12 custom templates, that I will use to make our web pages, and are looking for a web designer to help with this project.
    I use to do web design for about 10 years, but I am now legally blind, and are now unable to do the work as efficiently as before.
    Thanks for all your great videos on web design!

Leave a Reply