As a Product Designer, it’s always important to stay curious and to be continuously learning. I recently took a “Build a website with HTML, CSS, and Github Pages” course with Codecademy to learn HTML and CSS and get a deeper understanding of what is achievable in code and what is feasible in browsers. Through this course I gained knowledge that will help me communicate and collaborate better with developers.

I started from the basics of HTML, its elements and structure. Then I moved on to CSS and learned about flexbox and responsive layout. I also learned about the version control system Git. My code can be viewed on my Github repository available here.

At the end of my course, I completed a capstone project Colmar Academy. I had the opportunity to put my web development skills to the test. I built a responsive site from scratch. I started from the basics of HTML, its elements and structure. Then I moved on to CSS and learned about flexbox and responsive layout. I also learned about the version control system Git. My code can be viewed on my Github repository available here.

I was tasked with designing and creating the landing page for a new school. The assignment was to meet the design specification I was given, but we were instructed to take it a step further and create a solution that works for end-users. I was provided with wireframes, icons and images. I translated their design into HTML and CSS and added my own customizations, with respect to color and animations to create an attractive and functional responsive design.

Colmar is an actual city in the northeast of France. I did some research and found that it is a very vibrant and colorful city. I used images of the city as inspiration for my color choices in my design.

For typography I chose Open Sans, a sans-serif typeface that is clean and modern. It is incredibly readable in small sizes and has excellent legibility characteristics in its letterforms.  

This project was challenging. It took me some time to grasp the concept of the box model and to understand flexbox. My initial code had many styles and it quickly got confusing. I learned the DRY (Don’t Repeat Yourself) principle, it was very valuable in reducing the amount of CSS and made my code more manageable.

I learned a lot in the course. The knowledge I have gained has given me a new perspective on design, I am more cognizant of what is and what isn’t feasible in a browser or mobile device. I am now able to communicate with developers using CSS, which will only increase my effectiveness as a designer.

My code can be viewed on my Github repository available here.