DEV Community

Cover image for I Created a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript

I Created a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript

Chaoo Charles on June 28, 2020

I have always ignored having a portfolio website for a long time. It's very important to have one though especially if you are a freelancer. One o...
Collapse
 
janiorb profile image
JaniorB

nice portfolio would really appreciate if you do a tutorial

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you. I'll post a video before the end of next week. You can join my YouTube channel, here is the link youtube.com/c/chaoocharles

Collapse
 
hemant profile image
Hemant Joshi

Thanks;
Will work init!

Collapse
 
hemant profile image
Hemant Joshi • Edited

Check mine too and rate mine too😼;

hemant.codes

Collapse
 
janiorb profile image
JaniorB

it's awesome
you're 19 years old?

Thread Thread
 
hemant profile image
Hemant Joshi

No I am 18 😼;

Thread Thread
 
hemant profile image
Hemant Joshi

I add 27 may to non official and 27 Nov to offical docs😼

Thread Thread
 
janiorb profile image
JaniorB

I'm 18 too

Thread Thread
 
hemant profile image
Hemant Joshi

NiceπŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰;
Goodluck;;;

Thread Thread
 
janiorb profile image
JaniorB

thanks

Thread Thread
 
g33knoob profile image
G33kNoob

why i feel so oldist here, im 30 and still in learning basic js

Thread Thread
 
hemant profile image
Hemant Joshi

Wow;πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰πŸŽ‰

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Haha, age is not a problem. You can pick up coding at any age as long as you have the passion.

Thread Thread
 
kenbellows profile image
Ken Bellows

☝️☝️☝️ Truth, I work with several devs who transitioned to programming after 30, it's more than possible

Thread Thread
 
juniordevforlife profile image
Jason F

I didn't start until I was 30. You got this.

 
chaoocharles profile image
Chaoo Charles

Yeah sure πŸ˜ŠπŸš€

Thread Thread
 
temi0x profile image
Temiloluwa Adelowo

I'm still 17🌝
Started learning a year ago

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Keep learning and creating stuffπŸš€ You got this πŸ’™

 
marcusungarette profile image
Marcus Ungarette

Do not feel lonely. im 30 too, and started learning a year ago. You can do it !!!

Thread Thread
 
g33knoob profile image
G33kNoob

thanks marcus

Thread Thread
 
aliux02 profile image
Aliux02

I'm 39, and i started to learn... 2 weeks ago... i feel you...

Collapse
 
hemant profile image
Hemant Joshi

Nice;
Checkout mine hemant.codes

But this website is under development and soon adding darkmode

Collapse
 
ekaranja profile image
Emmanuel • Edited

If you really want control over your website, you'd rather do it from scratch. An "easy" way to do this is by use of css variables and a little bit of javascript. Here's a great guide from Ananya Neogi
OR you could check out darkmode.js

Collapse
 
chaoocharles profile image
Chaoo Charles

I have taken a look, it's a good one

Collapse
 
hemant profile image
Hemant Joshi • Edited

Thank you❀️;
Hey is there any easier way to add darkmode to website?

Initially I will have to use conditions in js in my css script for changing color, but is there better way then this?

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Create two themes(css styling) and toggle them with a button click

Thread Thread
 
hemant profile image
Hemant Joshi

Yes, this is a good idea but it is going a tough deal for me to implement is there any blog or documentation for darkmode?

Thread Thread
 
chaoocharles profile image
Chaoo Charles
Thread Thread
 
thomasareinert profile image
Thomas A. Reinert

There's a media query to check if the user has chosen to use dark mode. And you should respect that choice designing your UI.

@media (prefers-color-scheme: dark) {
/* CSS Code when dark mode active */
}

As always with new features don't forget to check on caniuse.com for browser compatibility.

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Wow, thank you for this!

Thread Thread
 
ponnex profile image
Emmanuel Francis Ramos Jr.

Check
medium.com/@katiemctigue/how-to-cr...

It is how Katie Mctigue implemented in her portfolio website in here: katiemctigue.com/

I'm also currently working on my portfolio website implementing the same idea
It's still in development but hey kindly check out: ponnex.dev

Collapse
 
sarehprice profile image
Sarah Price

This is great! I love the addition of dark mode, it's very on trend for 2020. For your portfolio images, I would suggest showing images of the real projects and not stand in images. Otherwise I love the colors, I love the animation.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much for the suggestion. I really appreciate πŸ’™

Collapse
 
