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: / maclinzuniversalchannel
💻 Code: github.com/Maclinz/JS_CSS_Por...
⭐️ 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@SeanPattersonLA]

Thank you very much Beau, Quincy and the developer who presented the tutorial! I learned a lot and got good practice in what I'm already familiar with! Very much appreciated

[@ashec6606]

Thanks so much for making this - I had so much fun coding with you and I learned A LOT!

[@lizikakizil]

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!

[@kimberlystamets6288]

Wow!! This is incredible. This will be my project for the next two weeks, you are awesome!

[@user-vm7lm5jr9l]

This is great, learning alot watching you work through the problems, thanks for posting!

[@edbosisto8688]

Great video, thanks! Really improved my CSS understanding a lot watching this.

[@Athenaforever2308]

I am currently on timestamp 1:06:23 I want to thank you and fcc for this great content. I am really enjoying your explanations, your pace and the portfolio you are helping me build! :) You mentioned that you were really tired, so very grateful for you all your effort!

[@Mr_Brian]

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

[@AsifDawood]

Beautifully designed portfolio site . Thank you for the video.

[@azubuikeottah6883]

I so much love this tutorial. I have been having hard time with JavaScript.

[@chelseabing]

Thank you very much. This video improved my CSS a lot.

[@gonzalotoscano4758]

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

[@jamesvereker4638]

I've noticed a lot of experienced CSS devs saying that there's a few mistakes in this video. If you could post ANY MISTAKES FOUND under this comment that would be very useful for me and other beginners. Also like the comment so others can see it :)

[@chelseakeith4098]

[@VladislavDerbenev]

I'm not very experienced, but I can list these: 1. The Sass team discourages the continued use of the @import rule 2. The project has no splitting of scss into sub-files. 3. The use of 0rem 0em is redundant, should be just 0 4. !important should be avoided in most of the used cases 5. There's duplication of .left-header rule in the _media.scss

[@jamesvereker4638]

@@VladislavDerbenev Thank you! Also another thing which has been brought up tons already but just in case someone didn't see DO NOT USE PERCENTAGE STATS IN YOUR PORTFOLIO.

[@yurisoares2596]

@@jamesvereker4638 Yep, I was showing this to my friend, and he pointed the same thing. Now I'm trying to making a 5 tiers of knowledge, Newbie, Beginner, Intermediate, Expert and Magician - or maybe TechnoKing -, under those will have the same "bar", but instead of showing a percentage, which is ambiguous in what represents, will show my current stage.

[@yurisoares2596]

@@jamesvereker4638 Though I'm just a beginner and don't know how to accomplish YET.

[@discoveryunit7753]

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

[@ambole]

Thanks MacLinz and freeCodeCamp, I just managed to build this step by step, i got lost severally,but still came back again and again.Thank you

[@user-lq2ul9ch6p]

i would appreciate you share how you were able to resolve the issues, as some of his codes are not functioning well

[@kirollssabri4651]

I really appreciate this work and thanks so much for helping me learn new stuff ❤️❤️❤️

[@manashbehera961]

thanks for the video, now I'm confident using css styles and learnt some pure javascript implimentations as well. 😘

[@bayuanggoro.d5473]

1:31:35 do not forget adding "position: absolute" into &::before element .stat-title

[@benSfft]

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.

[@acvideography3354]

totally agree, as a beginner I'm definitely lost at simple parts of this, but if I understand the logic I can think about it after each session and progess that I make. @Benjamin whats FE? lol

[@enrico5610]

@@acvideography3354 Same here, I'm at the 1 hour mark and I feel like a robot, just doing as instructed without really understanding much of the choices being made here

[@TheCodeDealer]

Thank you for your feedback. this really helps making better videos in the future.

[@TheChava93]

I couldn’t even get font awesome to work 😔

[@KT-ni4lq]

@@TheChava93 yea all my fonts show as boxes with numbers. the instagram icon shows up but it's black on the dark background....

[@Ayush-pn8jk]

Just a personal suggestion that never add those stats like python 70% html 80% etc etc to your portfolio

[@mjwhirly89]

