DEV Community

Cover image for 🔥🤯 Amazing Portfolio website using HTML, CSS and JS.

🔥🤯 Amazing Portfolio website using HTML, CSS and JS.

Modern Web on December 16, 2021

If you are a beginner or a pro. This blog is for everyone who want to make his/her portfolio an outstanding one. In this tutorial, you’ll learn to ...
Collapse
 
ravavyr profile image
Ravavyr

As with any tutorial, i feel the focus here is on "pretty" and "components".
Where is the part about the DOCTYPE? The viewport tag? The Meta tags for SEO?
What about responsiveness?
What about accessibility?

I see none of that in the above.

Collapse
 
themodernweb profile image
Modern Web

Oh! Sry. I'll make sure to add that from onwards. Thanks for suggession.

Collapse
 
xr0master profile image
Sergey Khomushin • Edited

I can suggest that you use EmailJS for your contact form, so that your site is not only beautiful but also really works.

Collapse
 
trulyprogrammer profile image
Reeta970

Truly, none of his projects are responsive. They're only good looking and functional.

Collapse
 
goldfinger profile image
Caleb

Also, please add, semantic HTML to the list. The tutorial doesn't properly use HTML and heading tags.

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna

Can you try showing the live demo using codepen for general html, css, js, and codesandbox for react or angular ...., Because everyone won't have enough time to go through with the videos or with the source code,

And if you have a live demo then it will be easy for others to understand how the page works, and the styling and stuff,

These were up to my perspective, i might be wrong.

Collapse
 
jjaimealeman profile image
Jaime Aleman

I think the Author has done "enough" by providing the source code above! You also want them to create a codepen AND codesandbox?

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna

whats wrong in sharing a live demo mr.aleman ?

Everyone can't understand the functionality or styling of a page by just looking at the source code or photos, until unless they experience it,

And I have already mentioned those were upto my perspective, so i guess we are clear about this.

Thread Thread
 
jjaimealeman profile image
Jaime Aleman • Edited

All the code is there, so, easily, You can copy & Paste into Codepen - shouldn't be a problem. I already made a Codepen of my own, using the above code. Looks nice.

BTW: does this code made sense to you 😎 👉
matrixcode

(if the code doesn't make sense to you - perhaps you are in the wrong community)

Thread Thread
 
cmuralisree profile image
Chittoji Murali Sree Krishna

Perhaps, you should learn English first and then you can comment on others, i have already mentioned it twice it's upto my perspective,

Yeah i know this isn't a stack overflow to just keep looking at the code, so stop giving funny comments,

i guess you have enough time to create pens or keep arguing for pointless statements, then congrats,

But i don't have enough time to keep arguing about this, so i will end here, if you want you can prolong

Thread Thread
 
jjaimealeman profile image
Jaime Aleman

😉 Okay, Buddy.

Collapse
 
trulyprogrammer profile image
Reeta970

It's not enough, the page has to be responsive.

Collapse
 
vinaymayavanshi13 profile image
Vinay Mayavanshi • Edited

Amazing🔥🔥🔥,but in skill sections remove those percentages😅.Many recruiters have suggested not to put such percentages as how can a candidate knows that he has X% of knowledge with a particular language.Many recruiters gets annoyed by this.

Collapse
 
themodernweb profile image
Modern Web

Yeah Sure Its a common mistake. I made that in design but also mentioned in my video tutorial that why is this bad idea to put percentage in skill section. Thanks 👍

Collapse
 
jerrykay profile image
Jerry_Kay

You have reason.

Collapse
 
geekygaurab profile image
GeekyGaurab

Yup! And because of that, I have replaced the percentage number with a ✔ (to mark checked/completed).

Collapse
 
ricobrase profile image
Rico Brase

Well, isn't that some kind of redundant information then?

You (hopefully) wouldn't list skills, you don't have in your CV, would you? Therefore everything you mention should have a checkmark. And if everything has it, it's somewhat redundant. 😄

Thread Thread
 
geekygaurab profile image
GeekyGaurab • Edited

Yes, you are right!

That's why, I have just put the logos (coloured ones looked better than black and white ones) in the skills section and removed the percent scores and checks as well.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

One thing I do on mine is to list my skill level in a thing as either Great, Good, Fair, or Basic. That way, it gives across what I want to convey, but is less rigid than something like a percent score in a skill.

A score of 100% in a skill is effectively impossible, and if 100% is impossible to achive, it means that the other values have no meaning, because they can never be accurate.

Collapse
 
averysinar profile image
Avery-Sinar

I made an account here just to be able to say how much of a lifesaver this guide is. Can't manage to get the links to work but that's fine by me, this gave me an incredibly professional looking template that I could adapt to my own portfolio. Thank you so much, and keep up the great work.

Collapse
 
abdullmng profile image
abdullmng

Great one, please create another tutorial to add responsiveness. Looking forward to it

Collapse
 
michaelrodr profile image
MichaelRodr

Hello, thanks for sharing, I see the design theme very well focused, it is true that for those who are starting it is a good base, the adaptability to different devices (responsive design) must also be taken into account.

Collapse
 
felix715 profile image
felix715

Pretty job ...but try to ensure the site is functional

Collapse
 
themodernweb profile image
Modern Web

I'll make sure of that. Thanks

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Great Article, thanks for sharing it!

Collapse
 
leeuw profile image
leeuw

cool

Collapse
 
joset98 profile image
joset98

hey dude thanks, you're crack

Collapse
 
ten_code_10 profile image
Ténénan

I recently made a basic portfolio, it is clear that it has nothing to do with yours in terms of design. But you help me to improve it. Thanks!

Collapse
 
themodernweb profile image
Modern Web

Great! I hope you make it more amazing than mine. 👍

Collapse
 
sofiirodriguezc profile image
SofiiRC

Excelent! Thank you for this tutorial, it helped me to understand better HTML, css and js

Collapse
 
themodernweb profile image
Modern Web

I am glad you liked it ❤️

Collapse
 
geekygaurab profile image
GeekyGaurab

I know the images can be fetched from the google drive link. But say I want a C language logo in the same format to be used in the website, where and how can I get that?

Thanks!

Collapse
 
themodernweb profile image
Modern Web

you can download the C logo from google and then turn it into black and white with any photo editor

Collapse
 
trulyprogrammer profile image
Reeta970

The projects section and about section is visible only when I make a change in the code and fades away after a second.
Please 🙏🏻 help.

Collapse
 
cosminp9 profile image
Cosmin Popescu

Navigation system for navbar? Really? Stop!

Collapse
 
themodernweb profile image
Modern Web

Hmm! Its just made for fun and UX practice

Collapse
 
satwat1322 profile image
satwat1322

HOW CAN WE MAKE ALL THE LINKS ACTIVE(CLASS) AT THE SAME TIME . **** ITS URGENT PLEASE DO HELP ME . I WANT TO MAKE A SIMPLE PORTFOLIO OF MINE IN 2 DAYS. PLEASE DO HELP .