A complete Bootstrap 4 course for beginners. Master Bootstrap 4 basics with 3 projects
Free tutorial
4.4
4hr 54min of on-demand video
Created by Igneus Technologies
English
English [Auto]
What you’ll learn
- Full understanding of Bootstrap 4 code
- Design responsive web pages in Bootstrap 4
- Will be able to read documentation on your own
Requirements
- A basic knowledge of HTML and CSS would be helpful
- We will use Atom editor but you can use your favourite one
- Bootstrap setup is covered in videos
Description
Welcome to complete Bootstrap 4 training with 3 projects.
What is Bootstrap ?
While writing code for a web page, we want our code to be responsive. In mobile oriented world, most people access websites on small devices. In order to do so, we have to write a lot of CSS. Not just vanilla CSS, CSS that is responsive. I know, that is a pain.
Now, Imagine that If you could use CSS, written by someone else, that is fully responsive. Typical CSS things like button design, page structure design or sliders, already cooked up for you. Seems like unreal ?
This is exactly what Boostrap is.
What knowledge do I need before learning Bootstrap 4?
First thing, this is a sound up course and is not dependent on any previous version of Bootstrap. Although, there is some amount of HTML and CSS that you need with you. We won’t be discussing things like what a body tag does or How you can select a paragraph with specific class in CSS.
This is kind of a course that is perfect once you are finished with your basic HTML and CSS training.
What you will cover in this course ?
This course covers 3 main things.
- Bootstrap 4 in depth
- A walk through for creating projects from scratch
- Ability to read documentation
These 3 points may look really simple but these are fundamental blocks of getting started as a web developer. Our goal is to make sure that you understand syntax of Boostrap 4. Further together, we will make projects so that you can understand entire workflow of creating landing pages and web pages. Further we will also look at finding right things from digging into documentation of Bootstrap 4. New elements like Cards and media queries are also covered.
There is a lot to learn in here, Catch you up inside the course
Who this course is for:
- Ideal student for this course is one, who is looking for responsive web development
- Perfect course after finishing your basic HTML and CSS training
- one who wants to learn Bootstrap 4 from scratch
Show less
Course content
6 sections • 36 lectures • 4h 53m total lengthCollapse all sections
Get started with Bootstrap 44 lectures • 27min
- Introduction to the course03:34
- Tools that you will need (all free and cross platform tools)06:50
- Bootstrap manual install10:37
- Bootstrap CDN installation – recommended05:57
A project and text – images basics on Bootstrap 46 lectures • 48min
- Section 2 introduction02:23
- Basics of text tags in bootstrap 410:22
- More on texts07:40
- Handling Images in bootstrap 408:35
- Project – Watch langing page12:06
- Project – wathcing landing page – adding thumbnail06:53
Containers, media break point and grid in Bootstrap11 lectures • 1hr 34min
- Section 3 Introduction02:37
- Container and fluid containers05:41
- Media break points in Bootstrap 410:44
- 12 column grid basics09:45
- Variable width content grid05:32
- Changing layouts on different screens07:54
- Flexbox align items10:03
- Flexbox justify contents07:18
- Flex properties and nesting grids11:04
- Project 2 – Code is awesome13:04
- Project 2 – Code is Awesome final10:31
Colour, navbar, jumbotron and a project8 lectures • 1hr 7min
- Section 4 introduction02:30
- Colours in Bootstrap 409:55
- Buttons in Bootstrap 405:21
- Jumbotron in Bootstrap 407:28
- Navbar and nav colours11:15
- A complete custom navbar part 110:41
- A complete custom navbar part 209:04
- Carousel in Bootstrap 411:15
Cards, modal, forms and A project6 lectures • 57min
- Section 5 Introduction02:06
- Cards basic in Bootstrap09:29
- A finished card based landscape12:39
- Project – modal login12:25
- Project – triggering modal11:47
- Project – login modal finished08:45
Farewell1 lecture • 1min
- Farewell and bonus00:03
