![Cover image for Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 1]](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fsy6bvk4p4kwtw9igflst.png)
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)
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 =)
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.
Thank you for responding! I uploaded all the code to GitHub, and sent you an email with an invite link.
Okay, I will check it out
Can you upload even the imaged to that repository? the code looks okay to me
Sorry about that! They should be there now
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
That worked! Thanks so much for your help! I am looking forward to a "Part 2" =)
That's cool. You're welcome 💙 I'm working on a part 2
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.