DEV Community: Himanshu Bhagwat

🌈 CSS for Beginners: Style Your Web Page Like a Pro (Even If You're Not One Yet)

Himanshu Bhagwat — Sun, 15 Jun 2025 14:42:04 +0000

✨ What Is CSS? CSS stands for Cascading Style Sheets. It’s a language that tells the browser how your website should look.

HTML builds the structure of a web page (like walls in a house), and CSS adds the design (like paint, furniture, and decorations).

🎨 Why Use CSS?

Makes your website look modern and clean
Lets you control colors, fonts, spacing, layout
Helps create responsive websites that look good on all devices

🛠️ Types of CSS

There are 3 main ways to use CSS. Let's look at each one

Inline CSS – Style directly in the HTML tag

This is red text!

output:

✅ Easy for testing
❌ Not recommended for big websites — it becomes hard to manage.

Internal CSS – Write inside the HTML file Put your styles in a block inside the <head> tag.</li> </ol> <code><!DOCTYPE html> <html> <head> <style> h1 { color: blue; } p { font-size: 18px; } </style> </head> <body> <h1>Welcome!</h1> This is styled using internal CSS. </body> </html> </code> output: <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkls1ya8qpmtmi7jdvxe.png" alt="Image description"/> ✅ Great for small projects ❌ Not reusable across multiple pages 3️⃣ External CSS – The best and cleanest way. Write CSS in a separate file, then link to it from your HTML. Step 1: HTML file index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello!</h1> This is styled using external CSS. </body> </html> Step 2: CSS file style.css body { background-color: #f5f5f5; font-family: Arial, sans-serif; } h1 { color: green; text-align: center; } p { color: gray; font-size: 18px; } output: <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxjgixhisorjsxwcim4w.png" alt="Image description"/> ✅ Best for real websites ✅ Keeps styles organized and reusable 🖋️ Written by Himanshu Bhagwat 📚 Learning through @devsync

🌍 Learn HTML: Build Your First Webpage

Himanshu Bhagwat — Sat, 14 Jun 2025 07:37:10 +0000

💡 What is HTML?

It is the main language used to create websites.
HTML gives a structure to a webpage. It tells your browser:

What to show
Where to show it
How to arrange it

Everything you see on a website — text, headings, images, videos, buttons — starts with HTML.

🧱 Why is HTML Important?

Without HTML, a website would be blank.
HTML helps you build the basic layout of any webpage.

With HTML, you can:

Write headings and paragraphs
Add pictures, links, and videos
Make forms to collect information
Organize everything into sections
Create tables, lists, and more

It is like a blueprint or skeleton for your website.

🛠️ What Tools Do You Need to Write HTML?
You don't need any expensive software to start.
You only need two things:

Text Editor – to write the HTML code Examples:

Notepad (Windows)
VS Code (Visual Studio Code) – best for beginners
Sublime Text or Atom

Web Browser – to open your HTML file and see the result Examples: Google Chrome, Firefox, Microsoft Edge, Safari

✍️ How to Write HTML Code?
You can write HTML in any plain text editor.
Here’s a simple step-by-step:

Open a text editor
Type the following code:

Save the file as index.html
Double-click the file or open it in a browser
You’ll see your first webpage!

🧾 Basic Structure of an HTML Page

Tag	Use
`<!DOCTYPE html>`	Tells browser this is an HTML document
`<html>`	Wraps the whole page
`<head>`	Hidden info like title or links to CSS
`<title>`	The name shown on the browser tab
`<body>`	Main visible content of the page

🏷️ Common and Useful HTML Tags

🧠 Tips for Learning HTML Faster
✅ Practice every day
✅ Try editing real HTML pages
✅ Use free tools like:

CodePen.io
W3Schools Tryit Editor
FreeCodeCamp.org

✅ Build mini-projects like:

A recipe card
A simple to-do list
A travel journal page

🔗 What to Learn After HTML?

After HTML, you can move to:

CSS – to make it look good
JavaScript – to make it interactive
Bootstrap – to design faster using pre-made layouts

HTML is a powerful tool even though it's easy to learn.
It is the first step to becoming a web developer, web designer, or digital creator.

You don’t need to be an expert to start.
Write one line. Test it. Play with it.

✍️ Written by Himanshu Bhagwat
🎓 Learning through @devsync

🚀 A Beginner’s Friendly Guide to GitHub and How to Push Code Using VS Code

Himanshu Bhagwat — Wed, 11 Jun 2025 17:07:39 +0000

🌐 What is GitHub?

GitHub is a website where developers store their code. Imagine Google Drive, but made just for coding projects. It allows you to upload your code, save versions of it, and even work on the same code together with your teammates or friends — all online. GitHub helps keep your code safe and accessible from anywhere.

🔧 What is Git?

Git is a tool that works on your computer, and it tracks all the changes you make in your project. Think of Git like a time machine for your code — you can go back to an earlier version if something breaks, or you can check what changes were made and when. GitHub and Git work hand-in-hand. Git tracks your code locally, and GitHub is where you upload it to the internet.

🧠 Common Git Terms

Repository (Repo): A folder where your project and code live.
Commit: Saving your progress with a short message.
Push: Sending your committed code to GitHub.
Pull: Getting the latest code from GitHub to your PC.
Clone: Copying a GitHub repo to your computer.

💻 How to Push Code from VS Code to GitHub

Let’s say you made a project in VS Code and now you want to upload it to GitHub. Here’s a simple step-by-step guide:

✅ Step 1: Create a GitHub Account

Go to https://github.com

✅ Step 2: Create a Repository

Click the "+" icon on GitHub and select "New repository".

Give it a name like my-first-project.

Click "Create repository".

Keep the page open.

✅ Step 3: Open Your Project in VS Code

Launch VS Code and open your project folder.

✅ Step 4: Initialize Git in Your Project

Open the terminal (Ctrl + ~ in VS Code).

Type: git init

✅ Step 5: Link GitHub Repo

Copy your GitHub repo URL.

In terminal: git remote add origin

✅ Step 6: Add Your Files

Type: git add .

✅ Step 7: Commit the Changes

Type: git commit -m "My first commit"

✅ Step 8: Push to GitHub

Type: git branch -M main

Then: git push -u origin main

Now your project is online! 🎉

🔁 Next Time You Make Changes

Use these 3 commands to update your GitHub repo:

git add .
git commit -m "your message"
git push

💡 Final Thoughts

At first, all of this might sound like a lot. But once you try it a couple of times, it becomes easy. Git and GitHub are essential skills every developer needs. They help you save your work, work with teams, and keep your code safe. Think of GitHub as your online locker and Git as your organizer.

Thanks for reading! If this guide helped you, save it, share it with friends, and revisit whenever you forget the steps. Everyone starts somewhere — today it's your first push, tomorrow you're collaborating with coders around the world!

Learning through @devsync