Exercise 3 - HTML and CSS development :Creating a Recipe Card
HOU YAN HENG
0378215
Table of contents
Summary of recipe card development
Course Content Summary
Structure (HTML)
-
Fonts & CSS
Loads Google Fonts with<link rel="preconnect">and a combined Google Fonts URL, then your site styles viastyle.css. -
Semantic layout
Uses<nav>,<section>,<header>,<main>,<article>, and (should use)<footer>to structure content accessibly. All images includealt. -
Hero banner
A full-bleed image fills the hero using absolute positioning andobject-fit: cover. Title/description sit on top via an absolutely positioned overlay. -
Ingredients (cards)
A two-column grid of<article class="ing-card">items: image area + text area. -
Steps (alternating layout)
Each step is a grid with media + text; even items flip columns for an alternating zig-zag. -
In-page navigation
Navbar links anchor to#top,#…-ingredients,#…-steps,#contact. Smooth scroll is enabled in CSS. -
Micro-interaction (JS)
A tiny script watches scroll/resize and: -
Detects the current
.recipesection. -
Rewrites “Ingredients/Steps” links to the current section’s IDs.
-
Toggles
aria-current="true"on flavor “chips” for accessible highlighting.
Presentation (CSS)
-
Global base
box-sizing: border-box, smooth scrolling, theme colors, spacing, and your chosen Google Font. -
Sticky “glassy” nav
position: sticky; top:0;, soft border, translucent white withbackdrop-filter: blur(6px); flex aligns flavors left and links right. -
Typography
Responsive headings useclamp(); chips and links have hover states; letter-spacing and line-height improve readability. -
Cards & media
Cards have rounded corners, subtle shadow; placeholders userepeating-linear-gradient. All images are forced to cover containers (object-fit: cover). -
Responsive
Breakpoints at 1000/820/600px reduce paddings/heights, stack grids into one column, and wrap chips. -
Anchor offset
:target { scroll-margin-top: 80px; }prevents sticky nav from covering scrolled-to headings. -
Contact section
A centered column flex form with focus rings and button hover transition.
Course Content Summary
Week 4
This week's theme was "The Web," focusing on the working principles and basic structure of web pages, and why we must adhere to Web Standards.
In the early days of the internet, people used computers, mice, and keyboards to access the internet. Now, however, there are many more ways to access it: some people use mobile phones or tablets, while others use voice input/output (e.g., screen readers for the visually impaired). This necessitates that websites maintain consistent accessibility across different devices.
The instructor emphasized the importance of the W3C (World Wide Web Consortium). It is the body that sets web page standards, and the main standard languages include:
1.HTML: Defines the structure of a web page;
2.CSS: Controls the appearance of a web page;
3.JavaScript: Enables dynamic interactivity in web pages.
The purpose of these standards is to ensure developers achieve consistent results across different browsers, allowing web pages to be correctly accessed by all users.
Failure to adhere to standards may result in inconsistent layout or loading errors on different devices or browsers, even if the web page functions correctly.
The teacher also explained how web pages work. When we enter a URL into our browser, the browser looks up the website's IP address using DNS (Domain Name System), then connects to the corresponding web server to retrieve the content, and finally displays the web page on the screen.
After understanding how web pages work, the teacher guided us through the basic structure of web pages and tags—the core of HTML.
Each element consists of a <head> tag and an </head>`tag;
The <head> element contains webpage information, such as the title `<title>`;
The <body> element contains webpage content, such as text, images, and links.
HTML provides semantic structure
HTML code must be enclosed in <> tags and treated as HTML elements. It must be a closed sequence, such as <p> and </p>.
<h1> to <h6>: heading levels
HTML provides six levels of heading tags, from `<h1>` (most important) to `<h6>` (least important).
These not only control font size but also express the hierarchical relationship of information.
Typically, a webpage should only have one `<h1>` tag, representing the main heading.
<p>: paragraph
The `<p>` tag is used to represent a paragraph.
It automatically adds whitespace before and after the paragraph, making the text easier to read.
<b> / <i>: bold and italic
<ul> / <ol> / <li>: ordered and unordered lists
HTML provides us with two different types.Ordered list are lists where each item in the list is numbered. List is for set of steps for a recipe that must be performed in order • Unordered list are list that begin with a bullet point.Teacher also explained how to use nested lists.
<a>: hyperlink;
<img>: image insertion.
These basics form the "skeleton" of a webpage, while CSS is responsible for its "appearance," together determining the overall presentation of the webpage.
Week 5
Week 6
Week 7
Comments
Post a Comment