Forem: acbacavalcanti

Markdown: My Beginner's Notes 📝✨

acbacavalcanti — Wed, 06 Nov 2024 20:57:08 +0000

I’ve been diving into tech, and since I’m new to many of the languages, I realized I needed to learn Markdown and take some notes to solidify my understanding. While it’s pretty straightforward, I wanted to make sure I grasp the basics well, as it’s something that’s essential to know. As a beginner, it might seem a bit tricky at first, but once you get the hang of it, it’s like unlocking a new level of productivity.

Let’s take a journey together as I break down the basics in a fun way! Here’s what I’ve learned so far:

What is Markdown? 🤔

Markdown is like the shortcut to formatting text on the web. It’s the secret sauce that makes your writing look neat without needing to mess around with complicated code. You don’t need to open a massive editor or figure out HTML tags. Just use simple symbols, and bam! your content is styled!

The Essentials I’ve Found:

Headings 🏷️

Markdown lets you create headings quickly with #. The more # symbols you use, the smaller your heading gets just like using <h1>, <h2>, <h3>, and so on in HTML.

# Heading 1 — Big and bold.
## Heading 2 — A little smaller.
### Heading 3 — You get the point!

Emphasis 💡

Want to make text bold or italic? Markdown has you covered!

Italic: Wrap text in single underscores or asterisks, like this: _italic_ or *italic*.
Bold: Double those symbols: __bold__ or **bold**.

Lists 🔢

Whether it’s an ordered list or an unordered one, Markdown makes it quick and easy:

Ordered list: Just number the items.
1. First item
2. Second item
3. Third item
Unordered list: Use dashes or asterisks.
- Item 1
- Item 2
- Item 3

Links 🔗

You can easily add links in Markdown, so no more manually copying and pasting URLs. Just use this simple format:

