Developing a website with HTML, CSS and JavaScript
• Front-End Developing • Web Design
Overview
About:
I was tasked with creating a website for my family’s bicycle shop, which offers a range of products including mountain bikes, road bikes, accessories like helmets and shoes, as well as repair services. The website was built using HTML, CSS, and JavaScript.
I was tasked with creating a website for my family’s bicycle shop, which offers a range of products including mountain bikes, road bikes, accessories like helmets and shoes, as well as repair services. The website was built using HTML, CSS, and JavaScript.
Project Goal:
- Incorporate CSS grid layout as a requirement.
- Develop more than 5 pages, ensuring the content and structure are well-organized and user-friendly.
- Incorporate CSS grid layout as a requirement.
- Develop more than 5 pages, ensuring the content and structure are well-organized and user-friendly.
Challeges:
- Ensuring a cohesive design and user experience across more than five pages while maintaining a well-organized structure.
- Implementing the CSS grid layout efficiently across multiple sections of the website without compromising responsiveness or design quality.
- Managing the front-end development entirely solo, including troubleshooting and debugging issues in HTML, CSS, and JavaScript.
- Balancing aesthetic appeal with functionality, especially when integrating product details, services, and an intuitive navigation system.
- Optimizing the website for different screen sizes and devices to ensure a seamless user experience on both desktop and mobile.
- Ensuring a cohesive design and user experience across more than five pages while maintaining a well-organized structure.
- Implementing the CSS grid layout efficiently across multiple sections of the website without compromising responsiveness or design quality.
- Managing the front-end development entirely solo, including troubleshooting and debugging issues in HTML, CSS, and JavaScript.
- Balancing aesthetic appeal with functionality, especially when integrating product details, services, and an intuitive navigation system.
- Optimizing the website for different screen sizes and devices to ensure a seamless user experience on both desktop and mobile.
Moodboard:
I aimed to create a website based on a color palette of red, white, and blue. In my view, these colors represent exercise and nature. The red symbolizes the sun at dawn, reflecting the time when many people enjoy exercising. Blue represents the sky, evoking the open view people experience while riding their bicycles.
I aimed to create a website based on a color palette of red, white, and blue. In my view, these colors represent exercise and nature. The red symbolizes the sun at dawn, reflecting the time when many people enjoy exercising. Blue represents the sky, evoking the open view people experience while riding their bicycles.
With moodboard and wireframe, I began the development phase using Visual Studio Code to create the index.html page. During coding, I organized each element with classes to streamline the CSS workflow and ensure easy styling.
I have three css files to organize: layout.css, base.css, breakpoint.css
base.css: Contains default margins, and padding, which apply universally across the entire site.
layout.css: Focuses on the structure of the website, including grid systems, containers, and positioning of elements.
breakpoint.css: Handles responsive design, applying media queries to adapt the layout and styles for different screen sizes (e.g., mobile, tablet, desktop).
After several days of iterating the code, fixing bugs, and refining the interactions, I successfully completed the project and uploaded it to the web using Netlify. You can visit the site here: https://mtbike.netlify.app/