Very solid advice. These statistics mean nothing in the real world and at my company results in an immediate pass on the applicant. The amount of times I’ve seen someone with 2 years or less of coding experience and then one of these stats showing them 80-90% proficient in a coding language kills me…this isn’t an rpg game, just list your years working with that language and your resume will be more respected by the guys reviewing your application

[@ali_kazmi_]

This is great advice, this type of stats are too mainstream.

[@daemon2880]

True. You're right!

[@cdey3886]

I absolutly agree with this

[@arnovandijk2278]

It’s not necessarily bad. I’m using those percentages, but in a different way. Basically synced them with progress% on Codecademy courses. Works like a charm. 😄

[@bethbudgets7771]

Just figured out what I'm doing today... Thanks!!

[@anahissalasalejo9834]

muchas gracias por el tutorial me encanto y lo pude adaptar a las especificaciones de mi versión que se manejaba de forma distinta las anidaciones.

[@GC-Tech]

I really like this. Congratulations on a job well done.

[@marynamarkova6491]

Thank you so much! It's very helpful!

[@unreal1420]

thank you, good video !! perfect teacher 😁

[@HerDigitalMedia]

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

[@mykalimba]

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; //

[@MaxTheKing289]

Or instead of using this.className he can simply use sectBtn[i].className += ' active-btn'

[@mykalimba]

@@MaxTheKing289 No, I wouldn't suggest this. My advice is to avoid using the "className" property altogether, because it is sloppy to have to include a space next to the class name in the string that you are appending. Just use "classList", and let the DOM take care of the implementation details.

[@dylan-j-gerrits]

You can change all the JavaScript by something a lot shorter: (function () { [...document.querySelectorAll(".control")].forEach(button => { button.addEventListener("click", function() { document.querySelector(".active-btn").classList.remove("active-btn"); this.classList.add("active-btn"); document.querySelector(".active").classList.remove("active"); document.getElementById(button.dataset.id).classList.add("active"); }) }); document.querySelector(".theme-btn").addEventListener("click", () => { document.body.classList.toggle("light-mode"); }) })(); And it is more eficient since the events occured only on the button click, and not everywhere on the body.

[@jacobhoggen162]

@@dylan-j-gerrits other functions didnt work for me but ur code did perfectly

[@jacobhoggen162]

anyone know why the sections show and then disappear after 1 sec

[@veereshbiradar1]

Amazing really waiting for this ❤️ video thanks for uploading

[@VladislavDerbenev]

Personal notes of going through the course as returning angular dev 6:30 - 21:34 Tutorial feels like sass typing exercise. With no indication of what exactly lines do or how teacher came up with it, it feels like that he's just re-typing the code from another monitor and I do the same after him. It doesn't change through the rest of tutorial. 28:55 Here's key moment for the next part with the error: arrow functions are keeping the scope of closure, while "function" creates a new own. "this" references current scope. console.log(this) can be used as a tool to understand the difference 29:50 This is interesting. I advice everyone to stop before 30:35 and try to solve or at least understand the problem yourself. Teacher first solves another error, not the logged one 32:35 how to find what's undefined there: In chrome you can put a breakpoint on the line with the error and check variables. You'll see that currentBtn.length == 0, so currentBtn[0] is undefined on the second button click (but not first), due to removing 'active-btn' but not actually adding a new one 33:20 you don't have to use function instead of arrow function. you can use event passed as first argument to access scope variables. Example of how to use event argument of callback instead of rewriting the arrow function github.com/Paragonid/Portfolio_Website_2022/commit/889a38f26777a714ecebc509ff82f7d3a13d2c1b (typescript) I fast viewed through as continuation of typing exercise. There are rare moments with insights of how problems appear and get solved, but imo it's not suitable for learning and not worth watching sass notes: 1. The Sass team discourages the continued use of the @import rule 2. The project has no splitting of scss into sub-files. 3. The use of 0rem 0em is redundant, should be just 0 4. !important should be avoided in most of the used cases 5. A lot of repetition and overlaying rules. Duplication of .left-header rule in the _media.scss

[@anandshukla9332]

I felt the same. sorry to say

[@VladislavDerbenev]

