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

chaoocharles profile image Chaoo Charles Updated on ・1 min read

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 of the questions you will get from potential clients every time you approach them is, "Do you have a portfolio?" or "Can you share some of the related projects you have done before?"

Alt Text

Having a portfolio is a simple and great way to showcase your skills, interests and projects you have worked on before. Therefore I decided to create one using pure HTML, CSS & JavaScript and I would like your feedback on what you think about it.

Tell me, what amazes you? What should I change? Should I create a YouTube tutorial showing you how to create it?

Here is the link to the portfolio: https://chaoocharles.netlify.app/

Also, Help me reach 5k subscribers on my YouTube Channel

Your feedback will be highly appreciated.

Always stay awesome πŸ’™

Posted on by:

chaoocharles profile

Chaoo Charles


React Enthusiast βš›οΈ | Coffee Lover β˜• | I Create Coding Content on YouTube πŸ’™


Editor guide

nice portfolio would really appreciate if you do a tutorial


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


Will work init!


Check mine too and rate mine too😼;



it's awesome
you're 19 years old?

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


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


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

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

Yeah sure πŸ˜ŠπŸš€

I'm still 17🌝
Started learning a year ago

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

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

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

thanks marcus

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


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.


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


Checkout mine hemant.codes

But this website is under development and soon adding darkmode


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


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


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?

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

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?

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.

Wow, thank you for this!


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


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!


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


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


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


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!



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


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.


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


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


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


Here, we go.
Its an old one. Hence, archived.

Wow! I like the typing effect πŸ’™


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


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

Stay awesome always and keep on learning


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.


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


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!


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


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.


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


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


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


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

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


Your title is wrong. Html, not htm.


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


Thanks so much πŸ’™


Oh this is neat!


Thank you bro


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!


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


Hey, great project, please share it.


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


looks very nice. responsive and clean. great job πŸ‘


Thank you. I'm happy you liked it 😊


Awesome stuff, Chaoo! Subscribed to your YT channel!


Thanks man πŸ’™ welcome to the club bro


Beautiful! What did you use for CSS?


Thank you 😊

Your question is not clear. I coded the CSS


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.


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


Cool website bro


Thanks bro πŸ’™


Is there a link to live demo of projects?


50, learning graphql


Very cool, you got this πŸ’™


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


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


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


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


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


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


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.


Yes I have already subscribed. Thank you✨

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