HDTutorial
EN

Playback starts YouTube’s embedded player (privacy-enhanced mode).

Build and deploy a portfolio website [Full Tutorial Course]

884,196 views March 2, 2020 2:23:16

Watch on YouTube
ChannelfreeCodeCamp.org

Chapters

Description from the creator

This course will teach you to build and deploy a neat portfolio for yourself. To watch the interactive version of the course, visit the original Scrimba course 👉 scrimba.com/g/gportfolio (code available at that link).

Why should you have a portfolio?
As a developer, you need to ways to showcase your skills to potential employers. There's no better way of doing this than a dedicated portfolio page. It gives you full control of how you'd like to present yourself.

In this course, the brilliant teacher Kevin Powell will take you through every single step of building a neat-looking portfolio website. You'll also learn to customize it to suit your personal style. Towards the end of the course, Kevin shows you how to deploy the site to DigitalOcean, so that you will end up with a live website upon completing the course!

The site is built without using any web frameworks, so the only prerequisites for this course are basic HTML and CSS skills.

❤️ Try interactive Frontend courses we love, right in your browser: scrimba.com/freeCodeCamp-Frontend (Made possible by a grant from our friends at Scrimba)

⭐️ Course Contents ⭐️
⌨️ (0:00) 1. Introduction
⌨️ (4:31) 2. Setting things up - HTML
⌨️ (9:03) 3. The Header Area - HTML
⌨️ (14:02) 4. Intro Section
⌨️ (19:56) 5. About me, Work and Footer - HTML
⌨️ (28:39) 6. Setting up the Custom Properties and General Styles
⌨️ (39:22) 7. Styling the titles and subtitles
⌨️ (43:38) 8. Setting up the intro section
⌨️ (55:57) 9. Styling the services section
⌨️ (1:08:50) 10. The About Me Section
⌨️ (1:19:52) 11. The Portfolio
⌨️ (1:28:40) 12. Adding the Social Icons with Font Awesome
⌨️ (1:31:39) 13. Styling the Footer
⌨️ (1:37:26) 14. Setting up the Navigation Styles
⌨️ (1:44:24) 15. Creating the Hamburger
⌨️ (1:51:17) 16. Adding the JS
⌨️ (2:00:29) 17. Creating the Portfolio Item Page
⌨️ (2:06:42) 18. Customizing Your Page
⌨️ (2:08:45) 19. DigitalOcean Droplets - What they are and how to set one up
⌨️ (2:19:02) 20. DigitalOcean Droplets - Uploading files via FTP

--

Learn to code for free and get a developer job: freecodecamp.org

Read hundreds of articles on programming: freecodecamp.org/news

About this tutorial

freeCodeCamp.org published this 2:23:16 video tutorial on March 2, 2020. It has been watched 884,196 times on YouTube.

Category
Education
Duration
2:23:16
Published
March 2, 2020
Views
884,196
Likes
20,567

Tags

Share

This tutorial in other languages