maureento8888 profile image
Maureen T'O

Great portfolio! I have to get mine up and running πŸ˜…

I would recommend that your CTAs in the beginning have hierarchy established. Especially for potential clients coming to your portfolio, they want to see your work/projects first rather than getting in touch before knowing you! Similarly, the colours of the buttons could be different colours, maybe one that’s more subdued (I.e ghost button, or something less bright than the blue-green) than the most important button.

Great stuff!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much for your recommendation, I will consider. Also I'm so happy that you liked and I inspired you

Collapse
 
grendel profile image
grendel • Edited

I like the overall look and feel, but I'm mobile and I have just 2 nitpicks on the way it shows up on my phone

  • In the "digitize your business" section, there are icons and then headers, but on mobile they are on separate lines. I think the icons should be inline with the headers. (Also you must capitalize "I" at the start of that section)
  • The project cards alternate between showing the thumbnail above or below the description. On mobile I think this should be uniform, and place the thumbnail above the description.

That's all, good work

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you for the remarks. I'll consider them 😊

Collapse
 
aakriti_1012 profile image
Aakriti

Nice work up there. Love the minimalistic approach. I also made my portfolio by simple HTML, css and Javascript.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you. I'm glad you liked it. You can also share your portfolio here if It's online.

Collapse
 
aakriti_1012 profile image
Aakriti

aakriti94.github.io/freeCodeCamp/P...
Here, we go.
Its an old one. Hence, archived.

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Wow! I like the typing effect πŸ’™

Collapse
 
anechol profile image
Ashley E

Not a knock against you but it's funny how in 2020 creating a portfolio with only vanilla tech is worthy of awe and praise from the heavens.
Nice work.

Collapse
 
chaoocharles profile image
Chaoo Charles

Haha, it's because people are used to frameworks and libraries. Thanks buddy

Collapse
 
bnestes18 profile image
bnestes18

Hi! Your portfolio looks awesome. I too have been avoiding the creation of a portfolio but I’m also considering freelancing as a side gig. I’d love to see tutorial on how to create one. Thank you in advance!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you πŸ’™. I'll drop a tutorial on my YouTube channel before the end of the week.

Collapse
 
rafo profile image
Rafael Osipov • Edited

Hi, Chaoo.

In your project: github.com/chaoocharles/sppms

There's an unnecessary file added to the repository, I mean temporary MS Word file
"~$OJECT REPORT.docx" file.

I would suggest to remove it from the repository, here's how: stackoverflow.com/a/2047477/12576990

And use .gitignore in your project, to prevent this issue later.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much for this man. I really appreciate. I totally forgot to exclude them

Collapse
 
rjdon11 profile image
rjdon11

Brother I'm a beginner so I'm requesting u to make a tutorial on this port folio step by step in depth detail to understand bro...plzz make it and I'm subscribe your channel just now ihave seen and I'll share with my all frndz who are interested....thnx in advance

Collapse
 
chaoocharles profile image
Chaoo Charles

Welcome to the club bro πŸ’™ I'll definitely create a complete tutorial based on this.

Stay awesome always and keep on learning

Collapse
 
hemant profile image
Hemant Joshi

Hey, Chaoo Charles;

Can I too make a post with the same title?, Just to show my a little bit of work in form of my portfolio website😼;
Hope you don't mind if a make the same titled post", will credit you!
πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„πŸ¦„

hemant.codes

Collapse
 
chaoocharles profile image
Chaoo Charles

Let's talk on chat(inbox) I just texted you there

Collapse
 
eswarupkumar profile image
E Swarup Kumar

Mann ! Damn good. Absolutely loved it ! This is something which would be a push factor for all the aspiring developers. Waiting for the complete tutorial to post in your YouTube channel. Already subscribed 😊. Have a good day.

Collapse
 
chaoocharles profile image
Chaoo Charles

Wow, I'm happy you loved it. And welcome to the club, I'll definitely drop a complete tutorial πŸ’™

Collapse
 
adzika profile image
adzika

It looks nice and clean. :) As Sarah wrote, I think that images of real projects would be better as people would be able to see the outcome of your work, not just the things that are "under the hood". I think it's important for a front-end dev work.

Also, I think if you're looking for customers who will hire you as a front-end, it would make more sense to have a button to your projects next to get in touch. Unless you care more about YT subscribers who want to learn, then this layout makes sense.

And in the sidebar I'd go for services first, then projects, videos, about me and contact - so customers can know what do you offer, what projects did you do and then how to contact you.