28:55 Here's key moment for the next part with the error: arrow functions are keeping the scope of closure, while "function" creates a new own. "this" references current scope. console.log(this) can be used as a tool to understand the difference 29:50 This is interesting. I advice everyone to stop before 30:35 and try to solve or at least understand the problem yourself. Teacher first solves another error, not the logged one 32:35 how to find what's undefined there: In chrome you can put a breakpoint on the line with the error and check variables. You'll see that currentBtn.length == 0, so currentBtn[0] is undefined on the second button click (but not first), due to removing 'active-btn' but not actually adding a new one 33:20 you don't have to use function instead of arrow function. you can use event passed as first argument to access scope variables. Example of how to use event argument of callback instead of rewriting the arrow function github.com/Paragonid/Portfolio_Website_2022/commit/889a38f26777a714ecebc509ff82f7d3a13d2c1b (typescript) - 2:44:09 I fast viewed through as continuation of typing exercise. There are rare moments with insights of how problems appear and get solved, but imo it's not suitable for learning and not worth watching

[@diegoberastain3612]

@@VladislavDerbenev Without the event as an argument you can use secBtn[i].className += " active-btn";

[@VladislavDerbenev]

@@diegoberastain3612 nice, I rewrote the loop as .forEach in my case, but having access to i as workaround is probably why the teacher went with for loop instead of forEach in first place.

[@zunurainojuolape244]

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

[@joseahumada3495]

Thank you very much for shared us your knowledge, greetings from Colombia 👋👋👋

[@TheNewton]

After 2 decades maybe this will be what finally gets me to sitdown and make a portfolio website for myself.

[@universalcontent1592]

Yo u funny, sooo uhhh how’d it go 😂

[@tomasburian6550]

Absolute bomb, thanks a lot!

[@quanbuithanh6775]

OMG! the author is Vietnamese people, this is the first time I watched it, you are so good!

[@dclxviclan]

I creating my roadmap for web knowledge, and thu$ tutorial be a favorite in list 👍, thks guys 💻🤟

[@mattwillis8900]

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!

[@MrReese]

A page should be responsive and thus adjust to screen width, but mobile first seems to be the wrong approach in my book.

[@Quasar_Energy]

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

[@universecode1101]

Watch video on KZbin and ... Create projects 🔥

[@ahmetyasir9943]

yes it is very hard to catch the points. He passed very fast

[@MichaelShingo]

I think this is good for understanding how to structure a website, so next I can write without this much guidance

[@ramankumar41]

Highly recommended video for beginners !!!

[@TrevorTyroneSSH]

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

[@liperanqey]

That's very cool, ur talented now I will try to make one myself

[@mb-techmedia8494]

I have just created this beautiful website . Thank you for the details explanation and letting me know how to debug some code

[@cristianadejola464]

i have some problem in scss. everything working fine. until i . .control{ padding: 1 rem}; i wrote all the code. but no reaction. can you help me out. where is my mistakes.

[@lawless9520]

Learning a lot from this channel ❤❤❤

[@edwintorres717]

Thank you I loved this video :)

[@PanamanianTickler]

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!

[@abdulrahmanmusamohammed4387]

Nice build up…I’m fascinated!

[@tanmoy.mazumder]

awesome. now i just need stuff to actually put on the portfolio

[@jhonnatarios428]

Yesssss... I love this video :)

[@codingislove3707]

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

[@bethanyann44]

check out these tutorials. freecodecamp has featured him in the past, and he's got some great-looking typescript/react tutorials that are easy to follow along with. kzbin.info

[@whitevisuals]

thank you this was great please do another video.

[@CaptainCoder1]

It is Awesome video i am learning so much practicle implememtation what i have learnt. Thank you so much for bringing such an great video ❤❤❤❤❤❤❤🎉🎉🎉🎉🎉🎉🎉🎉🎉😅😅😅😅😅😅

[@agnieszkadrabczyk4917]

Hey! It's an amazing resource! Thanks so much. I can't make media part work at all. Any ideas?

[@droneacharya6057]

just in time. i was thinking of making one yesterday night.

[@ahmedrazashibli8743]

