Advanced Workflow Techniques
Every pharaoh had a system for managing pyramid construction. As a web developer, you also need an efficient workflow. In this lesson, you will learn additional techniques that will streamline your web page creation process.
Prefixes and Meta Tags in head
The
<head>1<head>
2 <!-- Character encoding - always at the beginning -->
3 <meta charset="UTF-8">
4
5 <!-- Responsiveness -->
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8 <!-- Page title (appears in the tab) -->
9 <title>Egypt Museum | Home</title>
10
11 <!-- Description for search engines -->
12 <meta name="description" content="Ancient Egypt Museum - tickets online, exhibitions, history of pharaohs.">
13
14 <!-- Page author -->
15 <meta name="author" content="Mohamed">
16
17 <!-- Browser theme color on mobile -->
18 <meta name="theme-color" content="#1a1a2e">
19</head>Code Comments
Comments are "scribe's notes" - they help you and others understand the code:
1<!-- This is an HTML comment - not displayed on the page -->
2
3<!-- =============================
4 SECTION: Main Navigation
5 Author: Mohamed
6 Date: 2024-01-15
7 ============================= -->
8<nav>
9 <!-- Navigation link list -->
10 <ul>
11 <li><a href="/">Home</a></li>
12 </ul>
13</nav>1/* This is a CSS comment */
2
3/* ============================
4 SECTION: Typography
5 ============================ */
6h1 { font-size: 2rem; }
7
8/* TODO: Add responsiveness for mobile */Project File Structure
A well-organized project is the key to success:
1<!-- Directory structure: -->
2<!--
3 project/
4 index.html - Main page
5 about.html - About us page
6 contact.html - Contact page
7 css/
8 style.css - Main stylesheet
9 reset.css - CSS Reset
10 js/
11 script.js - Main script
12 images/
13 logo.svg - Logo
14 hero.jpg - Main image
15 favicon.ico - Tab icon
16 fonts/
17 custom-font.woff2 - Custom font
18-->CSS Reset and Normalize
Every browser applies default styles (e.g., margins on body, heading sizes). CSS Reset or Normalize standardize these styles:
1/* Simple CSS Reset */
2*,
3*::before,
4*::after {
5 box-sizing: border-box;
6 margin: 0;
7 padding: 0;
8}
9
10img {
11 max-width: 100%;
12 display: block;
13}
14
15body {
16 min-height: 100vh;
17 line-height: 1.6;
18}CSS Variables (Custom Properties)
CSS Variables let you define values once and use them throughout the stylesheet - like a pharaoh's cartouche, which once defined, appears in many places in the temple:
1:root {
2 --color-primary: #1a1a2e;
3 --color-accent: #d4af37;
4 --color-text: #333;
5 --font-main: 'Georgia', serif;
6 --spacing-sm: 0.5rem;
7 --spacing-md: 1rem;
8 --spacing-lg: 2rem;
9}
10
11body {
12 font-family: var(--font-main);
13 color: var(--color-text);
14}
15
16h1 {
17 color: var(--color-accent);
18 margin-bottom: var(--spacing-md);
19}CSS Variables are defined with the
--var()- One place to change - changing a variable's value updates it everywhere
- Readability -
is more understandable thanvar(--color-accent)#d4af37 - Theming - easily create dark/light mode by changing only the variables
Favicon - Tab Icon
Every professional page needs a tab icon:
1<head>
2 <!-- Classic favicon -->
3 <link rel="icon" type="image/x-icon" href="/favicon.ico">
4
5 <!-- SVG favicon (modern browsers) -->
6 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
7
8 <!-- Icon for Apple devices -->
9 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
10</head>Best Practices for CSS Organization
Organize your CSS into logical sections - like a scribe organizing hieroglyphs into columns:
1/* ============================
2 1. RESET / NORMALIZE
3 ============================ */
4*, *::before, *::after {
5 box-sizing: border-box;
6 margin: 0;
7 padding: 0;
8}
9
10/* ============================
11 2. CSS VARIABLES
12 ============================ */
13:root {
14 --color-primary: #1a1a2e;
15 --color-accent: #d4af37;
16}
17
18/* ============================
19 3. TYPOGRAPHY
20 ============================ */
21body { font-family: 'Georgia', serif; }
22h1, h2, h3 { font-weight: 700; }
23
24/* ============================
25 4. LAYOUT
26 ============================ */
27.container { max-width: 1200px; margin: 0 auto; }
28
29/* ============================
30 5. COMPONENTS
31 ============================ */
32.card { border: 1px solid #ddd; padding: 1rem; }
33.button { padding: 0.5rem 1rem; cursor: pointer; }
34
35/* ============================
36 6. MEDIA QUERIES
37 ============================ */
38@media (max-width: 768px) {
39 .container { padding: 0 1rem; }
40}This structure ensures that even a large stylesheet remains readable and easy to maintain. As Mohamed used to say: "Well-organized code is like a well-managed pyramid construction - every block has its place!"