DEV Community: sagardoescoding

🧠 Git & GitHub: Version Control for Beginners

sagardoescoding — Sun, 29 Jun 2025 19:02:50 +0000

🧠 Git & GitHub: Version Control for Beginners
📅 Posted on Jun 29
✍️ By @sagardoescoding

During my internship with @devsync, one of the most powerful tools I got comfortable with was Git — and how it works with GitHub for version control and collaboration.

If you're a beginner developer, mastering Git & GitHub is an absolute must-have skill. Let’s break it down super simple.

💡 Why Git & GitHub?
✅ Track every change in your codebase
✅ Collaborate easily with teams
✅ Roll back to previous versions anytime
✅ Showcase your work to the world (hello, recruiters!)

🔧 Git vs GitHub
Git: A version control system you install on your machine. Think of it as a “time machine” for your code.

GitHub: An online platform that hosts your Git repositories, adds collaboration tools, and lets you work with others.

🛠️ Git Basics Every Dev Should Know
✅ 1. Initialize a Git Repo

git init
✅ 2. Check Repo Status

git status

✅ 3. Add Files to Stage

csharp
git add .
✅ 4. Commit Changes

sql

git commit -m "Your commit message"
✅ 5. Connect to GitHub

git remote add origin https://github.com/username/repo.git

✅ 6. Push Code

git push -u origin main
🌱 Common Git Commands
Command Purpose
git clone Copy a remote repo to your machine
git pull Fetch latest changes from remote
git log View commit history
git branch Manage branches
git merge Merge one branch into another

🔄 Example Workflow

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin https://github.com/yourusername/yourrepo.git

git push -u origin main
⚙️ Pro Tips
Use .gitignore to exclude files like node_modules, .env, etc.

Write clear commit messages:
✖️ "stuff fixed"
✅ "Fix bug in login validation logic"

🧪 Tools That Help
GitHub Desktop – GUI for Git (great for beginners)

GitLens Extension for VS Code – Superpowers for Git

GitKraken – Advanced Git UI

👋 Final Thoughts
If you're coding without Git — you're flying without a parachute.
Even solo projects benefit from version control and backups.

This is just the start of my Git journey, but it's already made my workflow smoother and more professional.

🎨 Mastering CSS Flexbox: Layouts Made Easy

sagardoescoding — Wed, 18 Jun 2025 20:19:23 +0000

🚀 Getting Started with Flexbox

During my internship with @devsync , I took a deeper dive into the layout side of CSS—and the concept that stood out the most was Flexbox.

Whether you're building a responsive website or aligning items precisely, CSS Flexbox makes layout management easier and more intuitive.

💡 Why Flexbox is a Game-Changer

📱 It’s responsive by design.

🔧 No more hacks with floats and positioning.

📦 It helps manage space within a container—even when the size of the items is unknown.

🛠️ CSS Flexbox Essentials

✅ 1. Display: Flex

.container {
  display: flex;
}

✅ 2. Flex Direction

Choose the main axis: row (default) or column.

.container {
  flex-direction: row; /* or column */
}

✅ 3. Justify Content

Aligns items horizontally (along main axis).

.container {
  justify-content: space-between; 
  /* other options: flex-start, flex-end, center, space-around, space-evenly */
}

✅ 4. Align Items

Aligns items vertically (along cross axis).

.container {
  align-items: center;
}

✅ 5. Flex Wrap

Prevent items from overflowing the container.

.container {
  flex-wrap: wrap;
}

✅ 6. Gap

Add spacing between items easily:

.container {
  gap: 20px;
}

✅ 7. Align Self (Individual Item Control)

Override alignment for one item:

.item {
  align-self: flex-end;
}

🎨 Example: Responsive Card Layout

✅ HTML

<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

✅ CSS

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: space-between;
}

.card {
  flex: 1 1 30%;
  padding: 20px;
  background: #f3f3f3;
  border-radius: 8px;
}

🧪 Bonus Tools to Visualize Flexbox

Flexbox Froggy – A fun game to learn flex properties
CSS Tricks Flexbox Guide – Bookmark-worthy!
Chrome DevTools → Layout Tab – Inspect Flexbox containers easily

