Case Study

As a new web developer, I needed to practice translating a PSD design into a fully hand-coded webpage, while creating an inviting and visually cohesive experience. The challenge was implementing a percent-structured layout with nothing but vanilla HTML and CSS and to visually reflect the cozy and authentic vibe of this family restaurant.

I hand-coded a single-page demo site using only HTML and CSS, leveraging section percentages to control spacing. I adapted the PSD design into a functional web layout, including a header with placeholder links for “Menu,” “Catering,” “Reviews,” and “Contact.” I focused on creating a warm aesthetic while matching the design comprehensive's precise measurements and branding vision.

The final demo showcases my ability to turn a static design into a functional, cohesive webpage entirely by hand. Even without modern layout tools, the site successfully communicates the restaurant’s cozy, inviting atmosphere and demonstrates the skills I developed early in my web development journey.

• Gained confidence in translating PSD designs into fully hand-coded HTML and CSS.
• Learned how to structure a single-page layout using section percentages.
• Practiced creating visually cohesive, aligned designs without frameworks or pre-built templates.
• Developed a foundation for learning about normalizing stylesheets and responsive thinking, even before learning modern layout techniques.