Project overview

For my first-ever web development project, I was tasked with creating a simple website that displayed three daily objects I use that has a good design. At the time, I had no prior experience in coding, and this project served as my introduction to HTML, CSS, and web design fundamentals.

Project Requirements

• Display three daily objects as images.
• Have a good design and structure.
• Be coded in HTML and CSS.

My Approach & Development Process

The selected objects are:

• Water jug
• Power bank
• Microphone

Writing the HTML Code:

• I used the "img" tag to display pictures of the objects.
• I used the "button" tag (which I later learned I used incorrectly).
• I used basic "div" elements to structure my layout.

Adding Basic CSS for Styling

• Background color to make the page visually appealing.
• Padding & margins to space elements properly.
• Font styling for a cleaner look.

Challenges & Mistakes I Made

• I used the "button" tag incorrectly, which made my code invalid. I was not aware that i was use for interactive elements for javasript.
• Initially, I didn’t understand how CSS selectors worked, making my styles inconsistent.
• Images weren’t properly aligned, and the page didn’t look as polished as I wanted.

Improvements & What I Would Do Differently

• Use div containers instead of button tag for layout.
• Apply CSS Grid or Flexbox for better alignment.
• Use semantic HTML to make my code cleaner and more readable.
• Optimize images to improve website performance.