HTML + CSS Page Explanation (Very
Detailed)
What is HTML and HTML5?
HTML stands for HyperText Markup Language. It's not a programming language. It
structures a webpage. HTML5 is the fifth and latest version. It added new features like
video/audio tags, mobile support, and modern elements like <header> and <footer>.
<!DOCTYPE html>
Tells the browser: This page uses HTML5, so follow modern rules.
<html lang="en">
Starts the HTML page. 'lang="en"' means the page is in English.
<head>
This section contains info about the page: metadata, fonts, title, and styles.
<meta charset="UTF-8" />
Uses UTF-8 encoding to display letters, symbols, and emojis correctly.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Makes the site responsive — adjusts for mobile screens and sets default zoom.
<title>JNA Secrets</title>
Sets the name in the browser tab. Used by search engines and bookmarks.
Google Fonts links
Preconnects to Google Fonts to load them faster. Loads 'UnifrakturCook' font.
<style>
Starts the CSS section. CSS controls the page's appearance (colors, layout, fonts).
body
Sets font, removes spacing, applies a background image, text color, and dim effect.
*, *::before, *::after
Uses 'box-sizing: border-box' so widths include padding and borders.
.container
Centers content, limits width, and adds side padding.
header
Adds background color and centers the page title.
nav and nav ul
Creates a menu with no bullets, horizontal layout, and gap between items.
nav ul li a
Styles menu links. Removes underline, adds color. Changes on hover.
main and section
Adds spacing and styling to sections (white background, padding, rounded corners).
.grid-container and .item-card
Creates a flexible grid for items. Each card has color, padding, shadow, and center text.
footer
Adds a peach-colored bottom area with centered text.
@media (max-width: 600px)
Makes the menu stack vertically on small screens.
<body> content
The visible part of the page. Contains header, nav, sections, and footer.
Sections: About, Men's, Women's, Contact
Each section has a title, product card, or contact info. Styled with grid or basic block.
<footer>
Shows a copyright message at the bottom.