DEV Community

Cover image for Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 1]
Chaoo Charles
Chaoo Charles

Posted on • Updated on

Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 1]

Creating a portfolio website is one of the best step a developer can make especially when they want to become successful freelancers. It's a simple yet effective way of showcasing your skills and projects you have worked on before.

My previous post was about my portfolio website. I shared a link to it and most of you loved it 💙. You also suggested that I should make a tutorial on how I went about it.

So, I spent some time and prepared a part 1 of the tutorial where we will be creating the landing page and the animated side nav-bar. I tried to make the tutorial a beginner level and I hope everyone will be able to follow along. I have pinned the tutorial video below.

Let me know if this tutorial is helpful and whether I should create a part 2 at the discussion section below. Also, tell me what I should Improve on when creating the next tutorial.

Here is the link to my portfolio if you haven't seen it yet: https://chaoocharles.netlify.app/

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

Happy Coding and Always Stay Awesome 💙

Top comments (10)

Collapse
 
ntmontijo profile image
Nic Montijo

Hey there Chaoo Charles!

I am currently at about 1:06:32 in your youtube video, and I'm running into a weird issue. For some reason, the profile picture is not centering with the text. i am not sure what i have done wrong. The picture was square to begin with, but i am not sure why there is such a drastic offset. i would appreciate any input =)

Collapse
 
chaoocharles profile image
Chaoo Charles

Hello, thanks for reaching out. I would love to help, upload your code on GitHub and then share it with me. I hope you know how to use GitHub.

Collapse
 
ntmontijo profile image
Nic Montijo • Edited

Thank you for responding! I uploaded all the code to GitHub, and sent you an email with an invite link.

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Okay, I will check it out

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Can you upload even the imaged to that repository? the code looks okay to me

Thread Thread
 
ntmontijo profile image
Nic Montijo

Sorry about that! They should be there now

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Hey, I check the code and it seemed okay to me. but what you can do to resolve the issue is to replace .profile-pic margin with these two line

margin: auto;
margin-bottom: 1.5rem ;

Tell me if this works

Thread Thread
 
ntmontijo profile image
Nic Montijo • Edited

That worked! Thanks so much for your help! I am looking forward to a "Part 2" =)

Thread Thread
 
chaoocharles profile image
Chaoo Charles

That's cool. You're welcome 💙 I'm working on a part 2

Collapse
 
chaoocharles profile image
Chaoo Charles

Yeah, sure. You can use it and give me credit by linking to my portfolio at the footer of your portfolio. About the logo, you can use JavaScript to set a timeout, animate the logo within that timeout and then load the rest of the website.