- Bootstrap 3 is a lightweight and responsive framework for a better and faster mobile-friendly web development.
- Bootstrap 3 is easy to learn
- Bootstrap 3 saves you time and help speed up your web development process
In this Bootstrap video tutorial you'll learn :
- Effectively use the grid system to build a responsive and flexible multi-column layout
- Showcase your artwork/portfolio items with a simple image hover effect
- Use the FLAT UI colors palette
- Use the inspector tool to customize the Boostrap CSS built-in classes
In less than 2 hours, you will learn about responsive design & fast web development and create a beautiful and responsive online portfolio to showcase your products with this project-based tutorial.
Lessons include topics like:
- How to use the 12-column Grid System
- Adding and customizing links and buttons
- Using Font Awesome to easily include scalable social media icons
- Using the pseudo-class :hover to create cool hover effects
PLUS, you will discover other resources like:
- The Font Awesome icons designed by Bootstrap
- The Google Fonts
- The online favicon generator
- W3C validation service to build an error-free webpage
- By the end of the course, you will have a better understanding of the responsive grid and the bootstrap documentation.
- By the end of the course, you will have a nice responsive one-page site that you can use as a personal page or a professional portfolio.
- By the end of the course, you will be well-versed with most of the Bootstrap built-in CSS and components.
- You will be ready to design sleek, mobile-ready websites with HTML and CSS
The video lessons will walk you through each process step-by-step.
Join me to create your portfolio & learn about the most popular open-source responsive framework Bootstrap 3.
Bootstrap, HTML, CSS training table of contents (duration : 1h41m)
- Introduction free 00:00:53
- Navigation Bar 00:09:18
- Header & Banner 00:11:03
Portfolio & Works Section
- Layout & Grid System 00:02:46
- Adding Content & Images | Placeholdit.it 00:08:26
- CSS Transition | Image Hover Effect 00:07:19
Contact Us & Footer
- Responsive Contact Form 00:15:18
- Social Media Icons | Font Awesome 00:07:47
- Footer | HTML Entities 00:05:58
Responsive Template & Media Queries
- Responsive Friendly | Ipad 00:07:40
- Responsive Friendly | Iphone 00:09:49
BONUS Video Lessons
- Google Font 00:04:28
- Adding a Favicon 00:03:14
- W3C Validator 00:02:22
- Scrollspy.js 00:05:03