Posts

Showing posts from November, 2025

Exercise 3 - Creating a Recipe Card

-
Image
  Spaghetti Carbonara This website is a simple recipe card designed using HTML and CSS. It features a clean and modern layout showcasing the “Spaghetti Carbonara” recipe. The recipe card includes the dish’s title, a high-quality image, a detailed list of ingredients, and step-by-step cooking instructions. The webpage uses a combination of element selectors, class selectors, and ID selectors to style different parts of the page, providing a visually appealing and easy-to-read format. The design includes a soft color theme, rounded corners, hover effects, and a responsive card layout to enhance the user experience. This website serves as a beginner-friendly demonstration of how HTML structure and CSS styling can be combined to create an attractive, functional recipe card. HTML And CSS Code <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0...
Post a Comment
Read more

Project 1 - Website Redesign Proposal

-
Image
  canva     canva   1. Website Analysis – CAVS 55 Event Page (act.mit.edu/event/cavs-55) 1.1 Current Design Evaluation Layout The page follows a standard single-column event layout : site header with navigation, then event title, dates, and descriptive text, sometimes with images in between. act.mit.edu Content is mostly long text blocks , with limited use of visual hierarchy (sections, cards, or clear blocks), which makes scanning harder for users who just want the basics (what / when / where / how). Important elements like date, time, place, program schedule are buried inside paragraphs instead of being visually highlighted (e.g., in a sidebar, box, or icons). Color Scheme The page uses the MIT ACT site palette , which is mainly white background with dark text and a dark header. This is consistent with the rest of the site and feels academic and serious. act.mit.edu However, for a celebration event (55th anniversary of CAVS) , the color scheme ...
Post a Comment
Read more