Portfolio Website Tutorial - Frontend Development with HTML, CSS, JavaScript
Vložit
- čas přidán 4. 07. 2024
- In this course, you will learn how to build a portfolio website using JavaScript, HTML, and CSS. This is a great project to improve you frontend development skills.
✏️ MacLinz developed this course course. Check out his channel: / maclinzuniversalchannel
💻 Code: github.com/Maclinz/JS_CSS_Por...
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:02:37) Switch Between Sections
⌨️ (0:48:53) Header Content
⌨️ (1:06:22) About Section
⌨️ (1:42:34) Portfolios Section
⌨️ (1:58:52) Blogs Section
⌨️ (2:11:31) Contact Section
⌨️ (2:44:09) Media Queries
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
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
Thanks so much for making this - I had so much fun coding with you and I learned A LOT!
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....
Wow!! This is incredible. This will be my project for the next two weeks, you are awesome!
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!
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. 😄
Beautifully designed portfolio site . Thank you for the video.
Great video, thanks! Really improved my CSS understanding a lot watching this.
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.
Thank you very much.
This video improved my CSS a lot.
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 😂
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 so much for this video. I learned a lot from it. More of this good stuff! :)
Good job . Absolutely fantastic. I love everything about it. Keep it up. I kinda wish it was made with Vue JS though.
Absolute bomb, thanks a lot!
Thank you so much! It's very helpful!
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 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!
Highly recommended video for beginners !!!
thank you, good video !! perfect teacher 😁
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 really like this. Congratulations on a job well done.
I really appreciate this work and thanks so much for helping me learn new stuff ❤️❤️❤️
Just figured out what I'm doing today...
Thanks!!
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.
Thank you I loved this video :)
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.
OMG! the author is Vietnamese people, this is the first time I watched it, you are so good!
Nice build up…I’m fascinated!
Thanks I need this kind of video as a struggling freelancer!
Best of luck👍👍
thanks for the video, now I'm confident using css styles and learnt some pure javascript implimentations as well. 😘
Today i was making a portfolio website and then they uploaded this gem
Hi FreeCodeCamp, thanks! for this. It really is helpful and thanks to the developer too.
Learning a lot from this channel ❤❤❤
Amazing really waiting for this ❤️ video thanks for uploading
Thank you very much for shared us your knowledge, greetings from Colombia 👋👋👋
That's very cool, ur talented now I will try to make one myself
Another great one!
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
This is great! Could you make a video of how you prepare the design etc for the website?
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.
This is an awesome tutorial
awesome.
now i just need stuff to actually put on the portfolio
just in time. i was thinking of making one yesterday night.
Nice video 👏... Worth it 💯
'hmmm, i wonder why its doing that' - Every developer ever, great quote!
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 video overall. Suggestion: a bit more detailed explanations would go a long way, especially for relatively new developers :-)
Watch video on CZcams 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 this was great please do another video.
Yesssss... I love this video :)
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.
I creating my roadmap for web knowledge, and thu$ tutorial be a favorite in list 👍, thks guys 💻🤟
1:31:35 do not forget adding "position: absolute" into &::before element .stat-title
thanks for your team
Interesting this channel is very useful ngl
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 ❤❤❤❤❤❤❤🎉🎉🎉🎉🎉🎉🎉🎉🎉😅😅😅😅😅😅
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.
czcams.com/users/weibenfalk
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
Thanks, you rule!
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 😑😑
Nice work bro 😍
2:40:00ish i just changed the secondary a little bit and inverted all the grays, it worked perfectly
the spacing problem at 3:08:20 was wild!
cooooool chanell hello iam abdallah from egypt i love this chanell
Thank you so much
Nice work!
Hey! It's an amazing resource! Thanks so much. I can't make media part work at all. Any ideas?
Thanks!👍🏼
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.
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.
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!
I am doing this as my html css project
Nice Tutorial
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
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.
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! czcams.com/video/hGGPh3vwO-Y/video.html
Nice tutorial
Thanks
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
Thank you
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.
My javascript code for active class is not running and suggestions?
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?
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 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
Good initiate for those who are early at this area.
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.
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.
Hi this is really an awesome tutorial! :) However, i am having some trouble trying to upload it to github pages - Is there an additional step required to compile the SCSS files (especially the media queries?) thanks! @The Code Dealer
The video is actually great and I like the portfolio, but there's no much explananation for beginners especially on the javascript part
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 CZcams 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.
Plz upload tutorial on Java Full stack development course
I wonder why the name Vietnam? The video is great. Thanks a lot
can you make a video on some templates making using html and css
thank you
hello! very good video. I was just wondering if the "download CV" button raises any flags of potential employers. Are pdfs always safe? or is it maybe better to make your CV accessable via website so others don't have to download it. I am new to this, but maybe some recruiter or anyone who has experience with this can help me out here. ty
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.
1:34:11 - Once I added position: absolute to the &::before pseudo selector my divider showed.
One day I will be able to sit down for more than 2 minutes and actually learn something
:)