[Link text](http://yourlink.com)

Images 📸

Images are just like links, but with an exclamation mark in front:

![Alt text](imageurl.jpg)

Blockquotes 💬

Want to make a quote stand out? Just add a > before the text. It’s like giving your quote a little frame:

> “This is a powerful quote!”

Code 🖥️

If you're a coding newbie like me, you’ll love this one. To show code in a block or inline, Markdown is perfect!

Inline code: Use backticks like so: `code`
Code block: Use three backticks before and after your code.

  function example() {
      console.log('Hello, world!');
  }

Horizontal Rules ⛔

Add a little visual break between sections using three dashes, asterisks, or underscores:

---
***
___

The Secret Sauce to Organizing It All:

Markdown is amazing because it keeps things simple. It’s like shorthand that can help you focus on writing and formatting without the headaches. This beginner’s guide is just the start for me — I’m still learning, and it's been fun so far!

I’ll keep adding more to my notes as I get the hang of this, so stay tuned! And hey, if you’re learning Markdown too, feel free to share tips, correct me if I’m wrong, or ask questions. Let’s make this journey a little smoother! ✨

Markdown is basically a beginner's cheat sheet to writing cleaner, easier-to-read text for the web. It's been a blast exploring it, and I’m excited to see where it takes me. Stay tuned for more as I continue to level up my skills!

Mastering Flexbox: My Study Notes on Building Responsive Layouts

acbacavalcanti — Wed, 06 Nov 2024 06:03:15 +0000

Alright, grab a coffee (or tea, we don’t judge) and let’s dive into the world of Flexbox! If you've ever been frustrated with trying to make a webpage look good on any device — don’t worry, you're not alone. Flexbox is here to save the day, and trust me, it's not as scary as it sounds!

What on Earth is Flexbox?

Flexbox is like your personal layout assistant, magically arranging your items with ease. Learn how to set up a flex container and organize your content without breaking a sweat.

This powerful and efficient layout model in CSS lets you organize and align elements responsively and flexibly within a container. It makes aligning and distributing space between items a breeze, without the need for complex calculations or positioning tweaks. Flexbox was built to handle one-dimensional layouts (either a row or a column) in the simplest way possible.

Let’s dive into practical examples and tips on avoiding common mistakes, so your design stays smooth — like your morning coffee.

To better understand Flexbox, let’s split it into two main parts:

Properties for Flex Containers (Parent Containers):

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

First things first, we have to set 'display: flex' in the parent container. This activates Flexbox and allows all properties to be applied to the container and its items.

display:flex

flex-direction

flex-direction: 
row | row-reverse | column | column-reverse

Defines the main direction of items in the container. If you don’t specify a direction, the default will apply:

row (default): Items are organized horizontally like a row.
row-reverse: Items are organized horizontally but in reverse.
column: Items are organized vertically.
column-reverse: Items are organized vertically in reverse order. ####flex-wrap

flex-wrap
nowrap | wrap | wrap-reverse

Controls whether items should break into multiple lines/columns:

nowrap (default): Items stay on a single line/column.
wrap: Items wrap onto new lines/columns when they don’t fit.
wrap-reverse: Items wrap in reverse.

flex-flow

flex-flow

A shorthand for the flex-direction and flex-wrap properties, which together define the main and cross axes. Default: row nowrap.

justify-content

justify-content
flex-star | flex-end | space-between | space-around | space-evenly

Aligns items along the main axis (direction set by flex-direction):

flex-start: Items align at the start of the container.
flex-end: Items align at the end of the container.
center: Items align in the center.
space-between: Items are evenly spaced, with extra space between them.
space-around: Items have equal space around them.
space-evenly: Items have equal space between and around them.

align-items

align-items 
stretch | flex-start | flex-end | center | baseline

Aligns items on the cross axis (perpendicular to the main axis):

stretch (default): Items stretch to fill the container.
flex-start: Items align at the start of the cross axis.
flex-end: Items align at the end of the cross axis.
center: Items align in the center.
baseline: Items align with the baseline of their content.

align-content

align-content

Aligns rows of the container when there are multiple lines of flex items:

Similar options as align-items, but applied to multiple rows.

Also, although not exclusive to Flexbox, gap is often useful here to style Flexbox layouts:

gap: 10px 20px /*or*/
row-gap: 10px
colunm-gap: 20px

Properties that we can apply to flex items (child containers):

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

e.g., order: 2

Controls the visual order of flex items. Default for all items is 0, but you can set higher or lower numbers to change the order.

flex-grow

e.g., flex-grow: 1

Defines how much space an item should take up if there’s extra space. If all items have flex-grow: 1, they’ll share extra space equally.

flex-shrink

e.g., flex-shrink: 0

Defines how much an item should shrink when space is tight. Default is 1 (items can shrink); 0 prevents shrinking.

flex-basis

e.g., flex-basis: 200px

Sets the initial size of an item before space is distributed. It can be in pixels, percentage, or auto.

flex

flex: [flex-grow] [flex-shrink] [flex-basis];
flex: 1 1 200px;

A shorthand for setting flex-grow, flex-shrink, and flex-basis at once. For example, flex: 1 1 200px; means the item can grow and shrink with a base size of 200px.

align-self

align-self
auto | flex-start | flex-end | center | baseline | stretch

Lets individual items align differently than others (overrides align-items). By default, it uses the container’s align-items value.

This code provides a perfect starting point for exploring Flexbox properties in action and experimenting with CSS styling.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
    <div class="flex-item">Item 4</div>
    <div class="flex-i tem">Item 5</div>
    <div class="flex-item">Item 6</div>
  </div>
</body>
</html>

As we wrap up our Flexbox adventure, let's talk about a bit of CSS magic—pseudo-classes. These handy tools let you style elements based on position, state, or interactions, making your Flexbox layout more dynamic and interactive. Whether you're using :nth-child() to alternate styles, :hover to create subtle animations, or :first-child to make one item pop, pseudo-classes give you the power to add unique touches without extra HTML.

Ready to keep leveling up your skills? I sure am! Stick around, because my next post will dive even deeper into CSS techniques to bring our layouts to life. I'm also here to learn and grow, so if you have tips, feedback, or corrections, don’t hesitate to drop a comment. Let’s keep building together!