the_information_nexus/webdev-html-css.md at ba8d7ca67d856a16efb25d5f174cde4886504eee

Files

medusa f72419845e Add tech_docs/webdev-html-css.md

2024-06-03 18:01:08 +00:00

13 KiB

Raw Blame History

Here's a refactored version of the previous guidance, incorporating web-safe items and accessibility considerations, to help you learn HTML and CSS in a structured and well-defined way:

Project Structure

Your project structure should look something like this:

project-root/
│
├── index.html
├── css/
│   ├── reset.css
│   ├── main.css
│   └── components/
│       ├── header.css
│       ├── footer.css
│       └── main-content.css
├── images/
│   └── logo.png
└── js/
    └── main.js

Boilerplate HTML (index.html)

Here's a basic HTML template for your landing page, with accessibility considerations:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="images/logo.png" alt="Company Logo">
        </div>
        <nav>
            <ul>
                <li><a href="#" aria-label="Home">Home</a></li>
                <li><a href="#" aria-label="About">About</a></li>
                <li><a href="#" aria-label="Services">Services</a></li>
                <li><a href="#" aria-label="Contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>Welcome to Our Landing Page</h1>
            <p>This is a short description of what we do.</p>
        </section>

        <section class="features">
            <div class="feature">
                <h2>Feature One</h2>
                <p>Description of feature one.</p>
            </div>
            <div class="feature">
                <h2>Feature Two</h2>
                <p>Description of feature two.</p>
            </div>
            <div class="feature">
                <h2>Feature Three</h2>
                <p>Description of feature three.</p>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Your Company Name. All rights reserved.</p>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>

CSS Files

Reset CSS (reset.css): This file resets the default browser styles to ensure consistency across different browsers.

/* Reset default browser styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Main CSS (main.css): This file contains the main styles for your landing page.

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

/* Header Styles */
header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

header .logo img {
    max-width: 100px;
}

header nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

