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:
We just started making portfolio websites. Curious to see how much overlap I find between this tutorial and my boot camp learnings.
Whats your boot camp if you dont mind? i want to take a bootcamp one day
Same here, please what is the name of your bootcamp
@Donaven Bruce 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! https://www.youtube.com/watch?v=hGGPh3vwO-Y&list=PLRYSMYTrErZh5UFc7dV_i_kTqn6T6dPJq&index=1
Thank you, FreeCodeCamp for hosting this video, It’s like a dream coming true. Hope you enyoy the video everyone!π
thank u sir
Yeah as a Developer and YouTuber I can understand ππ»
Beautiful work, thank you so much!
@Marko Svager true π
What is this program you are using? Is it free?
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’)
}
Thanks, Se Ku. π
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.
the active-btn background colour styling is not working idk y, can u please help me 22:56
@Yuri Soares this worked for me as well, thank you for advice
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.
Well said…….
@Mr. Polkadots : Did you figured that out since?
Yeah you have to imagine to talk with a real person and forget you are lonely with mic and pc
@AC Videography Front End I think…
@KT you must choose the same version on Fontawesome as you did on Fontawesome Cdn
Good video overall. Suggestion: a bit more detailed explanations would go a long way, especially for relatively new developers π
Watch video on YouTube and … Create projects π₯
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.
you just motivated me to start working on it.
How to download cv from this?
Beautifully designed portfolio site . Thank you for the video.
This tutorial is great! I was just thinking about making a portfolio website for myself. Thanks a lot freeCodeCamp!
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
Please make an Part-2 of this, Its really impressive
Thanks MacLinz & freeCodeCamp for this video π
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!
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.
anyone know why the sections show and then disappear after 1 sec
@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’)
})
})
@Πngelevski Blagoja : It’s the same, but you don’t change the “active” class. No?
@Dylan J. Gerrits Thankyou man, huge thankyou
Good job . Absolutely fantastic. I love everything about it. Keep it up. I kinda wish it was made with Vue JS though.
Muchas Gracias por este aporte!!
en 1:34:05 para que funcione el ::before hay que agregar display: block; y position: relative;
exitos!!
This is great! Could you make a video of how you prepare the design etc for the website?
Good video overall. Suggestion: a bit more detailed explanations would go a long way, especially for relatively new developers π
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];
Thank you so much
Thank you!
Lifesaver. Can you explain why it worked for him and is not working now/or for certain people? Thankyou.
This “[0]” saved me, thank you Man! π
Thank you!! π
Amazing tutorial this is. Just outstanding βΊοΈ
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!
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!