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.

Front End & iOS Developer

sandy ludosky

My name is Sandy. I am a freelance Web Designer and 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. Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development. On top of being a Udemy instructor, I am an avid learner of new technologies and digital stuff.

Course curriculum

  • 1

    Welcome!

    • Introduction

    • Course Materials (download)

    • Course Instructions
  • 2

    Header

    • Navigation Bar

    • Header & Banner
  • 3

    Portfolio & Work Section

    • Layout & Grid System

    • Adding images

    • Image Hover Effect | CSS Transition
  • 4

    Contact Us & Footer

    • Responsive Contact Form

    • Social Media Icons | Font Awesome

    • Footer | HTML Entities
  • 5

    Responsive Template & Media Queries

    • Responsive-friendly | Ipad

    • Responsive-friendly | IPhone
  • 6

    Bonus

    • Navigation Bar | Scrollspy.js

    • Using Google Font

    • Adding a Favicon

    • Validating your page with W3Validator
  • 7

    Supplementary Resources

    • HTML5 - Tag Reference | PDF

    • CSS Cheatsheet | PDF

    • Bootstrap 3 Master Cheatsheet | PDF