Responsive portfolio with CSS, HTML & Javascript

My Portfolio

Responsive portfolio with CSS, HTML & Javascript

Working as a UX/UI Designer made me realize of the importance of understanding deeper front-end development. Although I had a basic knowledge of CSS and HTML, while working closely with developers I realized that I needed to undersand other concepts, such as bootstrap and javascript.

In Spring 2021 I decided to take the Front-End Development Specialization Course at CareerFoundry. Within one month I had I learned intensively CSS, HTML and the basics of Javascript and discovered my passion for front-end developement.

The result is this responsive portfolio working across all browsers. Read about the process here below and check my code on Github.

Keep on reading Go to Github

The Challenge

01
Showcase my work, communicate my personality and facilitate contact.

02
Create a responsive website for all viewposts and browsers with HTML and CSS.

03
Learn enough Javascript to create simle animations and interactions.

Solution

Through the building of my own portfolio, I would deeply learn CSS, HTML and set the grounds for Javascript and Bootstrap.
The ultimate goal is to be able to build interactive prototypes and learn how to code with React, to work closer with developers.

My Role

UX/UI Designer
Front-End Developer

Tools

Figma
Photoshop
Visual Studio Code
Github
Netifly
Hotjar
Google Analytics
Inspector

The Process

Analyzed the data on Google Analytics and the videos on Hotjar. I realized that most users tried to scroll down on the home page, unsuccessfully.
Taking into account the learnings from Google Analytics and Hotjar, I created wireframes for mobile and desktop, as well as a design system on Figma.
I exported all the images for mobile and desktop to the /img folder.
Created Github and Netifly account, and linked them together.
I added on Visual Studio Code linters and W3C Validator for HTML, CSS and Javascript.
With a mobile-first approach, I continued to write the HTML pages first and after that added the CSS.
Added some simple bootstrap code, to solve some layout issues quickly.
I wrote media queries for all viewport sizes.
Once the HTML and CSS was completed, I continued to add the Javascript code, which was a challenge.
At this point, it was time to test. I organized 5 testers with similar characteristics to my users (potential employers, clients and designers).
I updated the portfolio with the feedback I got from the usability tests.
I tested the portfolio one last time across all viewports (mobile, tablet and desktop), as well as across all main browsers (Safari, Chrome, Firefox, Edge).