I've also created a portfolio website in pure HTML, CSS and JS and found this very satisfying, much more than using frameworks. :)

Great job and good luck with your work and YT channel!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much for such a great comment. I will consider

Collapse
 
tutorialsmate profile image
TutorialsMate

Portfolio looks πŸ‘Œ
I made this using html, css and JavaScript πŸ‘‡
tutorialsmate.com/
(super responsive)

Collapse
 
chaoocharles profile image
Chaoo Charles

Wow, good one. I have seen it have adds, are you the one who added them?

Collapse
 
tutorialsmate profile image
TutorialsMate

Yes...just got adsence approval few days ago. :D

Thread Thread
 
chaoocharles profile image
Chaoo Charles

That's awesome. What do they look for before approving?

Collapse
 
rishabk7 profile image
Rishab Kumar

Oh this is neat!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you bro

Collapse
 
9vnunchucks profile image
9vnunchucks

Your title is wrong. Html, not htm.

Collapse
 
9vnunchucks profile image
9vnunchucks

Unfortunately this is in my news feed, which means it's in other newsfeeds. Idk how long it takes to make those changes on Google news

Collapse
 
chaoocharles profile image
Chaoo Charles

Thanks so much πŸ’™

Collapse
 
voltagex007 profile image
Lord Victor • Edited

One of the best Websites I have ever visited, I rated this by the font selection, the colors, the icons, the graphics, and overall look (I noted it down, possibly it will be out in an article of mine in future, talking about websites that inspired me)

I would say "WAW!!!!!" ('wow' in surprised manner)

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much for this. I'm glad you loved it πŸ’™

Collapse
 
voltagex007 profile image
Lord Victor

: )

Collapse
 
voltagex007 profile image
Lord Victor

What Font did you use in the Header, It looks very good and matching

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Share Tech Mono

Thread Thread
 
voltagex007 profile image
Lord Victor

Oh thanks

Thread Thread
 
chaoocharles profile image
Chaoo Charles

I created a tutorial on it incase you are interested: youtu.be/LMM91VuS9Xg

Collapse
 
suhaibali2002 profile image
suhaibali2002

it's so great portfolio

Collapse
 
mr_alaraj profile image
MrAhmad

I had checked your portfolio. It's nice and looking good in mobile. I have few comments will be good if you follow
1- your logo not clear, try to make it lighter because the background is dark
2- your menu icon try to make it more visible and little bigger
3- the color of your links in too dark and hard to read
4- try to make your green color more brightness so will add more clarity to your work.
5- the headline is made by gradient which is nice feature. But if make the background of your headline is gradient will more better

But overall, I like your work

Collapse
 
thallesrangel profile image
Thallesrangel

Hey, great project, please share it.

Collapse
 
chaoocharles profile image
Chaoo Charles

Here is the link: chaoocharles.netlify.app/

Collapse
 
penandpapers profile image
PenAndPapers

That's a really cool portfolio man. Great work!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much

Collapse
 
bhagzhosmani profile image
bhagzhosmani

Amazing portfolio It's so responsive !! And also I subscribed your YouTube channel!!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much. I'm glad you liked it

Collapse
 
claudiaraphael profile image
Clau

amazing potfolio page! love what you did with the buy me a coffe button! very creative! inspiring work!

Collapse
 
tiffanyray profile image
Tiffany Ray

Love your site! Awesome Design πŸ”₯

Collapse
 
chaoocharles profile image
Chaoo Charles

Wow, thank you so much. I appreciate πŸ˜‡

Collapse
 
tinegagideon profile image
tinega

Cool website bro

Collapse
 
chaoocharles profile image
Chaoo Charles

Thanks bro πŸ’™

Collapse
 
eidorianavi profile image
EidorianAvi

I think your portfolio site looks and handles excellent! Not a necessity but a tutorial would be really nice.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much. I will drop a tutorial before the end of the week on my YouTube Channel: youtube.com/c/chaoocharles

Always stay awesome πŸ’™

Collapse
 
agathebadia profile image
Agathe Badia

Wow great work!! Love the color scheme, design, you can be proud :D

Collapse
 
chaoocharles profile image
Chaoo Charles

Wow, I'm really proud about it πŸ’™ Thank you so much

Collapse
 
jhenry081 profile image
Joan Henry

Nice portfolio, keep up the good work

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much πŸ’™

Collapse
 
