Responsive Portfolio Website From Scratch

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!

[@howtobecomeadeveloper]

Build your next awesome project: www.tubebuddy.com/quicknav/latest/UCkXqOdpo5ul8BosGBFlDgmw

[@uminhtetoo]

Thank you so much for sharing, Sir. I would like to have an opportunity to create commercial startup website.

[@howtobecomeadeveloper]

@@uminhtetoo My pleasure! Thank you, added to my upcoming tutorials!

[@kizigamer6895]

can u share what extensions u use with vscode pls?

[@howtobecomeadeveloper]

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

[@bobil12138]

Great videos. I enjoyed every videos from you 👍👍👍

[@deoncodm4034]

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!

[@howtobecomeadeveloper]

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! 😊

[@aayankasana2712]

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!

[@howtobecomeadeveloper]

Thank you very much! I'm very happy that it resonates with you!

[@wronghorsebatterystaple]

Great tutorial and explanation with a cleanly designed website. Thank you for not overengineering it and providing a simple but beautiful design.

[@howtobecomeadeveloper]

Thank you very much, I appreciate your feedback!

[@binia600]

So easy to follow and very well spoken as well. Thank you for your service!

[@howtobecomeadeveloper]

Thank you, I am very happy you enjoyed!

[@sththms]

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!

[@howtobecomeadeveloper]

Ah so happy to hear it was useful to you! It's my pleasure! 😊

[@danielnavarretecuevas3767]

Awesome! I just enjoyed the process and the explanation is very nice and clear, please upload more projects, congrats!

[@howtobecomeadeveloper]

Awesome to hear! Thank you, and there will be a new project up very soon! 😊

[@cloud3ye]

Thank you for waking up one day and deciding to bless us with this tutorial, i cannot thank you enough

[@howtobecomeadeveloper]

Such a nice compliment, I appreciate you!

[@abhishekraghunath95]

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

[@howtobecomeadeveloper]

I'm happy to hear that! My pleasure!

[@vaibhavpuri1797]

hey can you help me in this ?

[@41_paraschoudhary30]

Amazing tutorial without cuts and every easy explanation to follow step by step.

[@howtobecomeadeveloper]

Thank you!

[@dianaalijagic4695]

Awesome!!🤩 Keep the videos coming!

[@howtobecomeadeveloper]

Thank you very much!! 😊😊🙏

[@dgalaxyspace3859]

This is a well-spent 2hrs of my life. Nice work Sir!

[@howtobecomeadeveloper]

Very happy to hear that, appreciate it!

[@p1ckyv1cky]

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

[@howtobecomeadeveloper]

My great pleasure, happy you like it!

[@ajaybidon]

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

[@howtobecomeadeveloper]

That makes me very happy to hear, well done! 🙏😊

[@indexvinay]

Awesome the way you explain each and every thing, loved it

[@howtobecomeadeveloper]

Thank you, very happy to hear that!

[@rrsmb7136]

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!

[@howtobecomeadeveloper]

Thank you so much, I appreciate you! 😊🙏

[@Bakemono1213]

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.

[@howtobecomeadeveloper]

Awesome! Let me know if there are any particular videos you would like in terms of going from no-code to coding!

[@Bakemono1213]

@@howtobecomeadeveloper Hi, thanks for your reply. Maybe backend programming language like node.js. I just got a full stack development job offer.

[@boro6570]

@@Bakemono1213 hello, are you still in your job? and do you have any college degree?

[@natv7139]

honestly the best tutorial ive seen in my year of tryig to become a web developer, thank you SO SO Much, greetings from Colombia

[@howtobecomeadeveloper]

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 😊

[@natv7139]

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

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

[@murtajiz545]

Thanks a bunch!! This was an awesome and very well made tutorial. I look forward to seeing more from this channel!

[@howtobecomeadeveloper]

More to come!

[@nadahanie]

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

[@howtobecomeadeveloper]

Amazing! Very happy that this video found you! 😁🙏

[@amberl239]

