Create a Portfolio Website with HTML, CSS & Bootstrap
Level up your web development skills, by creating your portfolio , with this project-based video tutorial
Development,Web Development,Bootstrap
Lectures -17
Resources -1
Duration -1.5 hours
30-days Money-Back Guarantee
Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.
Course Description
Create your online portfolio with this project-based tutorial. And, Learn about responsive design & fast web development.
Bootstrap 3 is a lightweight and responsive framework for a better and faster mobile-friendly web development.
You will learn to
- 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
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
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
- HTML & CSS Cheatsheets (downloadable)
- Master Bootstrap Cheatsheet (downloadable)
The video lessons will walk you through every process step-by-step.
Join me to create your portfolio & learn about the most popular open-source responsive framework Bootstrap 3.
Goals
- You will learn to build complex and dynamic site layouts with the 12-column Grid System
- You will learn how to design your site quickly with CSS built-in classes and other functional components
- You will learn how to override the Bootstrap styling with your custom style
- By the end of the course, you will have a fully functional, responsive webpage. The final template is customizable and can be used as an online portfolio
Prerequisites
- HTML and CSS basics
- Download and install a modern web browser like Chrome
- Download and install a code editor like Sublime Text 2 or 3, Notepad++, Coda or Dreamweaver - any code editor will be just fine
![Create a Portfolio Website with HTML, CSS & Bootstrap Create a Portfolio Website with HTML, CSS & Bootstrap](https://d3mxt5v3yxgcsr.cloudfront.net/courses/3978/course_3978_image.jpg)
Curriculum
Check out the detailed breakdown of what’s inside the course
Introduction
2 Lectures
-
Introduction 00:53 00:53
-
2. Guide & Instructions | PDF
Header
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Portfolio & Works Section
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Contact Us & Footer
3 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Responsive template | Media Queries
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
BONUS Video Lessons
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Instructor Details
![Sandra L](https://www.tutorialspoint.com/assets/profiles/246866/profile/200_3300606-1636438932.jpg)
Sandra L
Hello
I am Sandy, freelance web and mobile Developer based out of Toronto, in Ontario, Canada, I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery.
I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few.
I am also keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development.
On top of being an instructor, I am an avid learner of new technologies and digital stuff.
Course Certificate
Use your certificate to make a career change or to advance in your current career.
![sample Tutorialspoint certificate](/market/public/assets/newDesign/img/primePacks/V-certificate.png)
Our students work
with the Best
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfc bank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfcbank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
Related Video Courses
View MoreAnnual Membership
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses
Subscribe now![Annual Membership Annual Membership](/market/public/assets/newDesign/img/membership-large-small.jpg)
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now![Online Certifications Online Certifications](/market/public/assets/newDesign/img/traning-for-a-team.png)