All Projects

Static Website

May 2024(2 weeks)

HTMLCSS

Why I built this

I built this website to gain my first hands-on experience in web development and understand the fundamentals of creating a structured website using HTML and CSS.

How it came together

The website was developed based on a predefined project scenario, using provided content and visual assets. I started by planning the page structure and layout. Then I built each page using semantic HTML and connected them through navigation. After that, I focused on creating a consistent layout using CSS.

Troubleshooting

Problem
  • Due to project requirements, I was restricted to a predefined color palette and a very limited number of image assets, posing a risk of the user interface looking static or repetitive.

  • Since JavaScript was not utilized in this phase, I needed to find a way to deliver an engaging and lively user experience solely through markup and styling.

Solution
  • To break away from standard linear grids, I used CSS Flexbox and mirrored identical image assets to create visual variation and reduce user fatigue.

  • Relying entirely on pure HTML and CSS without JavaScript, I implemented lightweight animations, including hover-triggered visual effects and a custom post-it component with subtle 3D shadow and rotation effects to highlight key sections.

Outcome
  • Created a polished static website by making the most of the available assets with creative CSS.

  • Gained a solid understanding of semantic HTML and page structure, and learned how far core CSS can go in creating interactive user interfaces.