DEV Community

Cover image for How To Make Personal Portfolio Using HTML CSS JavaScript
Sadee
Sadee

Posted on

How To Make Personal Portfolio Using HTML CSS JavaScript

How To Make Personal Portfolio Using HTML CSS JavaScript

In this video, I will show you how to Create a Responsive Personal Portfolio Website Using Html CSS JavaScript

Live Website
Github Repo


HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : codewithsadee
🔔 Subscribe : subscribe now


🔗 Essential links

Starter file


⏱️ Timestamps

0:00 - Demo
2:53 - File structure
3:20 - Project initial
8:12 - Header
19:10 - Hero section
26:45 - About section
32:23 - Portfolio section
38:20 - Skills section
45:16 - Contact section
54:18 - Blog section
59:53 - Footer
1:06:42 - Media queries


Become a patreon

Discussion (23)

Collapse
muneebbug profile image
muneebbug

In the design you have rated your skills in bars, never do that for your portfolio website. :)

Collapse
codewithsadee profile image
Sadee Author

It's a demo project for practicing.

Collapse
muneebbug profile image
muneebbug

I know thats why I said "Never do that for your portfolio".

Collapse
crazyloon profile image
Russell

It's a cool concept, but the values are completely arbitrary and can't be verified in any meaningful way.

What does it mean to have 100% JavaScript? Do you have to literally be on the team that writes the spec before you can say you're 100%? What about the variations of implementation between browser and non-brower versions of it?

Apply the same line of thought to CSS and it's even more insane to pretend you can put a % on your level of skill with the tool.

Not to mention you're raiting your own skill level, which invites Dunning-Kruger to the party.

Collapse
codewithsadee profile image
Sadee Author

It's a demo project for the practice.
nothing else.

Thread Thread
crazyloon profile image
Russell

And it looks great. Don't let me detract from that with my comment. You've clearly worked very hard on this, and it shows.

I've seen people doing this percentage bar thing in real projects also and I've cautioned them as well. If you want a progress bar, don't use percent. Maybe don't use a symbol at all, so it's obviously arbitrary. Or say the number of hours in relation to eachother, or even out of 10,000 if you buy into the idea that it takes about 10,000 hours to become an expert

Collapse
nadeemdsb profile image
nadeemdsb

What's the reason behind not doing so?

Collapse
muneebbug profile image
muneebbug

You are already rating your skills, you don't have to do that. Your client will figure that him/her self that how capable you are of your skills :) By rating on portfolio you are already giving them a red light 👀

Collapse
joesalaz profile image
Jose Salazar

Hello Sadee,
Would you mind sharing? What code editor did you use and the mobile device simulator; is that a plugin?

Regards,
Jose

Collapse
codewithsadee profile image
Sadee Author

I'm using vscode and mobile device is an extension called MobileView

Collapse
joesalaz profile image
Jose Salazar

Thank you Sadee. I use vscode too, but I didn't know about the mobile extension. I will install it right away.

Thanks again!

Collapse
idktech profile image
Ivaylo

Great article !

Collapse
bvince77 profile image
bvince77

Looks good

Collapse
wilmela profile image
Wilmela

Sadee, you've done a great job. Well done.

Collapse
tokee profile image
Tokee

nice 🔥

Collapse
capitolcomputers profile image
capitolcomputers

Good job

Collapse
jekinney profile image
jekinney

Gotta love when you put out an FYI example and people take it literally.

I think it's cool set of tools. Thank you

Collapse
andrewbaisden profile image
Andrew Baisden

Wow beautiful design so modern 🤩

Collapse
mrcaidev profile image
Yuwang Cai

Great design!

Collapse
sabihasamha profile image
Sabiha Samha • Edited on

wow

Collapse
gvieiradev profile image
Gabriel Vieira • Edited on

so cool! 😎

Collapse
axl989 profile image
Sergio Olivieri

Cool 👍🏻🎉

Collapse
razor867 profile image
Wahyu Arya Pambudi

Cool design