The project of this week was to build a portfolio, with accessibility in mind, mainly with help from HTML and CSS. The design was given and details could be fetched from Figma.
Since we received a design to use, but no code base to stand on, I started with creating one HTML file and one CSS file, and looked at the design in Figma in order to grasp the idea and start thinking about color scheme to use. I started building the mobile version first, then did the desktop, and finally made some media queries for tablet as well. I decided to go with different hero image for mobile and desktop, since it looked better that way with the photos I decided to choose. I also decided to change the position of the title on the header image a bit, since it made a better match. I mainly used flexbox method in order to position the elements, but a little touch of grid as well. I tried to make sure to use semantic HTML elements in every place I could, in order to have the site as accessible as possible. After finishing the website itself, I did a lot of testing, and then changed some colors, since the contrasts wasn't great. I also added tabindex to make it more accessible for all who doesn't use the mouse when going through the site, and made sure it was well read by screenreaders. I consider this website to be something that I will keep working on, so I can't say if I would have done something differently if I had more time, but I look forward to add more content as I have completed more projects and have written some articles with my thoughts on the coding topic.
The portfolio can be viewed at https://therese-hagelin-portfolio.netlify.app/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent