diff --git a/tech_docs/webdev-html-css.md b/tech_docs/webdev-html-css.md new file mode 100644 index 0000000..8552b86 --- /dev/null +++ b/tech_docs/webdev-html-css.md @@ -0,0 +1,544 @@ +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: + +```html + + + + + + Landing Page + + + + +
+ + +
+ +
+
+

Welcome to Our Landing Page

+

This is a short description of what we do.

+
+ +
+
+

Feature One

+

Description of feature one.

+
+
+

Feature Two

+

Description of feature two.

+
+
+

Feature Three

+

Description of feature three.

+
+
+
+ + + + + + +``` + +### CSS Files + +**Reset CSS (reset.css)**: +This file resets the default browser styles to ensure consistency across different browsers. + +```css +/* 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. + +```css +/* 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)**: + +```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)**: + +```css +footer { + background: #333; + color: #fff; + text-align: center; + padding: 1rem 0; +} +``` + +**Main Content CSS (components/main-content.css)**: + +```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)**: + +```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 + +1. **Semantic HTML**: Use proper HTML elements (`
`, `