Jemima Ama Neizer

ALLURE LIPSE-COMMERCE WEBSITE

OBJECTIVE

The objective of the HTML/CSS Website Development project is to create a four-page website using HTML and CSS. The focus lies on creating a visually appealing and user-friendly website of a chosen topic, where each page adheres to the layout of your XD file. Additionally, photographing images to be used in the website is a requirement and should be relevant to the chosen topic and add visual interest to the website content.

PROCESS

The first step in starting this project was selecting a topic for the website. I chose to delve into the world of lip makeup which was inspired by online shopping. With the topic for the website established, I charted a course through the planning phase, meticulously outlining a sitemap to mark down the structure the website a mood board was created to be inspired on the content and features for the website. The choice of name and logo for the lip make was created - ALLURE LIPS. An XD template of the website was created as a foundation for image selection, photography, and coding. Following the project objective, I sourced images relevant to lip makeup from stock photo websites. Additionally, I captured over 10 of my own images to be incorporated into the website. Each image was carefully selected and optimized for web display, contributing to the overall aesthetic and narrative of the website. With a clear plan in place, I proceeded to create the HTML code for each page of the website. I structured the content using the high-fidelity wireframe created in XD. This approach not only enhanced having a foundation for the structure but also facilitated easier styling and debugging of the website. The next phase involved styling the website using CSS. Leveraging CSS-Grid as the primary method of layout which was created based on the grid created in Adobe XD, I crafted rules to control the visual presentation of elements such as Typography, colors, spacing, and alignment to create a user-friendly website.