You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/Day3/index.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ has_children: false
6
6
nav_exclude: false
7
7
---
8
8
9
-
# Day 3. Python Advance. 🌐 Hack your Stocks, Flights and Habits<ahref="#top"class="back-to-top-link"aria-label="Back to Top">↑</a>
9
+
# Day 3. Python Advance. 🌐 Hack your Stocks, Flights and Habits
10
10
{: .no_toc }
11
11
🚀 In this lesson, you’ll unlock the power of APIs, automation, and data tracking to master real-world Python skills. From monitoring markets to finding flight deals and optimizing your routines—prepare to code smarter and live better. 🌐💡
# Day 4. Web Foundations: HTML, CSS, Bootstrap & Web Design<ahref="#top"class="back-to-top-link"aria-label="Back to Top">↑</a>
9
+
# Day 4. Web Foundations: HTML, CSS, Bootstrap & Web Design
10
10
{: .no_toc }
11
11
12
12
Welcome to Day 4! Today, you’ll build a solid foundation in web development by learning how the internet works, the essentials of HTML and CSS, and how to use Bootstrap for rapid, beautiful web design. We’ll also cover the basics of web design theory to help you create websites people will love.
@@ -207,6 +207,7 @@ The <div> HTML element is a generic container for flow content. It's a "division
207
207
208
208
This can be visualised in [W3Schools html web testing](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic)
209
209
210
+
{% raw %}
210
211
```html
211
212
<!DOCTYPE html>
212
213
<htmllang="en">
@@ -595,6 +596,7 @@ This can be visualised in [W3Schools html web testing](https://www.w3schools.com
595
596
</body>
596
597
</html>
597
598
```
599
+
{% endraw %}
598
600
599
601
</details>
600
602
@@ -604,6 +606,7 @@ This can be visualised in [W3Schools html web testing](https://www.w3schools.com
604
606
</summary>
605
607
You can use F12 or right click inspect to see the html code for each element.
606
608
609
+
{% raw %}
607
610
```
608
611
<html lang="en">
609
612
<head>
@@ -991,6 +994,7 @@ You can use F12 or right click inspect to see the html code for each element.
991
994
</body>
992
995
</html>
993
996
```
997
+
{% endraw %}
994
998
995
999
</details>
996
1000
@@ -1741,6 +1745,7 @@ You can visualise this code in [W3Schools html web testing](https://www.w3school
1741
1745
Bootstrap template Rendered
1742
1746
</summary>
1743
1747
1748
+
```
1744
1749
<html lang="en">
1745
1750
<head>
1746
1751
<meta charset="UTF-8">
@@ -2070,41 +2075,168 @@ You can visualise this code in [W3Schools html web testing](https://www.w3school
### Markdown, Jekyll and Ruby<ahref="#top"class="back-to-top-link"aria-label="Back to Top">↑</a>
2084
+
2085
+
#### What is Markdown?
2086
+
2087
+
Markdown is a lightweight markup language for formatting text using plain text syntax. It's designed to be easy to read and write, and is widely used for documentation, README files, and static site generators.
2088
+
2089
+
**Basic Markdown Syntax:**
2090
+
- Headings: `# Heading 1`, `## Heading 2`, ..., up to `###### Heading 6`
2091
+
- Bold: `**bold text**` or `__bold text__`
2092
+
- Italic: `*italic text*` or `_italic text_`
2093
+
- Lists:
2094
+
- Unordered: `- item` or `* item`
2095
+
- Ordered: `1. item`
2096
+
- Links: `[link text](https://example.com)`
2097
+
- Images: ``
2098
+
- Code:
2099
+
- Inline: `` `code` ``
2100
+
- Block:
2101
+
```
2102
+
code block
2103
+
```
2104
+
- Blockquote: `> quoted text`
2105
+
2106
+
**Differences with HTML:**
2107
+
- Markdown is simpler and more readable in raw form.
2108
+
- HTML is more powerful and flexible, but more verbose.
2109
+
- Markdown can be converted to HTML, but not all HTML features are available in Markdown.
2110
+
2111
+
For a full reference, see [Markdown Guide](https://www.markdownguide.org/basic-syntax/).
2112
+
2113
+
#### Jekyll and Ruby
2114
+
2115
+
[Jekyll](https://jekyllrb.com/) is a static site generator that converts Markdown files into HTML websites. It is the engine behind GitHub Pages, allowing you to publish documentation or blogs directly from a GitHub repository for free. Jekyll is written in the Ruby programming language.
2116
+
2117
+
#### This Website
2118
+
2119
+
This website is built using the [just-the-docs](https://just-the-docs.github.io/) theme, which is a Jekyll-based theme designed for documentation sites.
2120
+
2121
+
2122
+
2123
+
2077
2124
---
2078
2125
2079
2126
## 🎨 Web Design School: How to Create a Website People Will Love<a href="#top" class="back-to-top-link" aria-label="Back to Top">↑</a>
2080
2127
2081
2128
### Introduction to Web Design<a href="#top" class="back-to-top-link" aria-label="Back to Top">↑</a>
2082
2129
2083
-
Web design is about more than code—it’s about creating a great experience.
2130
+
Web design is about more than just writing clean code—it’s about crafting a visual and emotional experience that speaks to your users. A successful design invites people in, tells a story, and guides them effortlessly toward a goal. In this guide, we explore the four pillars of effective web design: **Color Theory, Typography, User Interface (UI), and User Experience (UX)**. Once you've mastered these, you'll be equipped to create beautiful, human-centered websites.
2084
2131
2085
-
#### Understanding Color Theory<ahref="#top"class="back-to-top-link"aria-label="Back to Top">↑</a>
> *Why it works:* Coca-Cola’s brand is all about excitement, fun, and refreshment. The bold red color sparks energy and urgency, making it feel dynamic and iconic.
2144
+
- 🟡**Yellow**: optimism, intellect, attention—effective for grabbing interest but avoid using it for large backgrounds.
> *Why it works:* McDonald's uses yellow to grab attention and convey a sense of happiness and friendliness. It’s especially effective in logos and accents, not overwhelming the background.
2148
+
- 🟢 **Green**: freshness, safety—ideal for eco or food-related businesses.
> *Why it works:* Whole Foods emphasizes health, nature, and sustainability. Green reinforces their commitment to fresh, organic food and environmentally conscious practices.
2152
+
- 🔵 **Blue**: trust, calm—popular with finance and tech firms.
> *Why it works:* Blue is the dominant color in PayPal’s design, evoking trust, security, and professionalism—critical for a financial service provider.
2156
+
- 🟣 **Purple**: royalty, femininity—often used in luxury and beauty products.
> *Why it works:* Cadbury uses a rich purple to reflect luxury and indulgence. The color also helps distinguish its products and adds a sense of premium quality.
2160
+
2161
+
- **Use scientific palettes**:
2162
+
- **Analogous**: harmonious, side-by-side colors on the color wheel.
Choose color combinations that reflect your website’s purpose. A good palette makes your design feel intentional, coherent, and memorable.
2102
2180
2103
-
#### User Experience (UX) Design<ahref="#top"class="back-to-top-link"aria-label="Back to Top">↑</a>
2181
+
---
2182
+
2183
+
### ✍️ Understanding Typography<a href="#top" class="back-to-top-link" aria-label="Back to Top">↑</a>
2184
+
2185
+
Typography guides the reader’s journey. Great typography brings clarity and mood to your content.
2186
+
2187
+
- **Choose readable fonts**: Prioritize legibility across all screen sizes.
2188
+
- **Limit to 2–3 font families**: Too many can overwhelm and distract.
2189
+
- <strong>Serif fonts</strong> (like <span style="font-family: 'Georgia', serif;">Georgia</span> or <span style="font-family: 'Times New Roman', serif;">Times New Roman</span>) have small decorative strokes, or "feet," at the ends of their letterforms, giving them a traditional and elegant feel often used in print.<br>
2190
+
- <strong>Sans-serif fonts</strong> (like Arial) lack these decorative strokes, offering a clean, modern, and minimalist look that is highly legible, especially on digital screens.<br>
2191
+
- The choice between them often depends on the medium (print vs. digital) and the desired mood (classic vs. modern).
2192
+
- **Establish hierarchy**:
2193
+
- Use size, weight (bold vs. regular), and spacing to indicate importance.
2194
+
- Pair serif fonts (<span style="font-family: 'Georgia', serif;">classic, established</span>) with sans-serif (modern, clean) for contrast.
2195
+
- **Consider your brand tone**: A <span style="font-family: 'Times New Roman', serif;">serif font</span> conveys tradition, while a bold sans-serif feels tech-forward. Use script for more <span style="font-family: 'Dancing Script', cursive;">personal</span> or <span style="font-family: 'Great Vibes', cursive;">elegant</span>.
2196
+
2197
+
Design is communication—your font choices should help users absorb your message, not fight against it.
2198
+
2199
+
---
2200
+
2201
+
### 👁️ Managing Attention with UI Design<a href="#top" class="back-to-top-link" aria-label="Back to Top">↑</a>
2202
+
2203
+
Your users don’t read—they scan. UI design is about guiding their attention where it matters most.
2204
+
2205
+
#### ✅ Hierarchy
2206
+
- Bigger and bolder elements get noticed first.
2207
+
- Use **color contrast** and **<span style="font-size: larger;">size</span>** to show what matters—like a green "Buy Now" button on a grayscale layout.
2208
+
2209
+
#### 🧱 Layout
2210
+
- Break up text blocks with images and whitespace.
2211
+
- Ideal line length: **40–60 characters** for easy reading.
2212
+
- Avoid overwhelming walls of text like those found on Wikipedia.
2213
+
2214
+
#### 📐 Alignment
2215
+
- Align elements to create structure.
2216
+
- Reduce the number of alignment points—uniformity makes your layout feel more professional.
2217
+
2218
+
#### 🌌 White Space
2219
+
- Emptiness adds elegance. High-end designs (think Apple) use white space to suggest value and clarity.
2220
+
- Don’t cram your content—let each element breathe.
2221
+
2222
+
#### 🧑🎨 Design for Your Audience
2223
+
- A kids’ website should look different from a fintech site.
2224
+
- Match color, layout, and font to your user’s expectations and desires.
2225
+
2226
+
When UI is done right, users won’t even notice it—they’ll just glide through your site happily.
2227
+
2228
+
---
2229
+
2230
+
### 💡 User Experience (UX) Design<a href="#top" class="back-to-top-link" aria-label="Back to Top">↑</a>
2231
+
2232
+
UX is about **empathy**—designing with your user’s journey in mind. Ask yourself: Can users find what they need easily? Can they interact comfortably on all devices?
2233
+
2234
+
- **Make navigation intuitive**: Use familiar patterns like top navbars or hamburger menus.
2235
+
- **Responsive design**: Your website should look great on phones, tablets, and desktops.
2236
+
- **Test early and often**: Get feedback from real users. Watch how they interact, and iterate based on their behavior—not your assumptions.
2237
+
2238
+
Think of UX as invisible scaffolding—it’s not glamorous, but it holds your entire design together
2104
2239
2105
-
- Make navigation intuitive.
2106
-
- Ensure your site is responsive (works on all devices).
2107
-
- Test with real users and iterate.
2108
2240
2109
2241
---
2110
2242
@@ -2117,5 +2249,4 @@ Today you learned:
2117
2249
- How to use Bootstrap for fast, responsive design
2118
2250
- Key web design principles for beautiful, user-friendly sites
2119
2251
2120
-
**Next Steps:** Try building a simple web page using HTML, style it with CSS, and experiment with Bootstrap components!
2121
-
2252
+
**Next Steps:** Try building a simple web page using HTML, style it with CSS, and experiment with Bootstrap components! You can speed up your design by using <a href="https://www.canva.com/" target="_blank">Canva</a> which alows you to design a website in your browser, publish it and then you can see its code.
0 commit comments