juniordevforlife profile image
Jason F

Awesome stuff, Chaoo! Subscribed to your YT channel!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thanks man πŸ’™ welcome to the club bro

Collapse
 
phaethon_p profile image
Phaethon Psichis

50, learning graphql

Collapse
 
chaoocharles profile image
Chaoo Charles

Very cool, you got this πŸ’™

Collapse
 
edmongarcia6 profile image
Edmon Garcia

Cool designπŸ’œ

Collapse
 
chaoocharles profile image
Chaoo Charles

Thanks a lot πŸ’™

Collapse
 
florianweissdev profile image
Forian Weiß

I would include your portfolio website in the project part.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you for recommending πŸ’™

Collapse
 
john_horner1 profile image
john_horner

What did you mean by 'Pure HTML, CSS and JavaScript' exactly?

You meant, not using any frameworks?

Collapse
 
chaoocharles profile image
Chaoo Charles

Yeah. Without using framework

Collapse
 
speckworks profile image
John K. Speck

Beautiful Site Chaoo! Please bring on the tutorial!

Collapse
 
chaoocharles profile image
Chaoo Charles

Okay, I'm currently preparing it

Collapse
 
tittlemanscrest profile image
SP

Yo! This is fantastic. Great work!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thanks man πŸ’™

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you. I'm happy you liked it 😊

Collapse
 
amiamigo profile image
Ami Amigo

Beautiful! What did you use for CSS?

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you 😊

Your question is not clear. I coded the CSS

Collapse
 
courtneypure profile image
C. Pure

Your website looks really good! I love the menu and how smooth the animated links are. Nicely done! I will be checking out your YouTube videos as well. I’m currently studying js.

Collapse
 
chaoocharles profile image
Chaoo Charles

I'm happy that you loved it 😊 I'm working on the tutorial showing you all how I brought it together.

Collapse
 
matijao profile image
Matija

Is there a link to live demo of projects?

Collapse
 
chaoocharles profile image
Chaoo Charles
Collapse
 
lurek profile image
Tanvir Ahamed Siddike

You should add live preview or screenshot for projects I think.

Collapse
 
chaoocharles profile image
Chaoo Charles

I have added a link at the bottom of the post. Here it is: chaoocharles.netlify.app

Collapse
 
ekaranja profile image
Emmanuel

Amazing portfolio Chao. I'm also a web dev and didn't realize the importance of a portfolio till I made one. I'd like to get some feedback on my portfolio too ekaranja.netlify.app

Collapse
 
chaoocharles profile image
Chaoo Charles

It's a good one bro. I like it.

Collapse
 
neatcoder profile image
Neat Coder

Hey ,
Can you let me know if you are in Github pls...?

Collapse
 
chaoocharles profile image
Chaoo Charles
Collapse
 
methani_neha profile image
Neha Methani

Where to start and what to learn to become a frontend web developer?

Collapse
 
chaoocharles profile image
Chaoo Charles

What to learn to become a front-end dev. Start with HTML and CSS. Create simple projects with these two first. When you feel comfortable, Start learning JavaScript. Take your time because JavaScript will be straightly hard than HTML and CSS. Create more projects now Using the 3(HTML CSS and JavaScript). At this point you can try to look for a client and build a website for them.

There is more to front-end development. There are JavaScript libraries and Frameworks which help creation of more complex websites and applications easier. There are 3 most common. (React, Vue and Angular). React is Popular therefore more jobs. Vue is easy and is becoming more popular as React. Angular is popular but more complex. Learn at least one, I suggest React. If you don't feel it, try Vue.

Make use of freecodecamp.org to learn all these for free. Use YouTube too, there are a lot of tutorials there.

Take Away: Learn HTML, CSS, JavaScript and React or Vue. Use freecodecamp.org or YouTube to learn these technologies.

Join my YouTube Channel youtube.com/c/chaoocharles
I completed a tutorial on how I created my portfolio.

I hope this will be helpful.

Collapse
 
methani_neha profile image
Neha Methani

Yes I have already subscribed. Thank you✨

Thread Thread
 
chaoocharles profile image
Chaoo Charles

You're welcome. You can consult me when you need to.

Collapse
 
rattanakchea profile image
Rattanak Chea

Awesome. Love the nav sidebar and text animations.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank youu 😊

Collapse
 
brunhildevink profile image
Brunhilde

