Build a website with Bootstrap 4 - Introduction
Key Takeaways
Builds a website with Bootstrap 4
Full Transcript
Welcome to this project, except you might have already started it. I realized after putting out the first episode that I was missing an introduction to this episode where there's a couple of things that I should have talked about. So, if you're watching this after it's already all come out and you're sort of catching up on things, this will be in the right order for you. But if you watch the first episode already, you might be getting this one after the fact. So, just uh anyway, with all that confusing stuff out of the way, what I want to do is two things. First, I just want to show you the project that we're going to be building. I built this in a previous video. So, if you want to watch how I built it and some of the thought process that I put into this, you can check that out. Uh, and I mistakenly thought that people would have seen that even though it's not officially part of this series. So, my bad. Sorry about that. Uh, so here's the design. I hope you like it. This is the site that we will be using Bootstrap 4 to build. And that's the other thing I want to talk about is the fact that we're using Bootstrap 4 to build it. Bootstrap 4 is currently in alpha version 6. It's in alpha. So, it's not actually the official release yet. Um, so I had some people just asking, is it safe to use Bootstrap 4? And uh, you know, there there's other should they be using Bootstrap 3? Should they be using Foundation, other stuff like that? And as we're going to see, there are some issues with Bootstrap 4 still. Some people are using Bootstrap 4 currently and it there's lots of good stuff with it, but there's a few bugs that we'll probably run into along the way. If you are using Bootstrap 4, just be aware that some things might change. If you're watching this in the future and you're in the beta or the official release, there's some things that might be different from this video to what the official release is actually like. Uh even though for the most part it should be similar. It's more bug fixes and a few little changes that could be happening along the way. Sorry for the confusion of the whole out of order thing for those of you who are watching this as the videos come out. And for those of you who are watching it after the fact and everything is in the right order, the next video will be about downloading our files, downloading Bootstrap, the different ways we can do that, as well as how to set up the files a little bit so it works a bit better for us. Thank you so much for watching and until next time, don't forget to make your corner of the internet just a little bit more awesome.
Original Description
This series really is a full on Bootstrap 4 tutorial for beginners.
I'm doing all this with Bootstrap v4 alpha 6, so fair warning that if you're watching this in the future, a few small things may be a bit different along the way, but it shouldn't be anything major.
If you want to follow along, you can get the PSD and images here: https://www.dropbox.com/s/i3ph72nciw75zxa/the-band-design-and-images.zip?dl=0
Bootstrap v4: https://v4-alpha.getbootstrap.com/
--
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
--
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powellom/KevinJPowell
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Kevin Powell · Kevin Powell · 59 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
▶
60
How to create an awesome navigation bar with HTML & CSS
Kevin Powell
Improve your CSS by Keepin' it DRY
Kevin Powell
HTML & CSS for Beginners Part 6: Images
Kevin Powell
HTML & CSS for Beginners Part 7: File Structure
Kevin Powell
HTML & CSS for Beginners Part 4: Bold and Italic text and HTML comments
Kevin Powell
HTML & CSS for Beginners Part 5: Links
Kevin Powell
HTML & CSS for Beginners Part 3: Paragraphs and Headings
Kevin Powell
HTML and CSS for Beginners Part 1: Introduction to HTML
Kevin Powell
HTML and CSS for Beginners Part 2: Building your first web page!
Kevin Powell
HTML & CSS for Beginner Part 8: Introduction to CSS
Kevin Powell
HTML & CSS for Beginners Part 9: External CSS
Kevin Powell
HTML & CSS for Beginners Part 10: Divs & Spans
Kevin Powell
HTML & CSS for Beginners Part 11: Classes & IDs
Kevin Powell
HTML & CSS for Beginners Part 12: The CSS Box Model - Margin, Borders & Padding explained
Kevin Powell
HTML & CSS for Beginners Part 13: Background Images
Kevin Powell
HTML & CSS for Beginners Part 14: Style Text with CSS
Kevin Powell
HTML & CSS for Beginners Part 15: How to style links
Kevin Powell
HTML & CSS for Beginners Part 16: CSS selectors and Specificity
Kevin Powell
HTML & CSS for Beginners Part 17: How to Create and Style HTML Lists
Kevin Powell
HTML & CSS for Beginners Part 18: How Floats and Clears work
Kevin Powell
HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla
Kevin Powell
HTML & CSS for Beginners Part 20: How to center a div
Kevin Powell
HTML & CSS for Beginners Part 21: How to create a basic website layout - the HTML
Kevin Powell
HTML & CSS for Beginners Part 22: How to create a basic layout - the CSS
Kevin Powell
How to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5
Kevin Powell
How to Create a Responsive Website from Scratch - Part 2: The Header and Hero area #Responsive #CSS3
Kevin Powell
How to Create a Responsive Website from Scratch - Part 3: The About Section #Responsive #CSS
Kevin Powell
How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section
Kevin Powell
How to Create a Responsive Website from Scratch - Part 5: Call To Action and Footer #CSS #Responsive
Kevin Powell
Tutorial: Learn how to use CSS Media Queries in less than 5 minutes
Kevin Powell
End of the year upate and what's coming to my channel to start the new year
Kevin Powell
Create a CSS only Mega Dropdown Menu
Kevin Powell
CSS Tutorial: Outline and Outline Offset
Kevin Powell
CSS Blending Modes
Kevin Powell
Parallax effect | 2 different ways to add it with jQuery
Kevin Powell
CSS Units: vh, vw, vmin, vmax #css #responsive #design
Kevin Powell
How to Create a Website - Complete workflow | Part 01: Intro + Setting things up
Kevin Powell
100 Subscribers speed coding bonus video
Kevin Powell
How to Create a Website - Complete workflow | Part 02: The Markup #HTML
Kevin Powell
How to Create a Website - Complete workflow | Part 03: Sass Variables and a Mixin #Sass
Kevin Powell
How to Create a Website - Complete workflow | Part 04: Setting up the hero and header
Kevin Powell
How to Create a Website - Complete workflow | Part 05: Typography & Buttons
Kevin Powell
How to Create a Website - Complete workflow | Part 06.1: Building the navigation with Flexbox
Kevin Powell
How to Create a Website - Complete workflow | Part 06.2: Making the nav work with jQuery
Kevin Powell
Redesigning & Coding My Website #CreateICG
Kevin Powell
How to Create a Website - Complete workflow | Part 07: Starting the flexbox grid
Kevin Powell
How to Create a Website - Complete workflow | Part 08: Promo & Problem shooting!
Kevin Powell
How to Create a Website - Complete workflow | Part 09: The CTA and Footer
Kevin Powell
How to Create a Website - Complete workflow | Part 10: Making it responsive
Kevin Powell
How to Create a Website - Complete workflow | Part 11: Making it responsive con't
Kevin Powell
How to Create a Website - Complete workflow | Part 12: Putting the site online
Kevin Powell
Create a Custom Grid System with CSS Calc() and Sass
Kevin Powell
CSS em and rem explained #CSS #responsive
Kevin Powell
Should you use Bootstrap?
Kevin Powell
How to add Smooth Scrolling to your one page website with jQuery
Kevin Powell
Let's learn Bootstrap 4
Kevin Powell
How I approach designing a website - my thought process
Kevin Powell
Build a website with Bootstrap 4 - Part 1: The setup
Kevin Powell
Build a website with Bootstrap 4 - Introduction
Kevin Powell
Build a website with Bootstrap 4 - Part 2: Customizing Variables
Kevin Powell
Related Reads
📰
📰
📰
📰
How to switch your OpenAI SDK to Flatkey by changing one base_url
Dev.to · Hunter G
PodcastorAI Guide: How to Use It, Best Prompts & Use Cases (2026)
Dev.to AI
I built Steno to protect your most sensitive conversations. AI notetaker & notepad. 1200+ GitHub stars, 1000s of downloads
Dev.to · Darth_Ruzin
Enterprise Storage Is Rebuilding Itself Around AI-Ready Data
Forbes Innovation
🎓
Tutor Explanation
DeepCamp AI