DEV Community: Swapnil Meshram

📘 JavaScript for Beginners (Basics)

Swapnil Meshram — Fri, 27 Jun 2025 14:28:02 +0000

Presented by Swapnil Meshram within mentorship @devsyncin

🎓 Started learning JavaScript with the guidance of @devsyncin with focused on basics concepts such as javascript variables, loops, with simple hands-on practice.

📌 1. What is JavaScript?

JavaScript is a high-level, interpreted programming language used to create dynamic and interactive effects on websites.

🔹 Runs in the browser
🔹 Client-side scripting (can also be used on the server with Node.js)
🔹 Lightweight and versatile

📌 2. How to Add JavaScript

You can include JavaScript in three main ways:


<!-- Inline JavaScript -->

<button onclick="alert('Hello!')">Click Me</button>


<!-- Internal JavaScript -->

<script>
  alert("Hello from internal JS!");
</script>


<!-- External JavaScript -->

<script src="script.js"></script>

📌 3. Variables

Variables are containers for storing data.


var name = "John";      // old way
let age = 25;           // modern way
const country = "India"; // constant value

📌 4. Data Types

JavaScript supports different data types:


String → "Hello"

Number → 123, 3.14

Boolean → true or false

Object → { key: value }

Array → [1, 2, 3]

Null → null

Undefined → undefined

📌 5. Operators

Some basic operators:


+   // addition
-   // subtraction
*   // multiplication
/   // division
%   // modulus
==  // equal value
=== // equal value and type
!=  // not equal
>   // greater than
<   // less than

📌 6. Conditional Statements

Used to perform different actions based on conditions.


let score = 90;

if (score >= 90) {
  console.log("Excellent");
} else if (score >= 70) {
  console.log("Good");
} else {
  console.log("Try again");
}

📌 7. Loops

Loops run a block of code multiple times.


// for loop

for (let i = 0; i < 5; i++) {
  console.log(i);
}


// while loop