Looks really neat! We could all learn from you when it comes to just using pure HTML, CSS, and javascript. Way too often we tend to use frameworks when it's not even a necessity. Great work :)

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you, I'm glad you liked it. I'm working on a tutorial 😊

Collapse
 
pchicken profile image
pchicken

I never post to these things .. but I like it. Good Job!!!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you for your remark

Collapse
 
spiritupbro profile image
spiritupbro

cool bro keep on going

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you bro

Collapse
 
h_is_for_hawi profile image
Hawi

Nice work. It's encouraged me to work on mine. Thank you for sharing.

Collapse
 
chaoocharles profile image
Chaoo Charles

You're welcome and thank you too. Yeah, go ahead and work on yours. It won't take you that long.

Collapse
 
theuserll profile image
L.L.

Nice job!! I can't find a link to view your projects in production. Am I missing something here? I think that would be something good to have. ;)

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you. I had added only the source code. I'll add this too. Thank you again.

Collapse
 
jumokee profile image
jumokee

Great job! FYI the link to the todo app repo is broken.

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you for this. I will check it out.

Collapse
 
g33knoob profile image
G33kNoob

good job, im your new subscriber

Collapse
 
chaoocharles profile image
Chaoo Charles

Welcome to the club πŸš€

Always stay awesome πŸ’™

Collapse
 
christiankozalla profile image
Christian Kozalla

Great job, I like it! Would love to see a video how you did this, since I am working on my first Blog which maybe someday will turn into my portfolio.. =) keep it up

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much. I will drop a video tutorial on how to create such on my YouTube Channel. Stay tuned πŸ’™

Collapse
 
ryandsouza13 profile image
Ryan

Nice design. Loved the sidebar navigation.

Collapse
 
chaoocharles profile image
Chaoo Charles

Wow, I'm glad that you loved it

Collapse
 
franwatafaka profile image
Fran Sosa • Edited

Hi man! love it! great portfolio!

Collapse
 
chaoocharles profile image
Chaoo Charles

Thanks man

Collapse
 
pedramour profile image
Pedram

Awesome!
you are so talented
Wish to see you more successful πŸ˜ŠπŸ‘

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you so much for the good wishes πŸ’™πŸ˜Š

Collapse
 
petemode profile image
Pete

Does a mobile developer need to have a portfolio website?

Collapse
 
chaoocharles profile image
Chaoo Charles

Yes they do, It's an easy way to showcase your projects.

Collapse
 
patsma profile image
Patryk Smakosz

Nice ;)
Just fix landscape mode menu on mobile - it cuts the lower content

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you for the feedback, I will check it out.

Collapse
 
vanesapercy profile image
Vanesa Percy

Hello, great portfolio please a tutorial on how to create it.

Thanks.

Collapse
 
chaoocharles profile image
Chaoo Charles

Hello Vanesa, I'm glad you liked it. I'm currently working on the tutorial.

Collapse
 
preechadha profile image
Preeti Chadha • Edited

Woww!! Awesome portfolio

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank youu πŸ˜‡

Collapse
 
mrdata profile image
David LΓ³pez

Click bait!

Collapse
 
chaoocharles profile image
Chaoo Charles

Why?

Collapse
 
ericcoutinho profile image
Eric Coutinho

I love it! You are amazing!!

Collapse
 
chaoocharles profile image
Chaoo Charles

Wow! thank you so much πŸ’™

Collapse
 
gepajarinen profile image
Gesiane Pajarinen

Beautiful work! πŸ‘
I got inspired. Thank you! πŸ˜€πŸ‘

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you 😊 and you're welcome πŸ’™

Collapse
 
scottsawyer profile image
Scott Sawyer

Good job. My sister-in-law is Kenyan too. Don't know what that means, but there you go Fyi, the GitHub link to the To-Do app is broken.

Collapse
 
chaoocharles profile image
Chaoo Charles

Hahaa, that's amazing. It means she's from Kenya I guess. Thank you πŸ’™, someone point out about the link. I will check it.

Collapse
 
dansimiyu profile image
dan-simiyu

Great stuff man. This has really inspired me to create one

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank, I decided to post here so that I can inspire others and I'm glad it was helpful. I will also create a tutorial on this on my YouTube channel. Go ahead and start coding

Collapse
 
saboyagustavo profile image
saboyagustavo

Found it amazing! For sure I'll watch a tutorial video and hopefuly learn more with your process.

Collapse
 
chaoocharles profile image
Chaoo Charles

I'm happy you loved it. I will create the tutorial before the week ends