Best portfolio making tutorial that I have come across! Very easy to follow and the end result is amazing! Loved it :D

[@howtobecomeadeveloper]

Thank you! So happy you loved it!

[@abdullohdomla5858]

Keep going. We will support you.

[@howtobecomeadeveloper]

Thank you!

[@Shy-Lars]

I personally appreciate this. Thank you

[@howtobecomeadeveloper]

My pleasure!

[@gedelashilpa4598]

Beginner friendly tutorial, loved it ❤

[@howtobecomeadeveloper]

Awesome!

[@amshuchitrakar4424]

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!

[@howtobecomeadeveloper]

😊🙌

[@og5541]

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

[@howtobecomeadeveloper]

Thank you for such a thoughtful comment and feedback, I highly appreciate it! 😊🙏

[@og5541]

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

[@muhammadsaadrehman485]

WOW This was so much helpful man, it was really amazing , Thank you so much!!!

[@howtobecomeadeveloper]

Very happy you liked it! My pleasure to make it!

[@LeelouCee]

Thank you very much for this great tutorial! The way you explain the steps and find solutions to problems is pleasantly calm and motivating.

[@howtobecomeadeveloper]

Super happy to hear that it resonates with you! 😊

[@ofibao8212]

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 :)

[@howtobecomeadeveloper]

Thank you for the useful tip! 😊

[@azar8455]

You are just amazing! Lots of love.

[@howtobecomeadeveloper]

Thank you very much! 😁🙌

[@gabriellagugliotta1565]

Thank you! This was a great tutorial on the vanilla js basics and an awesome way to refresh my html and css.

[@howtobecomeadeveloper]

Awesome!

[@takstravelvlog7357]

Thank you so much for creating this tutorial. All the processes are very clear and easy to follow through.

[@howtobecomeadeveloper]

Ah I'm glad you liked it and found it easy to follow! :)

[@rajtripathi95]

Thanks dude, it really helped while following i made some changes of my own and im happy with the outcome

[@howtobecomeadeveloper]

My pleasure!

[@Dylson]

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😊

[@howtobecomeadeveloper]

Thank you very much for your thoughtful feedback! It's noted for the next time! 😊

[@hazelding]

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.

[@howtobecomeadeveloper]

My great pleasure, happy you found it so useful! 😊

[@Kibetdidymus]

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.

[@howtobecomeadeveloper]

Great to hear!

[@IbytheGOAT]

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

[@howtobecomeadeveloper]

Awesome, happy you like it!

[@chadcat420]

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

[@howtobecomeadeveloper]

My great pleasure! Good luck with your interview processes! 👏 Yeah CSS can be deceptively hard 🤪

[@ariasabe]

yeah there is so much you have to remember, that is why frameworks and other tools are a blessing.

[@chocodonuts3644]

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.

[@howtobecomeadeveloper]

My pleasure! Plenty more beginner friendly videos are coming up!

[@lifepurpose.]

Love how you debug sir. Appreciated your content man!😁

[@howtobecomeadeveloper]

Thank you! I appreciate your kind words! 😊🙏

[@zohanrow]

Man, this is absolutely AMAZING! Thanks for sharing 🔥

[@howtobecomeadeveloper]

My pleasure!

[@klausraem2278]

Very nice bud. Thank you very much for this tutorial. Awesome!

[@howtobecomeadeveloper]

Awesome, happy you enjoyed it!

[@sayiganormanhaq4405]

Bro, thanks a lot. This is the best vid I've watched today. Great stuff

[@howtobecomeadeveloper]

Awesome, happy you enjoyed it!

[@Ic3B4g]

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.

[@howtobecomeadeveloper]

Thank you! Noted for next time!

[@bongumusamtetwa]

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.🙏🙏🎉

[@howtobecomeadeveloper]

My pleasure, happy you liked it! Those errors are luckily what make us better! 😊👏

[@karmahappiness]

Thank you so much for this video, it was incredibly helpful 🙏🏽👩🏽‍💻

[@howtobecomeadeveloper]