let i = 0;
while (i < 5) {
  console.log(i);
  i++;

✅ Summary

JavaScript allows you to:

Add interactivity (buttons, sliders)

Handle user input and events

Modify the webpage dynamically

Bootstrap

Swapnil Meshram — Sat, 14 Jun 2025 15:52:49 +0000

Presented by Swapnil Meshram within mentorship within @devsyncin

📌 Introduction

📝 Bootstrap is a powerful, open-source CSS framework developed by Twitter to create responsive, mobile-first websites quickly. When paired with HTML, it simplifies the design process by offering pre-designed components and utility classes.

📖 What is Bootstrap?

🧠 Bootstrap is a front-end framework that includes:

📦 Predefined CSS classes

🎛 Responsive grid system

🎨 UI components (buttons, cards, modals, etc.)

📲 Mobile-first design philosophy

💡 Bootstrap works best with basic knowledge of HTML and CSS.

🔸 Method 1: CDN (Recommended for Beginners)


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

🔸 Method 2: Download and Host Locally

🧰 Download Bootstrap files from:

getbootstrap

Then link them in the project directory.

🏗 Basic HTML Structure with Bootstrap


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="text-center text-primary">Welcome to Bootstrap</h1>
  </div>
</body>
</html>

📦 Bootstrap Grid System

📖 12-column grid for responsive layout

💡 Use classes like container, row, and col.

💻 Example:


<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

🧪 Try resizing the window to see the responsive behaviour.

🧩 Common Bootstrap Components

🔘 Buttons


<button class="btn btn-primary">Click Me</button>
<button class="btn btn-danger">Delete</button>

📦 Cards


<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Some text here.</p>
    <a href="#" class="btn btn-primary">Go</a>
  </div>
</div>

📑 Forms


<form>
  <input type="text" class="form-control" placeholder="Enter Name">
  <button class="btn btn-success mt-2">Submit</button>
</form>

🧰 Advanced Components

📦 Navbar


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Site</a>
</nav>

🔲 Modal


<!-- Trigger -->
<button data-bs-toggle="modal" data-bs-target="#myModal">Launch Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
      </div>
      <div class="modal-body">This is a modal!</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

🧭 Bootstrap Icons

💻 Add this in

to use icons:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">

Then use:


<i class="bi bi-house-door"></i>

🧪 Advanced Layout Techniques

🔸 Responsive Embeds


<div class="ratio ratio-16x9">
  <iframe src="..." title="YouTube video"></iframe>
</div>

🔸 Sticky Header


<nav class="navbar sticky-top navbar-light bg-light">Sticky!</nav>

⚙️ Utilities & Helper Classes

🧠 Bootstrap provides utility classes for:

✅ Spacing → m-3, p-2

✅ Colors → text-danger, bg-warning

✅ Text alignment → text-center, text-end

✅ Display → d-none, d-block

🧪 Try combining multiple classes to customise layout easily.

📢 Responsive Design with Breakpoints

🎯 Bootstrap breakpoints:


sm – small devices

md – medium devices

lg – large

xl – extra large

🔄 Bootstrap Layout Classes


container vs container-fluid

Flex layout → d-flex, justify-content-center

Grid nesting → use .row inside columns

🎨 Complete CSS : From Basics to Advanced

Swapnil Meshram — Wed, 11 Jun 2025 15:12:37 +0000

Presented by Swapnil Meshram within mentorship @devsyncin

🎓 Under the mentorship of DevSync, enhanced CSS skills through a
combination of structured learning and hands-on practice.

🧠 CSS is the language used to style an HTML document. It describes how HTML elements should be displayed.

Why Use CSS?


📱 Makes websites visually appealing

🔁 Reusable styles across multiple pages

📦 Enables responsive and adaptive designs

✨ Styling Enhancements

🎨 Adds visual design to web content

📌 CSS Syntax


selector {
  property: value;
}

Example:


h1 {
  color: green;
  font-size: 30px;
}

📌 Types of CSS

There are three main types of CSS based on how it’s applied:

Type	Description	Example
Inline CSS	Applied directly within an HTML tag	`<h1 style="color:red;">Hello</h1>`
Internal CSS	Written within `<style>` in the `<head>`	`<style> h1 { color: blue; } </style>`
External CSS	Linked using an external `.css` file	`<link rel="stylesheet" href="style.css">`

📌 Selectors in CSS

CSS selectors target HTML elements to apply styles.

Selector Type	Example	Targets
Element	`p`	All `<p>` tags
Class	`.note`	Elements with class="note"
ID	`#header`	Element with id="header"
Group	`h1, p`	All `<h1>` and `<p>`
Universal	`*`	All elements
Descendant	`div p`	`<p>` inside `<div>`

📌 Common CSS Properties

Property	Description	Example
`color`	Text color	`color: red;`
`background-color`	Background color	`background-color: yellow;`
`font-size`	Size of text	`font-size: 20px;`
`padding`	Space inside element	`padding: 10px;`
`margin`	Space outside element	`margin: 10px;`
`border`	Border styling	`border: 1px solid black;`
`width/height`	Set size	`width: 100px;`
`text-align`	Text alignment	`text-align: center;`

📌 Box Model

The box model explains how elements are structured and spaced in CSS:


[ Margin ]
  [ Border ]
    [ Padding ]
      [ Content ]

📌 Positioning in CSS

Property	Use
`static`	Default flow
`relative`	Position relative to its normal spot
`absolute`	Positioned relative to nearest ancestor
`fixed`	Fixed position on screen
`sticky`	Scrolls with page until a point

📌 Display & Visibility


display: block; – Takes full width

display: inline; – Takes only needed width

display: none; – Element disappears

visibility: hidden; – Hides element, but space remains

📌 Flexbox Basics


.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

🔹 Properties:


justify-content: horizontal alignment

align-items: vertical alignment

flex-direction: row or column

📌 Grid Layout

CSS Grid is great for 2D layouts.


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

📌 Media Queries (Responsive Design)

Media queries make sites responsive.


@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

📱 Targets devices of different screen sizes.

📌 CSS Pseudo-classes & Elements

Type	Syntax	Use
Pseudo-class	`a:hover`	Style when hovering
Pseudo-element	`p::first-line`	Style part of element

📌 Advanced CSS Concepts

Transitions


button {
  transition: background-color 0.3s ease-in-out;
}

Animations


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade {
  animation: fadeIn 1s ease;
}
Z-index – controls stacking of overlapping elements

@font-face – loads custom fonts

📌 Best Practices in CSS

✅ Use external stylesheets for cleaner HTML

✅ Organise styles with comments

📘 Complete HTML: From Basics to Advance

Swapnil Meshram — Fri, 06 Jun 2025 19:24:55 +0000

Presented by Swapnil Meshram within mentorship @devsyncin

Started learning and understanding HTML tags with hands-on practice and gaining a deeper understanding of structuring and formatting web content.

Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the markup language used to build web pages. It defines the structure and content of a webpage.

Basic HTML Structure

An HTML document consists of:


<!DOCTYPE html>         <!-- Declares HTML5 document type -->
<html>                  <!-- Root element -->
  <head>                <!-- Metadata (title, linked CSS/js) -->
    <title>My First Page</title>
  </head>
  <body>                <!-- Content visible to users -->
    <h1>Hello, World!</h1>
  </body>
</html>

HTML Elements/Tags:

🏷️ Headings


<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 1</h4>
<h5>This is a Heading 2</h5>
<h6>This is a Heading 3</h6>

📝 Paragraph


<p>This is a paragraph of text.</p>

🔤 Text Formatting Tags:


<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>

🧮 Lists:

Types of Lists:

Unordered:


<ul>
  <li>Bullet item</li>
</ul>

Ordered:


<ol>
  <li>Numbered item</li>
</ol>

📸 Images


<img src="image.jpg" alt="Description" width="200">

🔗 Links


<a href="https://example.com">Visit Example/a>

▶️ Video Embeds


<video controls width="300">
  <source src="video.mp4" type="video/mp4">
</video>

▶️ Audio Embeds


<audio controls>
  <source src="audio.mp3" type="audio/mp3">
</audio>

🧠 Iframes


<iframe src="https://example.com" width="300" height="200"></iframe>

🧩 Tables


<table border="1">
  <tr>
    <th>Name</th><th>Age</th>
  </tr>
  <tr>
    <td>Alice</td><td>25</td>
  </tr>
</table>

🧮 Forms and Input


html
Copy
Edit
<form>
  <label>Email:</label>
  <input type="email" required><br>

  <label>Password:</label>
  <input type="password" required><br>

  <input type="submit" value="Submit">
</form>

🧱 Semantic Tags


<header>Site Header</header>
<nav>Navigation Menu</nav>
<main>Main Content Area</main>
<article>Blog Article</article>
<footer>Footer Info</footer>

📘 Mastering Git & GitHub: From Basics to Pro-Level Commands

Swapnil Meshram — Thu, 05 Jun 2025 19:03:53 +0000

Presented by Swapnil Meshram within mentorship DevSync.in

🏢 Shoutout to DevSync for inspiring this beginner-friendly Git and GitHub series. Perfect for those starting out or looking to build hands-on experience with version control and collaboration. Follow DevSync for more developer-focused learning!

🧩 What are Git & GitHub?

🔹 Git

A fast, distributed version control system that helps you track changes in your source code and collaborate with others.

🔹 GitHub

A cloud-based Git repository hosting service. It enables remote collaboration, pull requests, code reviews, and issue tracking.

Here is a complete list of Git commands with syntax from basic to advanced, including setup, workflow, branching, stash, logs, remotes, recovery, and more.

🧰 1. Git Setup (Global Configuration)


git config --global user.name "Your Name"
git config --global user.email "you@example.com"
git config --global core.editor "code --wait"  # Optional: VS Code as default editor
git config --global init.defaultBranch main     # Default branch name
git config --list                               # View current config

📦 2. Repository Management


git init                                # Initialize a new Git repo
git clone <repo-url>                    # Clone an existing repo
git remote -v                           # Show remotes
git remote add origin <url>             # Add a remote origin
git remote remove origin                # Remove remote

📄 3. File Tracking


git status                              # Check repo status
git add <file>                          # Stage a file
git add .                               # Stage all changes
git add -A                              # Add all (tracked/untracked)
git reset <file>                        # Unstage a file
git reset                               # Unstage everything

💾 4. Committing


git commit -m "Commit message"          # Commit with message
git commit -a -m "Quick commit"         # Commit all tracked changes
git commit --amend                      # Edit last commit (don’t use after pushing)

🌳 5. Branching & Merging


git branch                              # List branches
git branch <branch>                     # Create new branch
git checkout <branch>                   # Switch branch
git switch <branch>                     # Modern alternative to checkout
git checkout -b <new-branch>            # Create & switch
git merge <branch>                      # Merge into current branch
git branch -d <branch>                  # Delete a local branch
git branch -D <branch>                  # Force delete

📥 6. Pull, Push, and Remotes

git pull                                # Pull and merge changes
git pull origin main                    # Pull specific branch
git push                                # Push current branch
git push origin <branch>                # Push specific branch
git push -u origin <branch>             # Set upstream branch
git fetch                               # Download changes (don’t merge)
git fetch --all                         # Fetch all remotes

🕵️ 7. Viewing History & Logs

git log                                 # View commit log
git log --oneline                       # Condensed log
git log --graph --oneline --all         # Visual graph
git show <commit>                       # Show specific commit
git diff                                # Compare working directory to index
git diff --cached                       # Compare index to last commit

🧳 8. Stashing (Save work temporarily)


git stash                               # Stash changes
git stash list                          # View stashed changes
git stash pop                           # Apply & remove latest stash
git stash apply                         # Apply latest stash (keep it)
git stash drop                          # Delete latest stash

🧼 9. Cleaning (Remove untracked)

git clean -n                            # Show what will be deleted
git clean -f                            # Delete untracked files
git clean -fd                           # Delete untracked files and dirs

♻️ 10. Resetting, Reverting, Recovering


git reset --soft HEAD~1                 # Undo commit (keep changes staged)
git reset --mixed HEAD~1                # Undo commit (unstage changes)
git reset --hard HEAD~1                 # Undo everything (destructive)

git revert <commit-id>                  # Safely undo a commit by creating a new one
git reflog                              # Show history of HEAD changes
git checkout -- <file>                  # Discard local changes to a file

🍒 11. Rebase & Cherry-pick


git rebase <branch>                     # Rebase current branch onto another
git rebase -i HEAD~3                    # Interactive rebase last 3 commits
git cherry-pick <commit-id>            # Apply specific commit to current branch

🔖 12. Tagging

git tag                                 # List tags
git tag <tagname>                       # Create lightweight tag
git tag -a <tagname> -m "msg"           # Annotated tag
git push origin <tagname>               # Push tag to remote
git tag -d <tagname>                    # Delete local tag
git push origin --delete <tagname>      # Delete remote tag

💡 13. Aliases


git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.cm 'commit -m'
git config --global alias.st status
git config --global alias.unstage 'reset HEAD --'

Then you can use


git co main
git br
git cm "Fast commit"

🧪 14. Workflow (Example)

mkdir test-repo
cd test-repo
git init
echo "Hello Git" > index.txt
git add .
git commit -m "Initial commit"
git branch dev
git checkout dev
echo "Working on dev" >> index.txt
git commit -am "Update on dev"
git checkout main
git merge dev

🧾 Summary

Command	Description
`git init`	Initializes a new Git repository in the current directory.
`git config --global user.name "Your Name"`	Sets your Git username globally.
`git config --global user.email "you@example.com"`	Sets your Git email globally.
`git status`	Shows the status of changes (tracked, untracked, staged, etc.).
`git add <file>`	Stages a specific file for commit.
`git add .`	Stages all modified and new files in the current directory.
`git commit -m "message"`	Commits staged files with a message.
`git log`	Shows the commit history.
`git clone <repo-url>`	Clones a repository from GitHub or other remote.
`git remote -v`	Shows configured remote repositories.
`git push`	Pushes commits to the remote repository.
`git pull`	Fetches and merges updates from the remote.
`git diff`	Shows the difference between working directory and last commit.