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



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: https://www.youtube.com/c/MacLinzUniversalChannel

💻 Code: https://github.com/Maclinz/JS_CSS_PortfolioProject

⭐️ 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: https://www.freecodecamp.org

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

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 46 Comments

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

  2. Luka Chemia

    how to remove the active class from the not useable at that moment button?

  3. Neddier

    4:38 If you cant run a live server, you should remake index.html file. It also fixed Emmet Abbreviations

  4. Discovery Unit

    Thank you so much for this video. I learned a lot from it. More of this good stuff! 🙂

  5. Abram Wuliger

    at 33:00 in the function PageTransistions() the replace method doesn't seem to be working. In the console it keeps printing an additional active-btn instead of removing and replacing it with an empty string. So now the active color fills each button I click and instead of only one being selected. I have the code writing out to the tee… any suggestions? here is the following code:

    const sections = document.querySelectorAll('.section');
    const sectBtns = document.querySelectorAll('.controls');
    const sectBtn = document.querySelectorAll('.control');
    const allSections = document.querySelector('.main-content');

    function pageSwitch() {
    // btn click active class
    for(let i = 0; i < sectBtn.length; i++) {
    sectBtn[i].addEventListener('click', function() {
    let currentBtn = document.querySelectorAll('.active-btn');
    currentBtn[0].className = currentBtn[0].className.replace('.active-btn', '');
    this.className += ' active-btn';
    })
    }
    }

    pageSwitch();

  6. pavan gogineni

    Hello the link for my code is not working. When I was searching in net it does not coming.can you please help me

  7. JADID IG

    Whoever has an old computer, I want to learn programming strongly, send a reply, and thank you very much

  8. Holy Sandwich

    I am a newbie at CSS and JS. This video is very educational!!! One problem I am facing is that the size problem. (maybe because I am opening in Chrome and Firefox.) The size is too wide or long. The items in left grid box is too close to the left and so do the right grid box items are too close to the right at 1:17:20 How can I fix that problem?

    edit: I change some padding in boxes and it worked now. 🙂
    edit2: It takes me about 3 days.

  9. S D

    I'm having a bunch of issues with my code just in the first section. Anyone on here would like to get a group to talk over the issues we are seeing?? We can set up a Discord or something like that

  10. S D

    My code looks just exactly like the tutorial, I even verified the github, but I am not able to get the section background colors to appear after adding the .active{display: block;} piece to the styles doc. On the backend, everything seems to be going fine too. Anyone else having this problem???

  11. hertderg12

    When I attempt inputting an i element into CSS like at 21:40 it breaks my code. When I Close off the preceding .control {} and type a new i{} it works then, so I'm assuming my SASS isn't plugged in properly, is that accurate? If so, how do I fix? I'd like to nest these elements if thats the way you should do it.

  12. ALTHEPAL78

    vicrosoft is a foam mattress company lmao I thought it might of been a different tech company like microsoft but just other things besides the OS lol

  13. Sir Francis

    Stuck at displaying different colors for sections. On inspect display: none. active { display: block} not functioning. please help

  14. Angela Farnell

    When I click the buttons the section colors are not changing. Am getting this error: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at PageTransition
    And I typed everything as he did.

  15. Raphaël

    The video is actually great and I like the portfolio, but there's no much explananation for beginners especially on the javascript part

  16. Dan E.

    Video is tough to follow and to learn from. I got stuck on checking JavaScript code to make sure active button was switching and got frustrated. This was the second time I attempted following this video. I was ready to give up on it and finally realized that my JavaScript file was under my styles folder🤣. Realized my mistake and moved it. Everything clicked after that.😬

  17. Ilya Sinyugin

    Stuck at 1:09:00, "About me" and "My Stats" are not on top of each other. About me is in between My and Stats

  18. Hi FreeCodeCamp, thanks! for this. It really is helpful and thanks to the developer too.

  19. Dylan J. Gerrits

    You could simplify your JS like that:
    (function () {

    […document.querySelectorAll(".control")].forEach(button => {

    button.addEventListener("click", function() {

    document.querySelector(".active-button").classList.remove("active-button");

    this.classList.add("active-button");

    document.querySelector(".active").classList.remove("active");

    document.getElementById(button.dataset.id).classList.add("active");

    })

    });

    document.querySelector("#switch-mode").addEventListener("click", () => {

    document.body.classList.toggle("light-theme");

    })

    })();
    It litteraly does the same as your 45 lines of JS.

  20. Initially my BG is not red until i change the extension of the style.scss to style.css I have already downloaded th extension of scss. But not working i though.

  21. Narendra Koya

    How to convert this total code into React JS??..
    Please Make a Video on this!! Or Any give Suggestion??

  22. The Blue Studio

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

  23. WATSON

    hi guys im self taught progremmer. Have no idea where to place my portfolio. pls who knows give answer

  24. Mr Rough

    Did anyone finish this course until the end?

  25. Trevitray

    'hmmm, i wonder why its doing that' – Every developer ever, great quote!

  26. noon

    Can someone please help me at 39:25? I keep getting "allSections.addEventListener is not a function at PageTransitions"

  27. Juhee Hong

    at 29:31, why do we need "this.className += ' active-btn'" ? what exactly does it do?

  28. Stepqen Live

    I'm not getting an active button when clicking on a different button. Everything is the correct it just doesn't change from "control control-3 " to "control control-3 active-class"

  29. Sorry in advance, im not trying to judge anyone or make fun, im new in web development and i am try to learn. Can someone with more experience explain to me what is the reason to have a submit-btn and contact section with textarea and name input? did I miss something because from what I've seen he just copy-paste the "download cv" button from the header section and add it to submit-btn, there is nowhere in the video a way to link the contact info section with an email.

  30. iSteven Zion

    GREAT CREATIVITY, Though the active-btn isnt working. am getting the error that the DOMtoken list cannot be empty when i click the nav buttons. i tried fixing it but that demo was way off. this wont work well for begginers. but i cloned your repo today and i saw you fixed it, add a description to help others fix it.

    if anyone finds trouble in the nav bar just use his recently updated js code

  31. Yazeed Daher

    even though I edited them in the SASS files I went to the style.css file and found out that the background settings were unchanged this happend couple of times and rewriting the code from the beginning and can't fix the issue, can someone help me please

  32. Digital Bharat

    Where to learn HTML5 + CSS3 + JS as a beginner in 2022 on updated VS version step-by-step with logical explaination for free of cost.

  33. Heizou

    I cant switch between sections even if i followed as he said ;-;

Leave a Reply