👋 Final Thoughts

CSS Flexbox is one of the most important layout tools in modern frontend development. Once you master it, you'll rarely reach for floats again.

This is just the start of my CSS journey at @devsync, but mastering Flexbox has already boosted my productivity and code clarity.

🔁 Enjoyed this article?

➡️ Connect with me on LinkedIn

➡️ Follow me @sagardoescoding

💬 Drop your favorite Flexbox tricks in the comments below!

🌐 Accessibility in HTML: Best Practices

sagardoescoding — Tue, 17 Jun 2025 08:46:23 +0000

🚀 Getting Started with Accessible HTML

As part of my journey with @devsync , I’ve been diving deeper into the world of HTML—and one of the most eye-opening topics I’ve come across is accessibility.

Accessibility is not just about making things work; it’s about making the web usable for everyone, including people with disabilities.

💡 Why Accessibility Matters

🌍 Over 1 billion people live with some form of disability.
⚖️ Accessibility isn’t just ethical—it’s often required by law.
💻 It improves usability for all users, not just those with disabilities.

🛠️ Best Practices for Accessible HTML

✅ 1. Use Semantic HTML Elements

Semantic elements give meaning to content and help screen readers navigate better.

<article>
  <h1>Blog Title</h1>
  <p>Blog content here...</p>
</article>

✅ 2. Provide Text Alternatives (`alt`) for Images

Always describe images using the alt attribute so screen readers can interpret them.

<img src="" alt="Sagar smiling in front of a laptop">

✅ 3. Use Labels with Form Elements

Forms need labels to describe their input purpose clearly.

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

✅ 4. Headings Should Be Hierarchical

Organize your headings in a structured way: h1 → h2 → h3.

<h1>Main Title</h1>
<h2>Subsection</h2>
<h3>Sub-subsection</h3>

✅ 5. Ensure Keyboard Navigation

Make sure all interactive elements can be accessed via keyboard.

❌ Avoid this:

<div onclick="submitForm()">Click me</div>

✅ Do this:

<button onclick="submitForm()">Click me</button>

✅ 6. Use ARIA When Necessary

ARIA (Accessible Rich Internet Applications) attributes improve screen reader support for custom widgets—use them when semantic HTML isn’t enough.

<nav aria-label="Main navigation">
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

🎯 Bonus Accessibility Tools

Here are some tools to check your website’s accessibility:

👋 Final Thoughts

Accessibility isn't just a feature—it’s a responsibility. As developers, we have the power to create an internet that’s open and usable by all.

This is just the beginning of my learning journey with @devsync , and I already realize how small HTML changes can create a big impact.

🔁 Liked this post?

➡️ Follow me @sagardoescoding

💬 Let me know your favorite accessibility tips in the comments!

DEV Community: sagardoescoding

🧠 Git & GitHub: Version Control for Beginners

🎨 Mastering CSS Flexbox: Layouts Made Easy

💡 Why Flexbox is a Game-Changer

🛠️ CSS Flexbox Essentials

✅ 1. Display: Flex

✅ 2. Flex Direction

✅ 3. Justify Content

✅ 4. Align Items

✅ 5. Flex Wrap

✅ 6. Gap

✅ 7. Align Self (Individual Item Control)

🎨 Example: Responsive Card Layout

✅ HTML

✅ CSS

🧪 Bonus Tools to Visualize Flexbox

👋 Final Thoughts

🌐 Accessibility in HTML: Best Practices

🚀 Getting Started with Accessible HTML

💡 Why Accessibility Matters

🛠️ Best Practices for Accessible HTML

✅ 1. Use Semantic HTML Elements

✅ 2. Provide Text Alternatives (alt) for Images

✅ 3. Use Labels with Form Elements

✅ 4. Headings Should Be Hierarchical

✅ 5. Ensure Keyboard Navigation

✅ 6. Use ARIA When Necessary

🎯 Bonus Accessibility Tools

👋 Final Thoughts

✅ 2. Provide Text Alternatives (`alt`) for Images