header nav ul li {
    margin: 0 1rem;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

/* Hero Section */
.hero {
    background: #fff;
    padding: 2rem;
    text-align: center;
}

.hero h1 {
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.hero p {
    font-size: 1.2rem;
}

/* Features Section */
.features {
    display: flex;
    justify-content: space-around;
    padding: 2rem;
    background: #e9e9e9;
}

.feature {
    flex: 1;
    margin: 0 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: 5px;
    text-align: center;
}

.feature h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.feature p {
    font-size: 1rem;
}

/* Footer Styles */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
}

Component CSS Files

To keep your styles modular and maintainable, break down the main CSS file into component-specific files. This example includes styles for the header, footer, and main content.

Header CSS (components/header.css):

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

header .logo img {
    max-width: 100px;
}

header nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

header nav ul li {
    margin: 0 1rem;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

Footer CSS (components/footer.css):

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
}

Main Content CSS (components/main-content.css):

/* Hero Section */
.hero {
    background: #fff;
    padding: 2rem;
    text-align: center;
}

.hero h1 {
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.hero p {
    font-size: 1.2rem;
}

/* Features Section */
.features {
    display: flex;
    justify-content: space-around;
    padding: 2rem;
    background: #e9e9e9;
}

.feature {
    flex: 1;
    margin: 0 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: 5px;
    text-align: center;
}

.feature h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.feature p {
    font-size: 1rem;
}

Combining CSS Files

To combine these component-specific CSS files into a single main CSS file, you can use a CSS preprocessor like SASS or simply import them into main.css using the @import rule.

Updated Main CSS (main.css):

@import url('components/header.css');
@import url('components/footer.css');
@import url('components/main-content.css');

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

Web-Safe Fonts and Colors

Web-Safe Fonts: Use fonts that are widely available on most systems to ensure consistency:

Arial
Verdana
Georgia
Times New Roman
Courier New
Tahoma

Web-Safe Colors: Stick to standard color names or hexadecimal values:

White: #ffffff
Black: #000000
Gray: #808080
Red: #ff0000
Blue: #0000ff
Green: #008000

Accessibility Considerations

Semantic HTML: Use proper HTML elements (<header>, <nav>, <main>, <section>, <footer>) to give structure and meaning to your content.

ARIA Attributes: Enhance accessibility with ARIA (Accessible Rich Internet Applications) attributes where necessary. 3. Alt Text for Images: Always provide meaningful alt attributes for images. 4. Keyboard Navigation: Ensure that your site can be navigated using a keyboard. 5. Color Contrast: Make sure there is sufficient contrast between text and background colors for readability.

Summary

Organize Files: Use a clear and maintainable project structure with separate folders for CSS, images, and JavaScript.
Boilerplate HTML: Create a basic HTML file with semantic structure and minimal content, with accessibility in mind.
Modular CSS: Split CSS into component-specific files for easier management and scalability.
Combine CSS: Use @import or a CSS preprocessor to combine component-specific CSS files into a main CSS file.
Web-Safe Items: Use web-safe fonts and colors for consistency across different systems and browsers.
Accessibility: Implement accessibility best practices to make your site usable for everyone.

By following this structured approach, you can build and maintain HTML and CSS projects that are well-organized, scalable, and accessible. This will align with standard web development practices and help you learn CSS effectively.

Accessibility Considerations

Semantic HTML

Use Proper HTML Elements: Use semantic HTML elements like <header>, <nav>, <main>, <section>, and <footer> to give structure and meaning to your content. This improves accessibility by helping assistive technologies understand the structure of your webpage.

Header: Wrap the introductory content or navigational links for the webpage.

<header>
    <h1>Website Title</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

Nav: Use the <nav> element for the navigation section.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Main: Enclose the main content of the document.

<main>
    <section class="hero">
        <h1>Welcome to Our Landing Page</h1>
        <p>This is a short description of what we do.</p>
    </section>
</main>

Section: Define sections in a document.

<section class="features">
    <div class="feature">
        <h2>Feature One</h2>
        <p>Description of feature one.</p>
    </div>
    <div class="feature">
        <h2>Feature Two</h2>
        <p>Description of feature two.</p>
    </div>
    <div class="feature">
        <h2>Feature Three</h2>
        <p>Description of feature three.</p>
    </div>
</section>

Footer: Wrap the footer content.

<footer>
    <p>&copy; 2024 Your Company Name. All rights reserved.</p>
</footer>

ARIA Attributes

Enhance Accessibility with ARIA (Accessible Rich Internet Applications) Attributes:

aria-label: Provides an accessible name to an element.
```
<a href="#" aria-label="Home">Home</a>
```

aria-hidden: Indicates whether an element is visible to screen readers.

<div aria-hidden="true">This text is not visible to screen readers.</div>

aria-live: Announce dynamic changes in content to screen readers.
```
<div aria-live="polite">New content loaded dynamically.</div>
```

Alt Text for Images

Always Provide Meaningful alt Attributes for Images:

Informative Image: Describe the content of the image.
```
<img src="images/logo.png" alt="Company Logo">
```
Decorative Image: Use an empty alt attribute for decorative images.
```
<img src="images/decorative.png" alt="">
```

Ensure that Your Site Can Be Navigated Using a Keyboard:

Focus Order: Ensure a logical focus order for interactive elements.
```
<a href="#main-content">Skip to main content</a>
```
Focus Styles: Provide visible focus indicators for interactive elements.
```
a:focus {
    outline: 2px solid #000;
}
```

Color Contrast

Ensure Sufficient Contrast Between Text and Background Colors for Readability:

WCAG Guidelines: Follow the Web Content Accessibility Guidelines (WCAG) for color contrast (e.g., 4.5:1 for normal text, 3:1 for large text).
```
body {
    color: #333;
    background-color: #f4f4f4;
}
```

Additional Best Practices

Headings: Use heading tags (<h1>, <h2>, etc.) appropriately to define the structure and hierarchy of your content.
Forms: Label form elements properly.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Links: Ensure link text is descriptive and meaningful out of context.

<a href="services.html">Learn more about our services</a>

Tables: Use tables for tabular data, with appropriate headers.

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
</table>

By integrating these accessibility considerations into your HTML and CSS, you ensure your website is usable and accessible to a wider audience, including people with disabilities. This aligns with best practices and standards in web development.

13 KiB Raw Blame History

Project Structure

Boilerplate HTML (index.html)

CSS Files

Component CSS Files

Combining CSS Files

Web-Safe Fonts and Colors

Accessibility Considerations

Summary

Accessibility Considerations

Semantic HTML

ARIA Attributes

Alt Text for Images

Keyboard Navigation

Color Contrast

Additional Best Practices

13 KiB

Raw Blame History