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

Creating a Portfolio Website Using Pure HTML, CSS and JavaScript (4 Part Series)

1) I Created a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript 2) Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 1] 3) Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 2] 4) Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 3]

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 πŸ’™

Creating a Portfolio Website Using Pure HTML, CSS and JavaScript (4 Part Series)

1) I Created a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript 2) Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 1] 3) Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 2] 4) Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 3]

Posted on by:

chaoocharles profile

Chaoo Charles


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


markdown 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


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

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.


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


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


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.


Wow! I like the typing effect πŸ’™


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


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 πŸ’™


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


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


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 😊


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.


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


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


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


Thank you. I'm happy you liked 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


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.


Yo! This is fantastic. Great work!


I would include your portfolio website in the project part.


Thank you for recommending πŸ’™


Beautiful! What did you use for CSS?


Thank you 😊

Your question is not clear. I coded the CSS


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