I have previously written about how important branding yourself as a developer is. Continuing along this line, I want to dedicate a couple posts to portfolio creation. Today, I'm going to talk about actually building your portfolio. The next article will be on creating content for the portfolio, so stay tuned for that.
I'm sure it comes as no surprise that having somewhere to showcase your work while simultaneously showing off your skills is one of the most effective ways to well - show your abilities.
But undergoing building a portfolio website is a big task, one that often seems like more time than you may have to dedicate. So, with that in mind, I have created an entire Series that brings you through creating the website from coming up with the design of the website, to actually deploying the built out website.
The tutorials span four hours and are broken up into twelve parts:
- Planning & Design
- Setup, Assets & Navbar
- Building the Main Section
- Building the Skills Section
- Building the Work Section (Part 1)
- Building the Work Section (Part 2)
- Finishing the Build
- Making it Responsive (Part 1)
- Making it Responsive (Part 2)
- Connecting the Pieces
- CSS Animation: The Typewriter Effect
- Deploying
The Series is available as a full course for free on my CodeCast!
The Series
We start by designing out the website using Figma! This was my first time using Figma to actually design (as opposed to coding off of others designs on there), so it was a bit of a learning curve. There is plenty I would change in hindsight, and I address that throughout the Series. However, I think being able to have some basic skills in Figma as a developer is important, because having any design skills under your belt can really set you apart.
The final product looks like this 👇🏻 You can find the design in the Figma community.
Throughout the Series we touch on:
- building the structure of the application and styling it with Bootstrap and handwritten CSS (primarily handwritten).
- changing SVGs to match our styling using a free editor
- writing media queries to make our site responsive
- creating responsive iFrames
- adding in a typing animation to our heading
- deploying the site on Netifly
We use the following free resources that I highly recommend:
- Figma: one of the most popular resources currently available for designing. I use this all the time as a developer, as our designer uses Figma!
- Pixabay: Pixabay is a widely used resource where you can get assets to use without attribution!
- Coolors: I just discovered this website when I was building this project and it's fantastic for anyone who is not a designer (or even those who are). It lets you build colour palettes as well as browse pre-made colour palettes.
- UXWing: This is an attribution-free and entirely free to use website with a collection of popular icons. It's honestly fantastic and I hadn't heard about it before this application!
- Netifly: This is what I used to deploy my application!
- SVG Editor: How I edited the SVGs!
- CodeCast: This is what I used to make my tutorials and build my Series out on. It includes the media and the code together and the Studio (recording software) is available on Mac, Windows & Linux!
If you build this project out, I would love to see what you come up with and any changes you make along the way! The final version of my product can be found here!
You can also clone the GitHub repo with all the code, but I would highly encourage you to avoid this, and build it out by following along the tutorials.
For more of my content, follow me on like Twitter & CodeCast!
You can also read my last blog here:
Top comments (0)