You're so welcome!

[@KashifAnsari-mr2jk]

Very Helpful, Thanks man loved it... keep it going man

[@howtobecomeadeveloper]

My pleasure!

[@romeiyu3491]

thank you so much for this tutorial, I learned a lot of different things from this.

[@howtobecomeadeveloper]

My great pleasure!

[@Azhar_Kader]

Love your channel. Incredible designs

[@howtobecomeadeveloper]

Thank you so much! 😊

[@johndavidfajardo5432]

Done making my first ever portfolio! Thank you so much for teaching me a lot of things!

[@howtobecomeadeveloper]

My great pleasure!

[@shailjapatil1282]

This was an amazing tutorial, really simple to understand and make.., would love to learn from more such content:)

[@howtobecomeadeveloper]

More coming up!

[@thegambler-wins]

wow ,bro ! this is amazing ,hope u hit 1m soon

[@howtobecomeadeveloper]

Thank you so much, that means a lot to me, appreciate you! 🙏

[@stannleeyezeogu4989]

Thank you for the video tutorial. I am now on course to finish my first project. Well done.

[@howtobecomeadeveloper]

Awesome!

[@AlbertoVelarde-fq1yj]

thnx for the little things that you explain, that make the difference.

[@howtobecomeadeveloper]

So glad to hear that it connects with you!

[@AcceleratedExpansion]

Perfect tutorial from start to finish!

[@howtobecomeadeveloper]

Glad it was helpful!

[@vishalsingh6671]

Thanks for these valuable tutorials

[@howtobecomeadeveloper]

My pleasure, glad you like them!

[@handitjioe1938]

Amazing Design Loved It!!

[@howtobecomeadeveloper]

Thank you so much!

[@Salah-YT]

it looks amazing bro I already sub and liked the video as soon as possible ill complete it thx 🙂

[@howtobecomeadeveloper]

I'm happy you like it! 🙂

[@bhushankheryt6227]

Amazing portfolio website, made with such an easy. Thank you for this Project. 😊😊

[@howtobecomeadeveloper]

My great pleasure!

[@vallunacoder.wecodetogether]

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!

[@howtobecomeadeveloper]

Awesome, glad you liked it! I have noted down all your nice suggestions! :)

[@fruklemetsrud4435]

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 :)

[@howtobecomeadeveloper]

Thank you! It's my pleasure to share it with you :)

[@denilsonnascimento975]

I loved it!! Thank you so much for this amazing content

[@howtobecomeadeveloper]

My great pleasure, glad you enjoy it! :)

[@sumithsuresh4099]

absolutely the best!

[@howtobecomeadeveloper]

Thank you so much!

[@juliansmith4463]

Enjoyed this tutorial. Thank you!

[@howtobecomeadeveloper]

You are so welcome!

[@adansoto2515]

Great tutorial!

[@howtobecomeadeveloper]

Thank you very much!

[@pradeepyc2712]

You are explaining each and every line that is good to understand and to remember also thank you so much

[@howtobecomeadeveloper]

My pleasure, I'm happy it's useful to you! :)

[@seeutube8860]

Clean and Smooth website...awesome.

[@howtobecomeadeveloper]

Thank you!😊

[@sid_liftz]

I like that you explain even the small things durinf coding ❤

[@howtobecomeadeveloper]

Thank you, I'll keep it up!

[@beingcheercool]

You are doing really well 😍

[@howtobecomeadeveloper]

Thank you!

[@wavysage4860]

Thank you, you really don't know how much you've helped me

[@howtobecomeadeveloper]

You are so welcome!

[@aleandropresta7552]

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!

[@howtobecomeadeveloper]

My pleasure, happy you like it! 😊

[@MichaelGizaw-xy1bj]

Great video, there was so much value in this video 👍

[@howtobecomeadeveloper]

I'm very happy you enjoyed it! 😊

[@themilesroarkexperiment1662]

legendary. Thank you so much for this. I enjoyed coding along.

[@howtobecomeadeveloper]

