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
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. 😄
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.
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
@@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
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
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 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.
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 :)
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
@@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.
@@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.
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 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.
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.
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.
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!
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!
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
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!
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];
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
@@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! th-cam.com/video/hGGPh3vwO-Y/w-d-xo.html
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.
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 ?
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.
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?
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 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)
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.
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.
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"; }); } } 👍👍
@@tonie_victor 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
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
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. th-cam.com/users/weibenfalk
Thank you for the video, but the explaining will need to be worked on. Only an Hour in and I'm confused about half the stuff we're doing. I don't know the why and feel like I am just copying what you're coding. Nevertheless, thanks for the content and the effort you put in
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.
@@stymsaw I've noticed that too! some of the classes he added weren't even used so i just decided to quit the video at the first half since it got very confusing. I was having an issue where i had to spam click the buttons to change the section. There was this another issue where the transition between sections wasn't working very well. Sadly, I'm gonna have to pass on this one.
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.
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!
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
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 TH-cam had support for markdown code formatting, but it seems after so many years, still haven't.
@@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.
@@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.
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
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); } } }
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 ❤❤❤❤❤❤❤🎉🎉🎉🎉🎉🎉🎉🎉🎉😅😅😅😅😅😅
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?
good video but not in sync with the actual code on github. There isn't any kind of direction in the actual github code. Code seems different than of the actual code and the video. Its just a personal opinion and it is very hard to catch up with the video for the viewers like me who don't have any experience in programming.
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.
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.
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
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
Not a fan of the skill levels. It might give interviewers false expectations. Imagine puting 100% on React and your interviewer is an expert at React but doesn't consider his/her skill level to be at 100% mastery. You're gonna be in a world of pain when you can't answer his/her "advanced" level questions about React. They're gonna be really disappointed and think, "Thought you were an expert in React? How can you not know more than me but proclaim to be an expert?" So definitely don't put those skill percentages. You're doing yourself a disservice.
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.
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
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
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 😅
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!
At 54:20 The polygon function should have four pairs of coordinates, but you've provided five pairs: clip-path: polygon(0% 0%, 46% 0%, 79% 100%, 0% 100%);
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.
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.
const allSections = document.querySelector('main-content'); allSections.addEventListener('click', (e) =>{ console.log(e.target); I try to console out but it gives me error. SCRIPT5007: Unable to get property 'addEventListener' of undefined or null reference Do you know why? I followed correctly until 39.06 and got stuck at here.
allSections return NodeList which has no event listener, i replace it with allSections[0].addEventListener('click, (e)=>{ console.log(e.target.getAttribute("data-id") }
Just a personal suggestion that never add those stats like python 70% html 80% etc etc to your portfolio
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
This is great advice, this type of stats are too mainstream.
True. You're right!
I absolutly agree with this
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. 😄
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.
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
@@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
Thank you for your feedback. this really helps making better videos in the future.
I couldn’t even get font awesome to work 😔
@@TheChava93 yea all my fonts show as boxes with numbers. the instagram icon shows up but it's black on the dark background....
After 2 decades maybe this will be what finally gets me to sitdown and make a portfolio website for myself.
Yo u funny, sooo uhhh how’d it go 😂
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
I felt the same.
sorry to say
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
@@VladislavDerbenev Without the event as an argument you can use secBtn[i].className += " active-btn";
@@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.
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 :)
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
@@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.
@@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.
@@jamesvereker4638 Though I'm just a beginner and don't know how to accomplish YET.
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; //
Or instead of using this.className he can simply use sectBtn[i].className += ' active-btn'
@@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.
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.
@@dylan-j-gerrits other functions didnt work for me but ur code did perfectly
anyone know why the sections show and then disappear after 1 sec
Muchas Gracias por este aporte!!
en 1:34:05 para que funcione el ::before hay que agregar display: block; y position: relative;
exitos!!
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.
This is great, learning alot watching you work through the problems, thanks for posting!
I so much love this tutorial. I have been having hard time with JavaScript.
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!
A page should be responsive and thus adjust to screen width, but mobile first seems to be the wrong approach in my book.
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!
Good video overall. Suggestion: a bit more detailed explanations would go a long way, especially for relatively new developers :-)
Watch video on TH-cam and ... Create projects 🔥
yes it is very hard to catch the points. He passed very fast
I think this is good for understanding how to structure a website, so next I can write without this much guidance
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
Wow!! This is incredible. This will be my project for the next two weeks, you are awesome!
Thanks I need this kind of video as a struggling freelancer!
Best of luck👍👍
OMG! the author is Vietnamese people, this is the first time I watched it, you are so good!
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
i would appreciate you share how you were able to resolve the issues, as some of his codes are not functioning well
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!
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, this really helped me
@@princessekere4700 welcome 🤗
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.
1:31:35 do not forget adding "position: absolute" into &::before element .stat-title
'hmmm, i wonder why its doing that' - Every developer ever, great quote!
Thanks so much for making this - I had so much fun coding with you and I learned A LOT!
Today i was making a portfolio website and then they uploaded this gem
Highly recommended video for beginners !!!
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
Do the changes yourself, you'll learn a lot!
Do them yourself bro 😑😑
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
@@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! th-cam.com/video/hGGPh3vwO-Y/w-d-xo.html
Great video, thanks! Really improved my CSS understanding a lot watching this.
Thank you very much.
This video improved my CSS a lot.
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.
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 ?
My javascript code for active class is not running and suggestions?
awesome.
now i just need stuff to actually put on the portfolio
Beautifully designed portfolio site . Thank you for the video.
I have just created this beautiful website . Thank you for the details explanation and letting me know how to debug some code
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.
Good job . Absolutely fantastic. I love everything about it. Keep it up. I kinda wish it was made with Vue JS though.
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?
Hey, I am having the same issue. Did you figure out what was the issue?
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.
I am facing the same problem where did you make the edits?
@@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)
@Holy Sandwich thank you for the help all I needed to change was remove the padding property from the section in css
maybe change the padding
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.
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.
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";
});
}
}
👍👍
this.classList += " active -btn"
Why is there a space after the opening quotation mark?
@@tonie_victor 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
this worked for me thanks, but going ahead to switch between sections and displaying of background-color got me lost , pls help
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
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.
th-cam.com/users/weibenfalk
thanks for the video, now I'm confident using css styles and learnt some pure javascript implimentations as well. 😘
2:40:00ish i just changed the secondary a little bit and inverted all the grays, it worked perfectly
Thank you for the video, but the explaining will need to be worked on. Only an Hour in and I'm confused about half the stuff we're doing. I don't know the why and feel like I am just copying what you're coding. Nevertheless, thanks for the content and the effort you put in
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.
Should I code along or should I just watch it, how does it work best for you guys?
@@stymsaw I've noticed that too! some of the classes he added weren't even used so i just decided to quit the video at the first half since it got very confusing. I was having an issue where i had to spam click the buttons to change the section. There was this another issue where the transition between sections wasn't working very well. Sadly, I'm gonna have to pass on this one.
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.
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!
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
change sections to querySelectorAll
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 TH-cam had support for markdown code formatting, but it seems after so many years, still haven't.
@@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.
@@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.
Thank you very much for shared us your knowledge, greetings from Colombia 👋👋👋
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
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);
}
}
}
This is great! Could you make a video of how you prepare the design etc for the website?
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
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 ❤❤❤❤❤❤❤🎉🎉🎉🎉🎉🎉🎉🎉🎉😅😅😅😅😅😅
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?
the spacing problem at 3:08:20 was wild!
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.
good video but not in sync with the actual code on github. There isn't any kind of direction in the actual github code. Code seems different than of the actual code and the video. Its just a personal opinion and it is very hard to catch up with the video for the viewers like me who don't have any experience in programming.
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.
Same
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.
@@JaviersCovers Really appreciate, it worked after making this change, thanks a lot
@@JaviersCovers Thanks Man You are a life saver
thank you somuch i was struggling at this stage
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
That's very cool, ur talented now I will try to make one myself
Sir, after building this, will I be able to host it on GitHub Pages, or will I need a separate hosting service?
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.
Learning a lot from this channel ❤❤❤
I really like this. Congratulations on a job well done.
cooooool chanell hello iam abdallah from egypt i love this chanell
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
Just figured out what I'm doing today...
Thanks!!
Thank you so much for this video. I learned a lot from it. More of this good stuff! :)
Not a fan of the skill levels. It might give interviewers false expectations.
Imagine puting 100% on React and your interviewer is an expert at React but doesn't consider his/her skill level to be at 100% mastery. You're gonna be in a world of pain when you can't answer his/her "advanced" level questions about React. They're gonna be really disappointed and think, "Thought you were an expert in React? How can you not know more than me but proclaim to be an expert?"
So definitely don't put those skill percentages. You're doing yourself a disservice.
Agree
I creating my roadmap for web knowledge, and thu$ tutorial be a favorite in list 👍, thks guys 💻🤟
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.
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
thnk u bro
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?
Stuck at displaying different colors for sections. On inspect display: none. active { display: block} not functioning. please help
I have same issue. Please how did you solve it
@@emuemhonjieonosereme2495 i gave up on this project
@@sirfrancis6471 thanks
Yes- same issue
Hi FreeCodeCamp, thanks! for this. It really is helpful and thanks to the developer too.
1:34:11 - Once I added position: absolute to the &::before pseudo selector my divider showed.
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
About the font-awesome use the latest version cause the video`s version does not load correctly the instagram icon.
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 😅
18:39 after writing the .controls { class, I cannot seem to get the buttons to the right. Can someone help?
just in time. i was thinking of making one yesterday night.
I really appreciate this work and thanks so much for helping me learn new stuff ❤️❤️❤️
display of background color of each sections is not working with his exact code and steps, any alternate way to follow?
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!
Personally, I'm against putting in a percent, because its too subjective
At 54:20 The polygon function should have four pairs of coordinates, but you've provided five pairs:
clip-path: polygon(0% 0%, 46% 0%, 79% 100%, 0% 100%);
THE tHi THis
Thank you very much for this.
I'd like to know the dimensions of the picture on first section please.
need to explain more and tell why he is doing the things he is doing to be more useful for beginners like me.
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.
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.
@@MrYossell i added the space and it still doesn't work, what else can it be?
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.
Suggestion: Make sure they show the final product at the very end of the video so we can see what it should look like at the end.
thank you this was great please do another video.
how did you get rid of the bug? when control buttons are clicked, the animation for the section is executed for the buttons as well, thesis a bug
Amazing really waiting for this ❤️ video thanks for uploading
Hey! It's an amazing resource! Thanks so much. I can't make media part work at all. Any ideas?
Thank you so much! It's very helpful!
I am doing this as my html css project
const allSections = document.querySelector('main-content');
allSections.addEventListener('click', (e) =>{
console.log(e.target);
I try to console out but it gives me error.
SCRIPT5007: Unable to get property 'addEventListener' of undefined or null reference
Do you know why? I followed correctly until 39.06 and got stuck at here.
allSections return NodeList which has no event listener, i replace it with allSections[0].addEventListener('click, (e)=>{
console.log(e.target.getAttribute("data-id")
}
for me, i accidentally had 'main-container' in my HTML and then was calling main-content in javascript