Today i was making a portfolio website and then they uploaded this gem

[@sthefanocarvalho2823]

Another great one!

[@marginiszero]

This is an awesome tutorial

[@MAN-qh4pd]

thanks for your team

[@ernuchillrelax]

2:40:00ish i just changed the secondary a little bit and inverted all the grays, it worked perfectly

[@abuzaransari5320]

Thanks I need this kind of video as a struggling freelancer!

[@procoder7099]

Best of luck👍👍

[@pzg2008]

the spacing problem at 3:08:20 was wild!

[@christiano6749]

Nice video 👏... Worth it 💯

[@israelbosun4032]

Wao, what a tutorial, one of the best tutorials on Javascript I've followed so far, Joy made following along so easy. I only wonder how long I must spend on JS to be able to do complex kinds of stuff like this on my own. Thank you Joy and freeCodeCamp

[@ogarjosephodama1878]

Nice work bro 😍

[@aurelienbaraka2527]

Thank you very much for this. I'd like to know the dimensions of the picture on first section please.

[@sachishah2456]

Question: How are the left-contact and right-contact divs in the contact section made to be left and right of each other. The right-contact div appears below the left-contact div in my website. I've checked the code so many times to make sure I'm not missing anything. Did anyone else face this issue?

[@yurisoares2596]

Fot the Media Query, again the problem could be solved by Specificit Calculator. Instead of: header .right-header {}; Using: .header-ccontent .right-header {}; would solve it. This would put them as same strength, but because this is at a "later" part of file, the CSS is gonna overwrite the previous one.

[@sweetmelon3365]

suggestion: i think the buttons should have a text so visitors dont have to click them and find out what they're for. plus i also want it to scroll through the different sections, meaning the different sections should be directly one after the other while scrolling AND if the user wants to quickly navigate to a section then he can use the buttons

[@caducoder]

Do the changes yourself, you'll learn a lot!

[@hellobye9720]

Do them yourself bro 😑😑

[@kamaltiwari4176]

Thank you for creating this video, it helped me to build a portfolio site which would have otherwise taken me a very log time to complete as I am just getting started on my software development journey. One thing I am struggling with now is how are projects added to the portfolio sections in a way that a user can go into an area and see only html or javascript projects. I have a question the contact form doesnt have a send button, if a viewer was to attempt to make contact where would their message go because there is only a download CV button in the contact form.

[@Mazoane]

Awesome video! Already watching! I wonder if it is better to put your skills in percentage or leave it without that estimation. Thank you a lot for the great content!

[@JPNoro]

Personally, I'm against putting in a percent, because its too subjective

[@yersonoliverfelixperez4727]

thank you very much for the video, I enjoyed it very much, just an observation, for the fromulario of the contact me section there is no send button.

[@tajirihassan]

hello, thank you for the tutorial, i'm wondering how to include the blog articles and open it when we click on the blog thumbnail, i will appreciate any help

[@kurtthorsten4463]

hello! very good video. I was just wondering if the "download CV" button raises any flags of potential employers. Are pdfs always safe? or is it maybe better to make your CV accessable via website so others don't have to download it. I am new to this, but maybe some recruiter or anyone who has experience with this can help me out here. ty

[@edgarsbukovskis4377]

Thanks!👍🏼

[@kartikgulati557]

i cant get any of my main-content in the header to actually show it just stays blanks while other sections work fine any idea?

[@chrissg7141]

Hi this is really an awesome tutorial! :) However, i am having some trouble trying to upload it to github pages - Is there an additional step required to compile the SCSS files (especially the media queries?) thanks! @The Code Dealer

[@TheAdnanSakib]

These types of portfolio websites have become so common. I just want to learn how to build a simple and modern portfolio website where I can display my work and have a blog.

[@AbdLin1]

Thank you

[@user-ef3pe5li8h]

cooooool chanell hello iam abdallah from egypt i love this chanell

[@tpsgamerRS]

Loving the tutorial so far. I have an issue early on with my buttons showing which is actually selected. Inside of the console and inspector everything updates and changes active classes, etc. checked all my code and it’s all the same up to the point I am at. Please help if you have any advise on what I might’ve missed.

