Create a Portfolio Site with HTML, CSS & Bootstrap

Sandy Ludosky

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (1h 41m)
    • 1. Introduction

      0:53
    • 2. Navigation Bar

      9:17
    • 3. Banner

      11:03
    • 4. Layout & The Grid System

      2:45
    • 5. Adding Images

      8:25
    • 6. Image Hover Effect | Pseudo-class & CSS Transition

      7:18
    • 7. Responsive Contact Form

      15:18
    • 8. Social Media Icons | Font Awesome

      7:47
    • 9. The Footer | HTML entities

      5:57
    • 10. Responsive-friendly | Ipad

      7:40
    • 11. Responside-friendly | Iphone

      9:48
    • 12. Navigation Bar | Scrollspy.js

      5:02
    • 13. Using Google Font

      4:27
    • 14. Adding a Favicon

      3:14
    • 15. SUCCESSFULLY VALIDATE YOUR WEBPAGE WITH W3C VALIDATOR

      2:21

Project Description

Create your porfolio/landing page with HTML, CSS & Boostrap

===== INDEX =======

  1. Student's Guide | Set Up & Getting Ready
  2. Project Assignment Guide | CREATE YOUR OWN PAGE

==================

1- Student's Guide | Set Up & Getting Ready

        1 - Install a Modern Browser 

        My recommendation is to use a modern browser like Chrome.The Chrome web developer tools are         excellent. We will get a change to use them in the developement process. Firefox is fine too.

       

google.png

        link to download Chrome

        link to make Chrome the default browser

        2 - Code editor 

       My recommendation is to use Sublime text. I will use it for the video tutorials, but feel to use any              other one of your liking.

      

sublime.png

       link to download Sublime Text (Mac & PC)

      3- Downloading & Installing Bootstrap

  1. Visit http://getbootstrap.com/ 
  2. and go to Getting Started 

       4 - The course Materials (zip file)

  • link to download
  • unzip and save on your machine in a location easily accessible

Now you are all set!

=================

2 - Project Assignment Guide | CREATE YOUR OWN PAGE

It is now time to create your responsive page with Bootstrap.

You can create:

  • a landing page to promote your services or products
  • a portfolio to showcase your works and get hired
  • a personal page to introduce yourself to the world
  • The sky is the limit......

A few recommandations to get you started:

  • Use the media queries to make your page responsive-friendly
  • Remember to validate the code with the W3C validation service to make your page error-free
  • Be creative and remember to use the Bootstrap Documentations to help in the web development process. Bootstrap includes plenty of built-in CSS and components ready to use, out of the box.
  • ------------------------------------------------------------------------------ 
  • Share with other students in the Project Gallery to receive feedback
  • You can use a similar template as shown in the tutorial and customize to it your liking.
  • Here are a few examples below for inspiration:

view in browser

0B1Usy68B1DzYMjJxZTFOSVBKanM

view in browser

0B1Usy68B1DzYWEJxd3VkWUpYdXM

view in browser

0B1Usy68B1DzYWFlXZzZqUld0Zlk

ADDITIONAL RESOURCES :

Good Luck! I look forward to see your projects!

Student Projects