My Code Journal

Page 1: Headings & Paragraphs

<h1>Main Heading</h1> <h2>Subheading</h2> <h3>Smaller Heading</h3> <p>This is a paragraph of text to show normal content.</p>

Note: Use headings to organize content hierarchy.

h1 { color: #2c3e50; font-size: 36px; font-weight: bold; } h2 { color: #34495e; font-size: 28px; } h3 { color: #7f8c8d; font-size: 22px; font-style: italic; } p { font-family: Arial, sans-serif; color: #555; line-height: 1.5; margin-top: 10px; }

Tip: Use line-height to improve paragraph readability.

Page 2: Links & Lists

<a href="https://example.com">Visit Example</a> <ul> <li>Unordered list item 1</li> <li>Unordered list item 2</li> </ul> <ol> <li>Ordered list item 1</li> <li>Ordered list item 2</li> </ol>

Note: Use lists to group related items.

a { color: #2980b9; text-decoration: none; } a:hover { text-decoration: underline; } ul { list-style-type: square; margin-left: 20px; } ol { list-style-type: decimal; margin-left: 20px; }

Tip: Styling links without underline makes cleaner design.

Page 3: Images & Image Styling

Note: Always add alt text for accessibility.

img { width: 200px; height: auto; border-radius: 8px; border: 2px solid #ccc; }

Tip: Use border-radius for rounded corners.

Page 4: Buttons Basic

<button>Click Me</button>

Note: Buttons trigger actions.

button { background-color: #e67e22; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } button:hover { background-color: #d35400; }

Tip: Add hover effect for interactivity.

Page 5: Text Alignment & Font Styles

<p class="centered">This text is centered.</p> <p class="italic">This text is italic.</p> <p class="bold">This text is bold.</p>

Note: Classes can style specific elements.

.centered { text-align: center; } .italic { font-style: italic; } .bold { font-weight: bold; }

Tip: Combine classes for multiple effects.

Page 6: Borders & Padding

<div class="box">Box with border and padding</div>

Note: Borders visually separate content.

.box { border: 3px solid #2980b9; padding: 20px; width: 200px; margin: 10px 0; }

Tip: Padding adds space inside elements.

Page 7: Background Colors & Gradients

<div class="background-box">Colorful background</div>

Note: Background colors improve readability.

.background-box { background-color: #1abc9c; color: white; padding: 15px; border-radius: 5px; } /* Gradient background */ .background-box-gradient { background: linear-gradient(45deg, #1abc9c, #16a085); color: white; padding: 15px; border-radius: 5px; }

Tip: Gradients add depth and interest.

Page 8: Margin & Display

Note: Margin creates space outside elements.

.box1 { background-color: #3498db; color: white; padding: 10px; margin: 10px; display: inline-block; width: 100px; text-align: center; } .box2 { background-color: #9b59b6; color: white; padding: 10px; margin: 10px; display: inline-block; width: 100px; text-align: center; }

Tip: inline-block lets elements sit side-by-side.

Page 9: Simple Flexbox Container

Note: Flexbox helps with layout and alignment.

.flex-container { display: flex; gap: 10px; background-color: #ecf0f1; padding: 10px; border-radius: 5px; } .flex-container > div { background-color: #2980b9; color: white; padding: 20px; flex: 1; text-align: center; border-radius: 3px; }

Tip: Use flex-grow to make items expand evenly.

Page 10: JavaScript Simple Alert (Bonus!)

<button onclick="sayHello()">Say Hello</button>

Note: JavaScript adds interactivity!

function sayHello() { alert("Hello, world!"); }

Tip: Use onclick attribute to run JS functions.