[@MrYossell]

If you're talking about the part at around 33' -- there's a difference between '.active-btn', and ' active-btn' (the second has a hard-to-see space between the first quote and the 'active'. Without this space, it doesn't work). Setting this.className += ' active-btn' (with space) made it finally work for me.

[@eduardogomes1827]

@@MrYossell i added the space and it still doesn't work, what else can it be?

[@PatrickPereiraVieira04]

Is there a simple way to have different transitions for each section? I've been messing around with the code a little but can't find a solution. Edit: I found a solution. Example: #contact.active { display: block; animation: contactAnim 1s ease-in-out; @keyframes contactAnim { 0% { transform: scale(0); } 100% { transform: scale(1); } } }

[@LUCKYKUMAR-wj9pm]

Thank you so much

[@rodrigoacevedo7512]

Thanks, you rule!

[@anasal-muslim_alkurdi]

Interesting this channel is very useful ngl

[@tonimacak5188]

Nice work!

[@okenk.6379]

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];

[@princessekere4700]

Thank you, this really helped me

[@okenk.6379]

@@princessekere4700 welcome 🤗

[@ahmedalsaadi8648]

Thank you so much

[@kalugy]

Thank you!

[@colorlessink]

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

[@codingstrade]

Nice Tutorial

[@dambujopaulo4204]

Nice tutorial

[@javascriptexpanse]

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

[@-flashsnipes]

thnk u bro

[@moazabdelmonem5381]

How do you make the blog section hover like the portfolio section. I want my portfolio to be a combination of the blog section and the portfolio section. For example, I want an explanation (under the portfolio item) and when I hover over the image, it will show the project sources.

[@alphaphantom3846]

para los nuevos como yo en este maravilloso mundo tratando de aprender grid-gap no existe mas para los cuatro ejes en cuanto espacio ahora se utiliza para los cuatro ejes solo gap... lo dejo como apunte nada mas 😅

[@Konstantinosiakovou]

About the font-awesome use the latest version cause the video`s version does not load correctly the instagram icon.

[@yanceq2690]

Yes!

[@holysandwich4075]

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.

[@zarnabkhan]

I am facing the same problem where did you make the edits?

[@holysandwich4075]

@@zarnabkhan in almost every container (main content container, portfolio container, blog container etc) do a padding on left and right with some value like 5rem. This problem occurs because our pc don't match the resolution, with this utuber's. edit: (this problem can also be solved by changing in settings. try 100% in screen size with recommended pixels. I'm using window 11. But I don't want to change my settings so I add paddings)

[@zarnabkhan]

@Holy Sandwich thank you for the help all I needed to change was remove the padding property from the section in css

[@omarmohammd5276]

maybe change the padding

[@thedapperfoxtrot]

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

[@donavenbruce4407]

Whats your boot camp if you dont mind? i want to take a bootcamp one day

[@naijasongs3462]

Same here, please what is the name of your bootcamp

[@thedapperfoxtrot]

@@donavenbruce4407 Sorry, just saw this! Indeed, I'm at Juno. You'll have to do your research in your respective area to find who might have the best reputation, but I've heard great things about other boot camps in general. It's been a great experience thus far. I'll be vlogging my journey through it! kzbin.info/www/bejne/nniqgZtpq9yCY7s

[@34adnanali26]

I am doing this as my html css project

[@scooby8365]

in 1:08:44 why did he put transition and transform in the bg-text? isnt the transition already comes with the about container?

[@azammakhamatmuratov7120]

Thanks

[@rubencarbajal304]

I have followed the video a few times but I keep getting stuck around 45:22 . When I click the buttons they don't change the section color to what I set them to. I check the console and the active is working when each one is click and the button turns green as well but the section color dose not change. Dose anyone know what I could be doing wrong?

[@manishabasnet1658]

Hey, I am having the same issue. Did you figure out what was the issue?

[@yessirski7868]

wish there was some explanation throughout each step but then again this I am assuming isn't a beginner friendly tutorial. Nonetheless, I learned something new.

[@yazeeddaher3429]

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

[@sanaved7codes]

My javascript code for active class is not running and suggestions?