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

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

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

[@finding_inner_self]

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.

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

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

[@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 😂

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

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

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

[@TrevorTyroneSSH]

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

[@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?

[@saneNenchanted]

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

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

[@SeanP1982]

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

[@AaronGoforth-j7i]

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

[@azubuikeottah6883]

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

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

[@learnchess4033]

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.

[@kimberlystamets6288]

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

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

[@sulaimanzainab-n7r]

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

[@gonzalotoscano4758]

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

[@Harshanandita]

hey at 45:00 on my console, it saying can not read properties of undefined ( 'remove' ) when I'm clicking different buttons, please help me solve the problem

[@jeremiahhaastrup8692]

change sections to querySelectorAll

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

[@abuzaransari5320]

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

[@procoder7099]

Best of luck👍👍

[@juskaranbuted4136]

45:47 I cannot go through with this output - the color of the background didn’t change upon clicking any button… Anyone could help me for that . Thanks

[@juskaranbuted4136]

its say, I got an error on this code ==== sectBtn[i].addEventListener('click', function(){

[@jeremiahhaastrup8692]

change to const allSections = document.querySelectorAll('.main-content')[0];

[@bayuanggoro.d5473]

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

[@quanbuithanh6775]

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

[@ramankumar41]

Highly recommended video for beginners !!!

[@terrencejames7326]

44:44 I keep getting an error cannot read property of null (reading ‘classList’) at HTMLBodyElement….been on this for hours and I still can’t figure out what’s wrong

[@jenniferfan8155]

same here. Did you manage to solve this ?

[@jeremiahhaastrup8692]

@@jenniferfan8155 change to const allSections = document.querySelectorAll('.main-content')[0];

[@cheeksmcclappeth6407]

@@jeremiahhaastrup8692 Thank you so, so very much!!!

[@ExtremeNitro1]

I have typed the same code on my machine uptil 17:55. However, it shows a blank white page on live server. Doesn't show the background color nor the buttons. Please help.

[@saitejapasupulety2574]

18:39 after writing the .controls { class, I cannot seem to get the buttons to the right. Can someone help?

[@suprgamer2703]

Getting an error after 38:50 that allSections.addEventListener is not a function

[@mohammadehsan6847]

Solved: in app.js, in line:4, change document.querySelectorAll to just document.querySelector so it will be const allSections = document.querySelector('.main-content'); You can see that he actually made this change but he didn't show it in the video.

[@mohitjaiswal3526]

@@mohammadehsan6847 but also having problem when clicked on items color not changing .

[@edbosisto8688]

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

[@tanmoy.mazumder]

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

[@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 😑😑

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

[@sanaved7codes]

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

[@AsifDawood]

Beautifully designed portfolio site . Thank you for the video.

[@chelseabing]

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

[@briannaford9200]

1:08:58 if anyone is having problems with Seeing the about me main title like me here’s what you do. Instead of About memy stats on one line it should be broken up into 2 lines like this. About me my stats Hope this helps someone having the same problem I had.

[@yashaswini9149]

Hey, I was watching this and tried coding along, I found out that my vsc is not running my html file, the icon isn't showing on the saved file nd when future figuring out, it turns out that HTML5 the extension is deprecated. How do I make it read my html file ?

[@JasonStormbringer]

At about 23:50, when he starts the JS portion of the video, it seems like he's just pasting or auto-completing his code from nowhere... how does that work? Are there shortcuts he's using that I don't know about?

[@ahmedrazashibli8743]

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

[@dipakjain5982]

Greetings I am getting problem at 2:46:00 where the @query part is starting. I am unable to import the scss file into the css and can't get it applied in the HTML file. Please if any one has solution, help me out.

[@yurisoares2596]

I have been told to avoid using flag !important in CSS, seen like the problem was specificity. While I'm still in 23:33, seems like just putting: Code {.active-btn{...} and .controls .active-btn i {...} } under Code {.controlls .control {...} and .controlls .control i {...}} would solve it. I searched if KZbin had support for markdown code formatting, but it seems after so many years, still haven't.

[@yurisoares2596]

@@Cyrus_G I can't say where is it, but if you are having problems with overwrite, open Dev Mode in browser, and inspect the container/element you wish, there is a place in css field which shows the specificity. Then google it Specificity Calculator, actually with this tool you can just put yours selectors and see how you should select an element to overwrite.

[@Cyrus_G]

@@yurisoares2596 Yeah, I am a bit familiar with dev tools and I use it more often than I use my editor since i dont want to mess with my actual codes and have snowball effect. but yeah i am still exploring dev tools. about !important, I am prolly doing this wrong but. I am looking for ways how it will mess with my output and trying to look for solutions to fix it, and tried putting bootstrap in my code and use !important in mediaquery. Now I am looking for a way to solve the solution by trying different things when in that kind of situation. Since I heard that sometimes you are put in a situation where it is said to be impossible to fix but you need to do it anyways since the lead says it needs to be this way.

[@wicksjutsu]

I am having difficulties with 54:18, it seem's that i can only get the image to show with no h-shape background appearing.

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

[@noon8037]

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

[@samikhairy8289]

me to

[@Mr_Brian]

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

[@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 ❤❤❤❤❤❤❤🎉🎉🎉🎉🎉🎉🎉🎉🎉😅😅😅😅😅😅

[@joseahumada3495]

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

[@theeplacids1052]

My header doesn't remove the active class when switching to other sections. I have cross checked the code but everything seems fine. Active only changes on the controls but not on the sections.

[@aimanfariz7642]

Same

[@JaviersCovers]

Change the last const from querySelectorAll to just querySelector, like this: const allSections = document.querySelector('.main-content'); it's a mistake in the video but it will make it work.

[@jessejason3678]

@@JaviersCovers Really appreciate, it worked after making this change, thanks a lot

[@sirfrancis6471]

@@JaviersCovers Thanks Man You are a life saver

[@vlogs_________5400]

thank you somuch i was struggling at this stage

[@manashbehera961]

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

[@sirfrancis6471]

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

[@emuemhonjieonosereme2495]

I have same issue. Please how did you solve it

[@sirfrancis6471]

@@emuemhonjieonosereme2495 i gave up on this project

[@emuemhonjieonosereme2495]

@@sirfrancis6471 thanks

[@juskaranbuted4136]

Yes- same issue

[@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?

[@discoveryunit7753]

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

[@abrambeatboxflutist]

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();

[@abrambeatboxflutist]

figured it out! it should be: replace(' active-btn', '');

[@mrduckieman2397]

My active button doesn't change when I click a diffrent icon. At 33:27

[@roykinn7]

My problem was on line 11 I did not put a space before 'active-btn', when I added the space the line reads like this: this.className += ' active-btn'; The problem was without that space it was adding active-btn right on the back of control-1 class in the html (or 2,3,4)... so it would end up messing up the class like this: instead of I did not see this as a solution in any of the comments.

[@Aditya-yn8jf]

​@@roykinn7this works ! , Thanks.

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

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

[@lawless9520]

Learning a lot from this channel ❤❤❤

[@vrb199]

Amazing really waiting for this ❤️ video thanks for uploading

[@TranNguyen-mv6ln]

19:40 I can't type like that. My computer doesnt allow me to type like that. Please help me

[@zunurainojuolape244]

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

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

[@gojosatoru4238]

45:42 in css line 87 .active{display: block;} does not work, can somebody help?

[@Achatujaribu]

Did you solve it

[@juskaranbuted4136]

same

[@jeremiahhaastrup8692]

@@Achatujaribu same here. Still trying to solve it

[@jeremiahhaastrup8692]

change to const allSections = document.querySelectorAll('.main-content')[0];

[@liperanqey]

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

[@dclxviclan]

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

[@bogglewebdesignanddevelopm2323]

21:30 Why my background is still white and the icons are still at the left top?

[@Addy-Mo]

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.

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

[@hertderg12]

Solved it myself, my Styles File was saved as .css not .scss. Felt nice recognizing that and making the change on my own. Nested elements working now.

[@hertderg12]

And now that it is .scss white overrules the blue background and also pushes my controls to the top left hand corner of page. lol. Anyone have a tip?

[@Athenaforever2308]

HELP: 1. I got stuck at the blog section @ around 1:58:52 I cannot build the sections. 2. And then I kept going and I was unable to make my page responsive. Though I followed his instructions. 3. Lastly If I want the contact page to be LIVE, does anyone have a suggestion of a tutorial I can follow to make it Live. I thought I WOULD try and reach out! Thank you if anyone is able to assist me.

[@juheehong7445]

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

[@eduard289]

HELP please ! 17:30 how did he autofill all those divs? Somebody ans. me pleaseee !

[@cogsofrastudios6064]

He did not auto fill, he copied his code from his main project and pasted it in.

[@bethbudgets7771]

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

[@christiano6749]

Nice video 👏... Worth it 💯

[@ernuchillrelax]

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

[@GC-Tech]

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

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

[@sthefanocarvalho2823]

Another great one!

[@marynamarkova6491]

Thank you so much! It's very helpful!

[@jhonnatarios428]

Yesssss... I love this video :)

[@droneacharya6057]

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

[@mohit7717]

45:46 Why color not shown sectionwise if i wrote the same code . Can anyone help Please?

[@zehidaidowu6015]

i am facing the same thing. have you found solution to it

[@mohit7717]

@@zehidaidowu6015 nope

[@tomasburian6550]

Absolute bomb, thanks a lot!

[@متجرالمميز-ذ1غ]

cooooool chanell hello iam abdallah from egypt i love this chanell

[@HerDigitalMedia]

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

[@redskapgsta]

why when I try to switch between sections it's not work? even though it's the same as the tutorial. sorry I'm beginner of this is

[@samuelalayande913]

33:33 please how did you get the the code to work after removing the arrow function

[@cogsofrastudios6064]

He gives the explanation but it is super quick and hard to pick up on, it took me a minute to get as well, but what it comes down to is that on line 10 he put the following bit of code: sectBtn[i].addEventListener('click', function() =>{ This doesn't work because, according to him, this bit at the end "function() =>{" does not support the "this.className += ' active-btn" on line 13. So you need to change line 10 to be this instead and you can keep the rest of the function the same: sectBtn[i].addEventListener('click', function(){

[@jeremiahhaastrup8692]

Having an issue at 46:00 to get the sections to display their background color. Anyone got any advice?

[@jeremiahhaastrup8692]

Fixed it. change to const allSections = document.querySelectorAll('.main-content')[0];

[@zehidaidowu6015]

hey thank you so much. sending so much love from here

[@Aditya-yn8jf]

@@jeremiahhaastrup8692 its not working, when I click back on home button it's not displaying it's color rather showing for contact button.

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

[@Casper.002]

If you have problem at 1:34:29 just put "position: absolute" in the before pseudo-element.

[@unreal1420]

thank you, good video !! perfect teacher 😁

[@pzg2008]

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

[@edwintorres717]

Thank you I loved this video :)

[@patrickniyibizi4651]

why my browser is not displaying the styles from scss file? any one can help It looks like sccs is causing the issues in browser?

[@tajirihassan]

press F5 button to clear your browser's cache, if it doesn't worrk, check your css link

[@chukaonwuka1888]

allsections.addEventListener('click', (e) =>{ console.log(e.target); const id = e.target.dataset.id; if(id){ sectbtn.forEach((btn)=>{ btn.classList.remove('active') }) e.target.classList.add('active') sections.forEach((section)=>{ section.classList.remove('active') }) const element = document.getElementById(id); element.classList.add('active'); } }) i keep getting an error when doing this... how do i fix it please

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

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

[@whitevisuals]

thank you this was great please do another video.

[@meso9497]

Adding and removing active-btn class, here is another way you can implement the process: function sectionTransition() { for (let i = 0; i < secBtn.length; i++) { secBtn[i].addEventListener("click", function () { let activeBtn = document.querySelector(".active-btn"); if (activeBtn !== null) { activeBtn.classList.remove("active-btn"); } this.classList += " active-btn"; }); } } 👍👍

[@tonievictor]

this.classList += " active -btn" Why is there a space after the opening quotation mark?

[@andriichekanovskyi9369]

@@tonievictor to prevent collapsing class names, e.g. "control-1 active-btn" without that space will be "control-1active-btn" what it is not valide class name

[@sulaimanzainab-n7r]

this worked for me thanks, but going ahead to switch between sections and displaying of background-color got me lost , pls help

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

[@Squash101]

The images from fontawesome don't pop up any advice. Stuck at 17:15

[@NegroHp1995]

You have to create a fontawesome account, then they'll give you a "kit" which is a piece of code that you have to paste in the html file. After that, every icon should appear without problem.

[@Squash101]

@@NegroHp1995 Thank you! Also one more thing turns out my style.css folder isn't linked to the index one how would I go about doing it. I'm not using SASS like the user is it okay for me to just use styles.css

[@NegroHp1995]

@@Squash101 You can link it with

[@Squash101]

Ricardo Hdz I couldn’t get it to work the css wasn’t working when I tried the downloading cass but it turns out this one isn’t really working either. Were you able to make the css work?