I'm very happy to hear that! 😊

[@user-oc6zd8hd1o]

Loved the tutorial easy to follow and great explanation.

[@howtobecomeadeveloper]

Glad you enjoyed it!

[@chrismeysner5666]

Great project, thanks you so much. I really enjoyed following this tutorial and now have a site I can use for my portfolio :)

[@howtobecomeadeveloper]

My pleasure, thank you very much!

[@hannaharcher9297]

Great video , cant thank you enough for this as I used it to build my portfolio . Amazing

[@howtobecomeadeveloper]

Thank you, I'm happy to help, it's my pleasure!

[@hannaharcher9297]

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

[@Shorty_AD]

Thank you very much, that's a nice walkthrough, helped me a lot !

[@howtobecomeadeveloper]

My pleasure!

[@keemeshrampersad8859]

Amazing video bud

[@howtobecomeadeveloper]

Thank you bud!

[@viemingtan7508]

Hi. Fantastic. Excellent!

[@howtobecomeadeveloper]

Hi, thank you! 😊

[@aissame112]

Great job thank you !!

[@howtobecomeadeveloper]

Thank you, happy you enjoyed !!

[@shahadparveen7062]

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

[@howtobecomeadeveloper]

My great pleasure! I am very happy that it was so useful for you! 😊🙌

[@obrabodbh1v939]

What a video brother, help me so much. Hugs from Brazil!

[@howtobecomeadeveloper]

I'm very happy it was useful! 😊

[@mariaingersoll]

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 😬

[@howtobecomeadeveloper]

My pleasure! It absolutely will! 😊🙌

[@rohit_j0shi]

I hv watched many portfolio website tutorials and this one is the best among all Your way of explanation is damn superb man!✨

[@howtobecomeadeveloper]

Thank you so much, I am honored! 😊🙏

[@MohamedRizan]

Perfect, Thank you

[@howtobecomeadeveloper]

My pleasure, glad you liked it!

[@Glen57]

I had the same project and you saved me in the hambarger menu part i was lost thanks dude💯

[@howtobecomeadeveloper]

Glad I could help

[@alishamugale3568]

Thank you ...Amazing video it works.👍

[@howtobecomeadeveloper]

So happy you like it! 🙏

[@SalmanSujahir]

Thank you providing this for free of charge

[@howtobecomeadeveloper]

My pleasure!

[@diyorbektoshpulatov6425]

The best tutorial I've ever seen 🤩

[@howtobecomeadeveloper]

Thank you, I'm very happy about that! 😊

[@caesar503]

Amazing thanks!

[@howtobecomeadeveloper]

My pleasure!

[@batchuraghava8639]

Awesome Tutorial

[@howtobecomeadeveloper]

Awesome, very happy you liked it!

[@Mlambolindo6]

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 😞.

[@howtobecomeadeveloper]

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! 🙌😊

[@julianvelez6563]

Nice work bro ❤

[@howtobecomeadeveloper]

Thank you 😊

[@mpholechaba6848]

Thank you so much for this tutorial.

[@howtobecomeadeveloper]

My pleasure!

[@kazitanim007]

Good job for a simple portfolio project for beginners.

[@howtobecomeadeveloper]

Thank you!

[@fenibrian]

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

[@howtobecomeadeveloper]

Thank you very much! For the VSCode I am using the high contrast dark theme which you can find in the settings 😊🙌

[@robinsuthar8250]

Thanks Bro. Really enjoyed this video!

[@howtobecomeadeveloper]

You are very welcome! 😊

[@user-if6tv8jk8c]

the best tutorial for a non tech guy like me to start career in coding🎉🎉

[@howtobecomeadeveloper]

So cool to hear that! Good luck!

[@ziphozenkosincayiyana]

thank you so much sir for this tutorial it's so much help full 🙌🙌

[@howtobecomeadeveloper]

My pleasure, happy you like it! 😊🙌

[@vinayaradhya6925]

Thank you. Helped me a lot

[@howtobecomeadeveloper]

My pleasure!