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.

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

--

[Ayush-pnjk]

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

[jamesvereker]

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 :)

[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.

[TheNewton]

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

[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; // <--- "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 to add the class, and to remove it.

[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

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

[okenk.]

if anyone is having an error for the part: at 37:32-
"const allSections =
just add an [0] before the semicolon, resulting to
const allSections =

[bayuanggoro.d]

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

[learnchess]

Thank you to FCC and to the developer who filmed the video. It turned out to be a viusally appealing website, it was also good to see the developer struggling at certain points and seeing how he used the inspect tool was educative.

[AaronGoforth-ji]

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

[azubuikeottah]

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

[Quasar_Energy]

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

[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!

[Athenaforever]

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!

[gonzalotoscano]

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

[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

[abuzaransari]

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

[kimberlystamets]

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

[mattwillis]

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!

[sweetmelon]

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