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 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
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.
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!
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!
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
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];
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!
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.
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.
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
@@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! ua-cam.com/video/hGGPh3vwO-Y/v-deo.html
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. ua-cam.com/users/weibenfalk
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.
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)
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.
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 ?
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.
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 UA-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.
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%);
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
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!
I will openly admit that this is a beginner problem but never the less this stumped me for a full 5hrs before I managed to figure it out. You never explained in the video how to utilize the live SASS compiler add-on and as such my about section refused to format correctly because the code in my styles.scss was never being complied down my styles.css file. For those of you that are having formatting issues with regards to this project, may I humbly submit that you may be having issues because you have not hit ctrl+shift+p to open the command palette and typed "live SASS: Watch SASS". This will make sure that when you save your styles.scss is being complied down to the styles.css file without you manually having to compile after each change. This was an extremely frustrating problem to deal with and I wish it could have been addressed in the video. I have still managed to learn a lot of what is possible in html from the video and it is an excellent resource for reference code as many parts of the code can be used in other situations. However, this was not a very good tutorial because it did not go over the underlying thought process of 'why' things were ultimately structured the way they were. I understand this is largely because of just how much material is being covered but I would appreciate a change in the video's title to say "Coding Demo" rather than "Tutorial" as that is a better reflection of the video's content. I still really appreciate the content, I just wish I could be respected and better informed regarding what the video content is actually going to cover.
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!
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
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?
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.
Video is tough to follow and to learn from. I got stuck on checking JavaScript code to make sure active button was switching and got frustrated. This was the second time I attempted following this video. I was ready to give up on it and finally realized that my JavaScript file was under my styles folder🤣. Realized my mistake and moved it. Everything clicked after that.😬
sorry to say but while this theme/ portoflio is cool on the frontend, the instructor takes absolutely no pain in "explaining" why he is doing what he is doing. most of the time, he is just typing stuff out with zero explanation. This is not very friendly for the beginners, and like other experience coders have stated, the code does not exactly follow "best practices" either.
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.
@@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.
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 ❤❤❤❤❤❤❤🎉🎉🎉🎉🎉🎉🎉🎉🎉😅😅😅😅😅😅
I am looking for a good front end tutorial which properly teaches how to structure the page, it's layout, the intended elements and then write code to achieve it. All these videos on UA-cam just start writing css/html code without explaining why it is being done. This is not good for learning to just watch and copy paste. is there any resource which teaches in proper sequence why we are writing the code to achieve what ?
I love your observation. Most YT web development tutorials just jump into coding without the sequence flow and how to achieve it by coding. In the end, you end up just copy and pasting codes. No ability to analyze and break down problems before coding it.
You can see that he actually provides cover fire for the other guy to retreat, this also distracted the Russian soldiers, allowing the other Ukrainian soldier to safely escape, it is more than likely that the soldier who dies orders the other soldier to retreat, as the soldier begins to retreat simultaneously to when the other soldier provides cover fire before being hit, you can also see it looks like they briefly exchange communication less than 5 seconds prior. 3:10
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
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.
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); } } }
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 😅
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.
Although this course has a wonderful production, I think the teaching approach could be better. The teacher focused too much on having fine results than imparting knowledge; he teaches in a manner that tells you what to type without explaining how or why it works. I don't think this is good for anyone, not even experts. I was happy he gave an overview of the website, touching each feature, but was thoroughly discouraged that he had to first pour down a ton of premeditated CSS. If you are a beginner and want a smooth learning journey, I am discouraging you from taking this course at a beginner stage.
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
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
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.
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!
OMG! the author is Vietnamese people, this is the first time I watched it, you are so good!
Muchas Gracias por este aporte!!
en 1:34:05 para que funcione el ::before hay que agregar display: block; y position: relative;
exitos!!
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!
Wow!! This is incredible. This will be my project for the next two weeks, you are awesome!
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 😑😑
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.
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.
'hmmm, i wonder why its doing that' - Every developer ever, great quote!
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
I so much love this tutorial. I have been having hard time with JavaScript.
Thanks so much for making this - I had so much fun coding with you and I learned A LOT!
Good video overall. Suggestion: a bit more detailed explanations would go a long way, especially for relatively new developers :-)
Watch video on UA-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
Today i was making a portfolio website and then they uploaded this gem
1:31:35 do not forget adding "position: absolute" into &::before element .stat-title
Thanks I need this kind of video as a struggling freelancer!
Best of luck👍👍
Great video, thanks! Really improved my CSS understanding a lot watching this.
Beautifully designed portfolio site . Thank you for the video.
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.
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
This is great, learning alot watching you work through the problems, thanks for posting!
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
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! ua-cam.com/video/hGGPh3vwO-Y/v-deo.html
Good job . Absolutely fantastic. I love everything about it. Keep it up. I kinda wish it was made with Vue JS though.
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.
ua-cam.com/users/weibenfalk
the spacing problem at 3:08:20 was wild!
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.
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
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.
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 ?
Thank you so much for this video. I learned a lot from it. More of this good stuff! :)
thanks for the video, now I'm confident using css styles and learnt some pure javascript implimentations as well. 😘
awesome.
now i just need stuff to actually put on the portfolio
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.
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.
I can't believe he is using SCSS and declaring variables the old school CSS way
I'm fairly new but I noticed that. why declare them using CSS when your using SCSS
what is the SCSS way? im a beginner and didnt realize there was a difference
2:40:00ish i just changed the secondary a little bit and inverted all the grays, it worked perfectly
This is great! Could you make a video of how you prepare the design etc for the website?
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 UA-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.
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.
I really appreciate this work and thanks so much for helping me learn new stuff ❤️❤️❤️
Highly recommended video for beginners !!!
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
If you have problem at 1:34:29 just put "position: absolute" in the before pseudo-element.
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
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
Just figured out what I'm doing today...
Thanks!!
I will openly admit that this is a beginner problem but never the less this stumped me for a full 5hrs before I managed to figure it out. You never explained in the video how to utilize the live SASS compiler add-on and as such my about section refused to format correctly because the code in my styles.scss was never being complied down my styles.css file.
For those of you that are having formatting issues with regards to this project, may I humbly submit that you may be having issues because you have not hit ctrl+shift+p to open the command palette and typed "live SASS: Watch SASS". This will make sure that when you save your styles.scss is being complied down to the styles.css file without you manually having to compile after each change. This was an extremely frustrating problem to deal with and I wish it could have been addressed in the video.
I have still managed to learn a lot of what is possible in html from the video and it is an excellent resource for reference code as many parts of the code can be used in other situations. However, this was not a very good tutorial because it did not go over the underlying thought process of 'why' things were ultimately structured the way they were. I understand this is largely because of just how much material is being covered but I would appreciate a change in the video's title to say "Coding Demo" rather than "Tutorial" as that is a better reflection of the video's content. I still really appreciate the content, I just wish I could be respected and better informed regarding what the video content is actually going to cover.
I was struggling with this for a little while. Thank you!
@@AdOrient You're most welcome! I'm glad I could help you out a little.
thank you so much i was so stumped how his was being imported automatically to the point where i just kept copy pasting my .scss into .css.
@@letyousolome Haha, I got to that exact point before I finally figured out what was going on, so I totally feel you! And I am glad I could help. :)
Nice build up…I’m fascinated!
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!
Hi FreeCodeCamp, thanks! for this. It really is helpful and thanks to the developer too.
I really like this. Congratulations on a job well done.
Amazing really waiting for this ❤️ video thanks for uploading
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, good video !! perfect teacher 😁
4:00 font awesome
Learning a lot from this channel ❤❤❤
just in time. i was thinking of making one yesterday night.
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?
One day I will be able to sit down for more than 2 minutes and actually learn something
:)
Thank you very much for shared us your knowledge, greetings from Colombia 👋👋👋
My javascript code for active class is not running and suggestions?
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?
Video is tough to follow and to learn from. I got stuck on checking JavaScript code to make sure active button was switching and got frustrated. This was the second time I attempted following this video. I was ready to give up on it and finally realized that my JavaScript file was under my styles folder🤣. Realized my mistake and moved it. Everything clicked after that.😬
I made same :)))
sorry to say but while this theme/ portoflio is cool on the frontend, the instructor takes absolutely no pain in "explaining" why he is doing what he is doing. most of the time, he is just typing stuff out with zero explanation. This is not very friendly for the beginners, and like other experience coders have stated, the code does not exactly follow "best practices" either.
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.
Another great one!
Hey! It's an amazing resource! Thanks so much. I can't make media part work at all. Any ideas?
Absolute bomb, thanks a lot!
That's very cool, ur talented now I will try to make one myself
@1:14:08
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.
I creating my roadmap for web knowledge, and thu$ tutorial be a favorite in list 👍, thks guys 💻🤟
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 ❤❤❤❤❤❤❤🎉🎉🎉🎉🎉🎉🎉🎉🎉😅😅😅😅😅😅
I am looking for a good front end tutorial which properly teaches how to structure the page, it's layout, the intended elements and then write code to achieve it.
All these videos on UA-cam just start writing css/html code without explaining why it is being done. This is not good for learning to just watch and copy paste.
is there any resource which teaches in proper sequence why we are writing the code to achieve what ?
I am also looking for it but still i can sometimes figure out why it is being done
Actually if you wanna learn from scratch u can head to freecodecamp! They have easier tutorials than compared to their yt channel
Try frontend masters.
@@jaceyrebekaleong521 You mean the blog ones
I love your observation. Most YT web development tutorials just jump into coding without the sequence flow and how to achieve it by coding. In the end, you end up just copy and pasting codes. No ability to analyze and break down problems before coding it.
You can see that he actually provides cover fire for the other guy to retreat, this also distracted the Russian soldiers, allowing the other Ukrainian soldier to safely escape, it is more than likely that the soldier who dies orders the other soldier to retreat, as the soldier begins to retreat simultaneously to when the other soldier provides cover fire before being hit, you can also see it looks like they briefly exchange communication less than 5 seconds prior. 3:10
The video is actually great and I like the portfolio, but there's no much explananation for beginners especially on the javascript part
thank you this was great please do another video.
Thank you so much! It's very helpful!
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
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
cooooool chanell hello iam abdallah from egypt i love this chanell
1:34:11 - Once I added position: absolute to the &::before pseudo selector my divider showed.
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
Good initiate for those who are early at this area.
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);
}
}
}
Yesssss... I love this video :)
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 😅
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.
Nice work bro 😍
Although this course has a wonderful production, I think the teaching approach could be better.
The teacher focused too much on having fine results than imparting knowledge; he teaches in a manner that tells you what to type without explaining how or why it works. I don't think this is good for anyone, not even experts.
I was happy he gave an overview of the website, touching each feature, but was thoroughly discouraged that he had to first pour down a ton of premeditated CSS.
If you are a beginner and want a smooth learning journey, I am discouraging you from taking this course at a beginner stage.