Responsive Portfolio Website From Scratch
HTML-код
- Опубликовано: 6 июн 2024
- Learn how to build and deploy a responsive portfolio website from scratch using only vanilla / plain HTML, CSS, and JavaScript. No Frameworks or React knowledge is needed for this beginner-friendly easy tutorial.
Build your next awesome project:
www.tubebuddy.com/quicknav/la...
GitHub Repo with Assets
github.com/Ade-mir/html-css-j...
Deployed Website
tangerine-hummingbird-1479b6....
GitHub Account
github.com/
GitHub Desktop
desktop.github.com/
Visual Studio Code
code.visualstudio.com/
Google Fonts
fonts.google.com/specimen/Pop...
Netlify
www.netlify.com/
Chapters
00:00 What we are building / Finished portfolio website
00:59 Tools we are using / Prerequisites
01:21 Project setup
08:42 Desktop navigation
22:53 Mobile navigation
40:19 Profile section
01:01:20 About section
01:13:32 Experience section
01:31:22 Projects section
01:44:07 Contact section
01:53:58 Footer
01:57:12 Adding responsive design / Media queries
02:09:29 Deploying our website for free using Netlify
Hope you enjoyed this tutorial. Leave a like if you did, and feel free to subscribe for more tutorials like this in the future!
Build your next awesome project:
www.tubebuddy.com/quicknav/latest/UCkXqOdpo5ul8BosGBFlDgmw
Thank you so much for sharing, Sir. I would like to have an opportunity to create commercial startup website.
@@uminhtetoo My pleasure! Thank you, added to my upcoming tutorials!
can u share what extensions u use with vscode pls?
@@kizigamer6895 Absolutely! The extensions I currently use are:
1) vscode-pdf - Display PDF's in VSCode.
2) Prettier - Code formatting.
3) Path Intellisense - Autocomplete filenames.
4) Live Server - Local server with live reload.
5) ESLint - Integrates ESlint Javascript into VS Code.
6) ES7 + React/Redux/React-Native snippets - Extension for react with ES7+ syntax.
Great videos. I enjoyed every videos from you 👍👍👍
Wow, dude! Can't thank you enough for the awesome tutorial! Your explanation was super helpful and I'm seriously grateful for it. You rock!
Thank you very much! I'm very happy that it resonates with you!
This is literally the best beginners friendly follow through project I've come across here on YT. I love how you clearly explain every step and I love how you share the keyboard short cuts as well. Thank you so much man. Please don't stop!
Thanks so much! That makes me very happy to hear, and you'll be glad to know that I have several more tutorials in the making! 😊
Great tutorial and explanation with a cleanly designed website. Thank you for not overengineering it and providing a simple but beautiful design.
Thank you very much, I appreciate your feedback!
Thank you so much for this tutorial. I had minimal knowledge of html and css going in and everything was so clear and easy to follow. It's provided an awesome baseline for me to go away, experiment and learn by doing. You gained another subscriber here, I'll definitely be checking out more of your content!
Ah so happy to hear it was useful to you! It's my pleasure! 😊
So easy to follow and very well spoken as well. Thank you for your service!
Thank you, I am very happy you enjoyed!
Awesome! I just enjoyed the process and the explanation is very nice and clear, please upload more projects, congrats!
Awesome to hear! Thank you, and there will be a new project up very soon! 😊
awesome tutorial man! thumbs up, even got to check my code hand in hand when i was stuck because you had your repo in the description!
Finally!!!! something that I was dying for, at least now I can start applying, Thanks for this confidence Man, really appreciate what you are doing!!
I'm happy to hear that! My pleasure!
hey can you help me in this ?
Thank you for waking up one day and deciding to bless us with this tutorial, i cannot thank you enough
Such a nice compliment, I appreciate you!
Awesome!!🤩 Keep the videos coming!
Thank you very much!! 😊😊🙏
Amazing tutorial without cuts and every easy explanation to follow step by step.
Thank you!
Great tutorial and explanation! I've seen many videos and you are great at making it clear and simple and easy to follow along. I'm looking forward to seeing more of your videos! Thank you!!!
My great pleasure, happy you like it!
I'm new to coding and i follow each steps. This has to be my first ever completed project, finished in 2days...thank you Mr. John Doe ❤much love from Nigeria
That makes me very happy to hear, well done! 🙏😊
Awesome the way you explain each and every thing, loved it
Thank you, very happy to hear that!
This is a well-spent 2hrs of my life. Nice work Sir!
Very happy to hear that, appreciate it!
Heads up!! If "scroll-behavior: smooth" is not working on your google chrome, it is because you need to enable a chrome flag called "smooth scrolling", which is turned off by default :)
Thank you for the useful tip! 😊
After 5 hours of work, I finally finished this project, you are a great teacher, and thanks for uploading this content, you have a new subscriber, you are great my friend!
Thank you so much, I appreciate you! 😊🙏
THIS IS INSANE XD I've been studying HTML and CSS on my own through a book I found online and I can't believe myself that I actually built my own portfolio website based on this video!! I finally can make the website as my scholarship portfolio :") Thank you sooo much for helping us with this beginner friendly tutorial!!
Amazing! Very happy that this video found you! 😁🙏
Thanks a bunch!! This was an awesome and very well made tutorial. I look forward to seeing more from this channel!
More to come!
Best portfolio making tutorial that I have come across! Very easy to follow and the end result is amazing! Loved it :D
Thank you! So happy you loved it!
as a backend dev who struggles with mobile responsive designs to help make my portfolio mobile friendly for tech recruiters, thank you!!! CSS is really hard compared to C# and C++ lol
My great pleasure! Good luck with your interview processes! 👏 Yeah CSS can be deceptively hard 🤪
yeah there is so much you have to remember, that is why frameworks and other tools are a blessing.
I'm in the midst of changing myself from no-code to coding environment. Your tutorial are really good to follow with the clear instruction.
Awesome! Let me know if there are any particular videos you would like in terms of going from no-code to coding!
@@howtobecomeadeveloper Hi, thanks for your reply. Maybe backend programming language like node.js. I just got a full stack development job offer.
@@Bakemono1213 hello, are you still in your job? and do you have any college degree?
very good video my friend. You explained everything very nicely, great voiceover and very understandble design layout and structure of html and css. This video is a great introduction to responsive website creation and all things that are to be looked out for when learning. 10/10 ! :D
Thank you for such a thoughtful comment and feedback, I highly appreciate it! 😊🙏
@@howtobecomeadeveloper Hey, I noticed a small issue with the vertical scaling of the profile section which results due to using a set viewheight in the stylesheet and mediaqueries, you can fix it by switching them to auto :D
honestly the best tutorial ive seen in my year of tryig to become a web developer, thank you SO SO Much, greetings from Colombia
I am very humbled 🙏 What is it that makes you love this tutorial if I can ask? So that I can make more like it 😊
Of course! First of all the way you explain everything, the set up. Looks clean, you don't jump any steps, a true beginner can build his or her own portfolio from watching this. The styles were neat and aestethic.
The way you talk and whenever you seem to have a bug you redirect yourself to it , think about it, examine the file and fix it so smoothly. I would love to see more tutorials, Javascript tutorials for example, logical thinking! I am a fan of your work. @@howtobecomeadeveloper
Thank you so much for the detailed feedback! Makes me very happy to hear, and I will take it to heart for future videos 😊 And I will definitely be making more JavaScript focused tutorials!
I personally appreciate this. Thank you
My pleasure!
WOW This was so much helpful man, it was really amazing , Thank you so much!!!
Very happy you liked it! My pleasure to make it!
Thank you for the video tutorial mate! It was great and I was able to use it as a base to build on top of my own portfolio! I like how you tried to explain the code as you wrote. My only feedback would be to walk us through the styling more, as towards the last hour of the video, we just did tons of styling without much explanation. Once again, a brilliant tutorial and you've gained a new sub😊
Thank you very much for your thoughtful feedback! It's noted for the next time! 😊
Keep going. We will support you.
Thank you!
Looks great, thanks for the tutorial!
I'd like it even more if you explained what each styling actually does and why we are using it throughout the tutorial though. It's a bit hard to follow along for someone who hasn't used CSS much before, and I had to rush to keep up with you, without really understanding what you were doing or why some of the time.
Still helpful though, and I definitely picked up a few things I didn't know before.
Thank you! Noted for next time!
Beginner friendly tutorial, loved it ❤
Awesome!
Thanks dude, it really helped while following i made some changes of my own and im happy with the outcome
My pleasure!
Thank you very much for this great tutorial! The way you explain the steps and find solutions to problems is pleasantly calm and motivating.
Super happy to hear that it resonates with you! 😊
You are just amazing! Lots of love.
Thank you very much! 😁🙌
Dude this is amazing! I can finally create something to display some of the projects that I've done, this is clean! Applying for some internships at the moment haha
Awesome, happy you like it!
This is one of the projects I have completed in the shortest time, it was really cool. Would love to see a tutorial to go a bit more in deep on responsive and then starting to make the page a bit more interactive! thanks also IT would be nice to get to learn a bit more about github!
Awesome, glad you liked it! I have noted down all your nice suggestions! :)
Thank you so much for creating this tutorial. All the processes are very clear and easy to follow through.
Ah I'm glad you liked it and found it easy to follow! :)
it looks amazing bro I already sub and liked the video as soon as possible ill complete it thx 🙂
I'm happy you like it! 🙂
Thank you! This was a great tutorial on the vanilla js basics and an awesome way to refresh my html and css.
Awesome!
Thank you so much for your video. I made my first portfolio according to your code becasue I like the black and white design of the page. Great work, Bingo.
My great pleasure, happy you found it so useful! 😊
Man, this is absolutely AMAZING! Thanks for sharing 🔥
My pleasure!
Bro, thanks a lot. This is the best vid I've watched today. Great stuff
Awesome, happy you enjoyed it!
Thanks for a very insightful tutorial & awsome explanations , I had built my very own portfolio website by following this tutorial, although I have had a few errors 😂but managed to sort them out. Thanks a million my good sir.🙏🙏🎉
My pleasure, happy you liked it! Those errors are luckily what make us better! 😊👏
Love your channel. Incredible designs
Thank you so much! 😊
Thank you for the tutorial. I hope you continue to create more videos aimed at beginners, teaching techniques that will assist them in securing internships.
My pleasure! Plenty more beginner friendly videos are coming up!
I have an interest in web development, and as a beginner, this has given me more insight into diving more into it.
Thank you, sir.
Great to hear!
Thank you so much for this video, it was incredibly helpful 🙏🏽👩🏽💻
You're so welcome!
Love how you debug sir. Appreciated your content man!😁
Thank you! I appreciate your kind words! 😊🙏
wow ,bro ! this is amazing ,hope u hit 1m soon
Thank you so much, that means a lot to me, appreciate you! 🙏
Done making my first ever portfolio! Thank you so much for teaching me a lot of things!
My great pleasure!
Thank you for the video tutorial. I am now on course to finish my first project. Well done.
Awesome!
I loved it!! Thank you so much for this amazing content
My great pleasure, glad you enjoy it! :)
How i wish I knew you when I was studying frontend development, I probably wont have struggled some like I did :) This is one of the best tutorial on html and css, Thank you :)
Thank you! It's my pleasure to share it with you :)
This was an amazing tutorial, really simple to understand and make.., would love to learn from more such content:)
More coming up!
Perfect tutorial from start to finish!
Glad it was helpful!
Awesome portfolio! Great work here. Love the look of your vs code appearance with borders everywhere. Would love to know how you configured that as well...
Thank you very much! For the VSCode I am using the high contrast dark theme which you can find in the settings 😊🙌
Thanks for these valuable tutorials
My pleasure, glad you like them!
thnx for the little things that you explain, that make the difference.
So glad to hear that it connects with you!
Amazing portfolio website, made with such an easy. Thank you for this Project. 😊😊
My great pleasure!
Thank you, I didn't learn Web development during my Bachelor's and Master's degree (the course wasn't mandatory so I preferred to learn other stuff). I am learning it now to increase my chances to find a job in the geographical area that I want and this tutorials are very helpful. Thank you!
My pleasure, happy you like it! 😊
Enjoyed this tutorial. Thank you!
You are so welcome!
I hv watched many portfolio website tutorials and this one is the best among all
Your way of explanation is damn superb man!✨
Thank you so much, I am honored! 😊🙏
I like that you explain even the small things durinf coding ❤
Thank you, I'll keep it up!
Great project, thanks you so much. I really enjoyed following this tutorial and now have a site I can use for my portfolio :)
My pleasure, thank you very much!
You are explaining each and every line that is good to understand and to remember also thank you so much
My pleasure, I'm happy it's useful to you! :)
Thank you so much for this tutorial! I absolutely enjoyed it and learned a lot of new information about css! Hopefully one day css will get easier for me 😬
My pleasure! It absolutely will! 😊🙌
Thank you so much for this incredible tutorial! Your step-by-step guidance made it a breeze to build my portfolio site, and the insights on launching it online were a game-changer. I feel empowered and ready to showcase my work to the world. Your clear explanations and practical tips made the process enjoyable and educational. Grateful for your expertise and generosity in sharing this knowledge! 🙌 #WebDevelopment #PortfolioBuilding #TechTutorial
My great pleasure! I am very happy that it was so useful for you! 😊🙌
You are doing really well 😍
Thank you!
Thank you, you really don't know how much you've helped me
You are so welcome!
Loved the tutorial easy to follow and great explanation.
Glad you enjoyed it!
Thank you very much, that's a nice walkthrough, helped me a lot !
My pleasure!
legendary. Thank you so much for this. I enjoyed coding along.
I'm very happy to hear that! 😊
Easily one of my favorite tutorials to date! It's pleasant to watch and easy to follow. You also have a gift for making people excited to get better! I'm 1:28:31 in and I do have a question for you if you don't mind. On the Experience page when listing the frontend and backend skills, I've noticed that if I add React or another framework in the h3 header of an article, the entire article container shifts, and the checkmark icons become out of alignment. The only way I found to resolve this is to remove the justify-content property from the article styling in the CSS. Do you have a better suggestion? Thanks so much for all that you do!
First of all thank you very much for your compliments! It is very humbling 🙏 As for your problem, I am trying to understand it.
Are you adding a separate article with React in the h3 like this: React
or are you adding the word React within another existing h3, like this: Git React
If you are doing the second one, maybe it misaligns when there are two separate words. If you are doing the first I do not know what is the issue but if you have found a solution then that is great!
It also might just be that the way it is designed currently "breaks" over a certain amount of articles listed, and the CSS needs adjusting, like you have done. Let me know if this solves it 😊
@@howtobecomeadeveloper Absolutely! I finished the tutorial and subscribed so that I can stay up to date with your page.
So, for the skills in the Frontend container, I have 6 separate articles. Each article has an img element, a div element that contains an h3 and p tag. The first 3 tags always line up no matter what I put in the tag. However, when I edit the 4th article and put React, the webpage automatically pushes the article (img, h3, and p) inwards so that it becomes out of alignment. Then, if I edit the h3 and change it from React to JavaScript, it realigns perfectly again. It's weird, but yes, I noticed that commenting out justify-content in the styless.css under article in the EXPERIENCE section fixes this.
Anyways, I completed the tutorial and loved it. You are absolutely incredible and I genuinely appreciate the time you've taken to make this video for us. Can't wait to watch more!
Well seems like you found a solution, that's great! No need to fix what isn't broken 😊 Thank you for the kind words, I'll be making more videos like this one!
you can also set 'justify-content' to 'flex-start'. that will keep everything aligned.
absolutely the best!
Thank you so much!
Thank you ...Amazing video it works.👍
So happy you like it! 🙏
Clean and Smooth website...awesome.
Thank you!😊
Great tutorial!
Thank you very much!
Great job thank you !!
Thank you, happy you enjoyed !!
Great video , cant thank you enough for this as I used it to build my portfolio . Amazing
Thank you, I'm happy to help, it's my pleasure!
@@howtobecomeadeveloper Hi thank you for commenting back , i wanted to ask how do we change to our own pictures as I seem to be having problems with mine as they show to big or to small ?
so glad i ran into this channel. would love to see a js dom tutorial. also, for whatever reason on the media queries my navbar dissapears and doesn't show up regardless of screen size not sure why
Thank you for your feedback! Regarding the navbar, is there any error in the console? Does it appear without media-query?
Hi. Fantastic. Excellent!
Hi, thank you! 😊
Perfect, Thank you
My pleasure, glad you liked it!
I had the same project and you saved me in the hambarger menu part i was lost thanks dude💯
Glad I could help
What a video brother, help me so much. Hugs from Brazil!
I'm very happy it was useful! 😊
Thank you so much Browski! Much love and appreciation! Your video is enjoyable and so insightful!
As I venture into learning CSS further, which is the best CSS to learn? Tailwind, Bootstrap etc.
My pleasure, happy you like it! That is a good question! In my opinion after getting a good understanding of CSS fundamentals, I would probably learn SASS / LESS as well, then probably Tailwind if you want a large amount of flexibility and Bulma if you want something sleak, easy and uncomplicated 😊
@@howtobecomeadeveloper Thank you so much brother 🙏 Your advice means the world! ❤️
Amazing thanks!
My pleasure!
Wow. 33 seconds into the video. The website looks amazing! I struggle to come up with a simple design, when I do, I always end up complicating it 😞.
Thank you! Don't worry it will come! Creating simple and non overcomplicated is especially more dificult as you learn, but don't worry it will become easy with repetition! 🙌😊
The best tutorial I've ever seen 🤩
Thank you, I'm very happy about that! 😊
how many people is exactly building the same portfolio
🙋
Is not so much about the portfolio page but your own projects!
🙋♂️i like how simple it looks
I am stealing the project part only 😅
Thanks Bro. Really enjoyed this video!
You are very welcome! 😊
This is a great and supportive video thank you keep it up
Thank you for the kind words! I'm starting to post weekly on Wednesdays 🙌🤓
Amazing video bud
Thank you bud!
Awesome Tutorial
Awesome, very happy you liked it!
Thank you so much for this tutorial.
My pleasure!
Thank you. Helped me a lot
My pleasure!
Nice work bro ❤
Thank you 😊
Thank you very much 🌻
My pleasure!
thank you so much sir for this tutorial it's so much help full 🙌🙌
My pleasure, happy you like it! 😊🙌
Awesome ❤
Thank you! 😊
Good job for a simple portfolio project for beginners.
Thank you!