Build and deploy a portfolio website [Full Tutorial Course]

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.

⭐️ 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

--

[KevinPowell]

I hope that you enjoy the course and make something awesome for yourself based on it! YT likes to flag posts with links, but if you do anything cool with this, hit me up on Twitter and I'd love to see what you made!

Also, if you enjoyed this and like learning new CSS stuff, that's my jam over on my channel :)

[alexwhitmore]

In case anyone didn't know (like me), grid-column-gap is now obsolete, the newer property is just called column-gap!

[odonatojunior]

I'm really glad that Kevin is showing up here. He's one of my favorite coders on youtube!

[otsilejeremiah]

I loved this. I'm an android developer. I have been so closed minded and refusing to dive into web development. But this video made everything so fun and achievable. Good Job man

[theegreatestever]

Kevin's CSS skills are insane..thank you very much for this!

[erikgiesenloo]

As someone who is just looking to make a portfolio this tutorial is great - I found most other html videos to be quite basic or too in-depth

[HasanVurucu]

Thanks a lot. Finished it in 2 days and I'm super glad about it! I just didn't use droplet or any publishment tool yet but I am really satisfied the way you build your code up. I followed straight along with my own pics and texts. Sometimes allignments and positions didn't work the way I wanted but with understandable class names I knew which part of the code I have to modify.

[gospher]

One of the best teachers in the platform, just quality content.

[rayblinksme]

Thanks for the step-by-step Kevin! Big fan, 2 years later and this is still a great resource.

[newyorkcityeas]

I'm applying for software engineering schools and its amazing that it's so easy and available to be able to make a portfolio website!

[RameenFallschirmjager]

Thank you very much Kevin for this tutorial. I watched it multiple times and each time I learnt something new. This video is full of insights and information that just a pro knows about and it makes a head and shoulder above other instructors. My dream is work and live in Canada, and If I someday could fulfill this dream I promise you a gift, because right now I live in a country that I can't reach you unless I would pay my regards in a tangible way. Believe me Kevin, I return your favors, I'm a man of my word!

[jadex]

this is amazing tysm Kevin, following this tutorial to create a portfolio of my own, halfway through and its already look so great, couldn't have done it without you. Keep up the good work!

[smsibasish]

Kevin is the best CSS guru in the industry.

[phillipbeltre]

Just went through this and it was great! Finally launched a personal website after all this time. The hardest thing is getting started and you helped me get through it. Thank you so much!

[arthurservulo]

Thanks! Im working on my front-end skills and you're helped a lot with this aweasome video!

[beksultanomirzak]

Thank you so much, I have learnt a lot thanks to this course, You are the best Web developer and Teacher!

[vovantoanquoc]

Just did 45 mins non-stop with you Kevin and the result is great so far.
I am not using Scrimba, I'm using Visual Studio Code which works well and gives me hints along the way. Really appreciate your detailed instruction. You're probably one of my first CSS coaches ever. I just started this front-end path 2 weeks ago but I had a lot of experience building websites with WordPress before. However, I wanna level up the game so it's time to pick up the pieces. Cheers to you and everyone else who is on their way.

[sassyjas]

Thank You Kevin for such an amazing tute.... its just the best one across youtube

[davetemple]

I found your explanation of breaking down the media queries on a per-section basis to be very clear and extremely helpful. Thank You!

[tommyatkins]

New to coding and web dev. I rate free code camp and love your work mate.

Thanks for everything ✌