Portfolio Website Tutorial – Frontend Development with HTML, CSS, JavaScript

Ecommerce Empire Academy

In this course, you will learn how to build a portfolio website using JavaScript, HTML, and CSS. This is a great project to improve you frontend development skills.

✏️ MacLinz developed this course course. Check out his channel:

💻 Code:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:02:37) Switch Between Sections
⌨️ (0:48:53) Header Content
⌨️ (1:06:22) About Section
⌨️ (1:42:34) Portfolios Section
⌨️ (1:58:52) Blogs Section
⌨️ (2:11:31) Contact Section
⌨️ (2:44:09) Media Queries

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

49 thoughts on “Portfolio Website Tutorial – Frontend Development with HTML, CSS, JavaScript”

  1. The Dapper Foxtrot

    We just started making portfolio websites. Curious to see how much overlap I find between this tutorial and my boot camp learnings.

  2. MacLinz Universal Channel

    Thank you, FreeCodeCamp for hosting this video, It’s like a dream coming true. Hope you enyoy the video everyone!😎

  3. Hi, this is really a great portfolio website. Thanks for the efforts.

    I noticed a small mistake. The buttons always remain active as soon as you click on them.

    Original code from the JS file:

    //resmove selected from the other btns
    sectBtns.forEach((btn) =>{
    btn.classList.remove(‘active’)
    })

    my suggestion is:

    //remove selected from the other btns
    const btns = sectBtns[0].children;
    for (let btn of btns){
    btn.classList.remove(‘active’)
    }

    1. For me just removing the ‘s’ at the final of sectBtns solved, though I don know if this is because I declared the class differently.

    2. 案-FL么SH SNiPES

      the active-btn background colour styling is not working idk y, can u please help me 22:56

  4. One advice as a react developer, explain more the reasons of your choices because the more people understand your vision the more they will ramp up… Here we feel like you just follow steps like a bot.
    Examples : why this type of html structure with 2 specific css classes (secX and sectionName) for each section ? why selecting an old versions of fontawesomes, you don’t show enough each specific css property impact on the FE, which is very hard to understand for a beginner.

    1. Universe Code

      Yeah you have to imagine to talk with a real person and forget you are lonely with mic and pc

  5. Marcos Dominguez

    Good video overall. Suggestion: a bit more detailed explanations would go a long way, especially for relatively new developers 🙂

  6. Coding With Dan

    finally completed the video after two days, thank you so much for such a great course, I really learnt many new javascript that I didn’t know before. Thanks. Keep uploading videos like this, I really love videos of this channel, I learnt a lot from here.

  7. This tutorial is great! I was just thinking about making a portfolio website for myself. Thanks a lot freeCodeCamp!

  8. freeCodeCamp, you are absolutely awesome. Thanks for providing so much top content. Just something I would really be stoked about to see here:
    A Complex ReactJS TypeScript project, not just a smaller one for 1.5 hours, but a big one, where you learn almost everything 🙂 Such complexe reactjs TypeScript tutorials are pretty damn rare every 🙁 Thanks a lot <3

  9. Please make an Part-2 of this, Its really impressive
    Thanks MacLinz & freeCodeCamp for this video 👍

  10. Goodness, this portfolio site tutorial is possibly my favorite I’ve seen. There are so many things I’ve been looking to implement on mine. Thank you always, FCC!

  11. 33:20 It’s perfectly fine to use an arrow function as the second “callback” parameter to addEventListener(). The trick is to specify a parameter for the event that is passed to the listener, then instead of using “this” to reference the element associated with the event, use the “target” property of the passed in event. Like such:

    element.addEventListener(‘click’, (ev) => {
    const btn = ev.target; // <--- "btn" is now the button element that was clicked }); Also, it's much simper to add & remove class names from an element using its "classList" property. Use element.classList.add('some-class') to add the class, and element.classList.remove('some-class') to remove it.

    1. Аngelevski Blagoja

      @Dylan J. Gerrits Or, maybe……
      secBtns.forEach((btn) => {
      btn.addEventListener(‘click’, (e) => {
      document.querySelector(‘.active-btn’).classList.remove(‘active-btn’)
      e.target.classList.add(‘active-btn’)
      })
      })

    2. Dylan J. Gerrits

      @Аngelevski Blagoja : It’s the same, but you don’t change the “active” class. No?

  12. Good job . Absolutely fantastic. I love everything about it. Keep it up. I kinda wish it was made with Vue JS though.

  13. Gonzalo Toscano

    Muchas Gracias por este aporte!!
    en 1:34:05 para que funcione el ::before hay que agregar display: block; y position: relative;
    exitos!!

  14. The Blue Studio

    This is great! Could you make a video of how you prepare the design etc for the website?

  15. vanessa belardo

    Good video overall. Suggestion: a bit more detailed explanations would go a long way, especially for relatively new developers 🙂

  16. if anyone is having an error for the part: at 37:32-
    “const allSections = document.querySelectorAll(‘.main-content’);”
    just add an [0] before the semicolon, resulting to
    const allSections = document.querySelectorAll(‘.main-content’)[0];

    1. Lifesaver. Can you explain why it worked for him and is not working now/or for certain people? Thankyou.

  17. Learned A LOT from this video. Thank you so much!

    Genuine question from someone new to web development – should we not take a mobile-first to designing webpages? It seems as though we created a beautiful portfolio for large screens, but the layout of the smaller screen sizes came as an afterthought… (it wasn’t quite as smooth)

    Also, and I think a few people have mentioned this in the comments, the duplication of class/id names and the use of ‘!important’ doesn’t quite feel like best practice.

    That said, it was a super useful tutorial, with lots of work put in by the instructor. There is no way I could have created something like this on my own. Great work!

  18. Jose Espinosa

    Thanks for this great tutorial! Is it OK to use this tutorial to create and host my own portfolio site (with my own custom edits of course)? I do not yet know how intellectual property works for something like this. Thank you!

Comments are closed.