Hello everyone, I began taking courses on Front-end development a couple of months ago and I finally decided to make my first personal portfolio website, it took me an entire month working around 1/2 hours a day. You can see its live site or the project repository.
My portfolio, on desktop view
Step 1: Wireframe my website
I made the first wireframes of my main and projects page in paper and in a pretty basic way, but they guided me and help me remember the design while coding.
Step 2: Write the basic HTML
I did this for both pages, and added classes I thought I would need later on during the project.
Step 3: Add basic styling for your Portfolio
I recommend doing this on a separate stylesheet instead of the one you are using for each page (styles.css) so you don't have to split the code when you go further in the project like I had. I also recommend to use a reset file like reset.css for managing styles easier.
Speaking about the general design and color pallete, I wanted the page to have a modern and soft look, so, using the Adobe Color contrast checker and inspired by Twitter design I picked the main background, accent and text colours for both Dark and light Mode, I also tried to use soft shadows to give it a deeper look.
Step 4: Make each site responsive
If you can, try to use as much relative measurements as you can so you need to write less code. I worked on 5 device size ranges: phones (320 to 480px); tablets (481 to 768px); laptops (769px to 1024px); desktop (1025px to 1440px) and large screens (1440px+). If you see your stylesheet getting really big at this point (500+ lines) try to split it into more, believe me, it will be easier to edit later in the future.
Step 5: Adding Javascript for interactivity
In this case I decided to use JS to make a light / dark mode switch (with help of CSS classes and custom properties), an hamburguer menu (only mobile devices) and 2 dropodowns featuring the technologies I used for the project and my contact information. I also learned to use local storage so I could save the user preferred mode and use it the next time he/she visits the page.
Step 6: Start the second page
I decided that my second page would feature all of my projects, with links to their code and their live versions, you could also make a third or fourth page if you like, but for me I decided that it was enough for a portfolio.
My projects page, seen on Dark ModeStep 7: Final features and accessibility
After days of headaches thanks to Media Queries and, after converting a video into a gif so I can directly use it on my site hero with the background-image property; I finally completed the page. At this point I recommend you to use some accessibility testing tool like Axe devtools to ensure that your website is accessible. If you haven't done so yet, start a Github repository for your project and enable Github pages on it, make a decent Readme and publish it in any site you want.
And that's it for today's article, I hope you have enjoyed it, Have a good day! 😄
Top comments (0)