Create a Portfolio Website with HTML, CSS & Bootstrap – Sandy Ludosky

Salepage link: At HERE. Archive:

Create a Portfolio Website with HTML, CSS & Bootstrap

Level up your web development skills, by creating your portfolio , with this project-based video tutorial

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.

Course Curriculum

Welcome!

• Intro (0:53)
• Guide & Instructions | PDF 0:00

Header

• Navigation Bar (9:17)
• Header & Banner (11:03)

Portfolio & Works Section

• Layout & The Grid System
• Adding Images
• Image Hover Effect | Pseudo-class, CSS transition

Contact Us & Footer

• Responsive Contact Form (15:18)
• Social Media Icons | Font Awesome (7:47)
• The Footer | Html entities (5:57)

Responsive template | Media Queries

• Responsive-friendy | Ipad (7:40)
• Responsive-friendy | IPhone (9:48)

BONUS Video Lessons

• Navigation bar | Scrollspy.js (5:02)
• Using Google Font (4:27)
• Adding a Favicon (3:14)
• Successfully validate your webpage with W3C validator (2:21)

Supplementary Resources

• HTML Tag references | PDF
• CSS cheatsheets | PDF
• Bootstrap Master Cheatsheet