Responsive HTML CSS Portfolio Website

Learn how I built this portfolio website using HTML and CSS. We will mainly using CSS Flexbox and CSS grid to create the design. I collaborated with a senior UX/UI designer on this project.

I only coded up the design for this project. All the designs were done by the UX/UI designer. You're welcome to change the design and refactor to code to fit your own personality and style.

You can access the complete source code down below.

I recommend you install the live server extension for this project. Live server allows you to have hot reloading, so whenever you make a change to your code, it will automatically update in the browser.

I will use CSS Grid and CSS Flexbox to create this website. In addition, the entire website is responsive and fits all the phone sizes shown on google chrome. The browser I am using to display multiple phone screen sizes is google chrome, so if you want to have that option, then be sure to use chrome as your browser.

I am using VS Code as my code editor. You are welcome to use whatever code editor you like, but it's easier if you use the same code editor I'm using to prevent any errors or confusion.

I created a full step by step tutorial showing how I created everything.

Watch the full tutorial on Youtube here

Also, I'm documenting everything I'm learning and the projects I'm building on my Youtube channel. If you want to follow me along my coding journey, be sure to subscribe here