DEV Community: Rohan Harne

How I Built a Netflix Clone with HTML, CSS, and JavaScript: My Learning Journey with DevSync

Rohan Harne — Tue, 24 Jun 2025 04:12:52 +0000

As a beginner in web development, I recently completed my first Netflix clone using HTML, CSS, and JavaScript, thanks to DevSync's incredible learning resources. This project helped me understand responsive design, dynamic content loading, and interactive UI components. Here’s how I did it—and what I learned along the way!

Why a Netflix Clone?

I chose to build a Netflix-style streaming platform as my first project because:
1)It covers key frontend concepts (layouts, styling, interactivity).
2)It uses modern CSS techniques (Flexbox, positioning, transitions).
3)I learned how to dynamically render content from JavaScript.
4)The sleek UI taught me about aesthetics and user experience.

Project Structure

2} HTML (Structure)
The HTML file acts as the skeleton:

1)Header: Navigation bar with Netflix logo and profile icon
2)Hero Section: Large banner with a "Get Started" button
3)Movie Rows: Three categories (Popular, Trending, My List)

2} CSS (Styling)
The CSS file ensures the site looks polished.

Key Takeaways from CSS:

1)Flexbox for responsive layouts
2)Positioning (sticky header, absolute hero overlay)
3)Transitions (smooth hover effects)
4)Responsive design

3}JavaScript (Interactivity)
The JavaScript file handles:
1) Populating movie data dynamically
2) Scrolling effect for the header
3) Rendering movie cards

What I Learned from DevSync: Complete Git & GitHub for Beginners?

Rohan Harne — Mon, 23 Jun 2025 18:07:18 +0000

Learning Git and GitHub is a game-changer for any developer. After following the "Complete Git and GitHub Tutorial for Beginners" by Apna College, I finally feel confident about using these tools in my projects and collaborating with others. Here’s a summary of what I learned, structured for anyone starting their journey with version control.

What is Git?
1)Git is a version control system (VCS) that tracks changes in your codebase, just like a bank statement tracks your transactions.

2)It helps you record every addition, deletion, or modification in your project, making it easy to revert to previous states if needed.

3)Git is free, open-source, fast, and scalable—used by companies and solo developers alike.

Why Use Git?
1)Track History: Easily see what changed, when, and by whom. This is essential for both solo and team projects.

2)Collaboration: Multiple developers can work on the same project without overwriting each other’s work. Git manages merges and conflicts, ensuring everyone’s contributions are accounted for.

What is GitHub?
1)GitHub is a website where you can host and manage your Git repositories online.

2)It acts like a developer’s portfolio—upload your projects, share code, and showcase your work to recruiters or collaborators.

3)You can also explore other people’s projects, contribute to open-source, and even fork repositories to experiment on your own.

Getting Started with GitHub
1)Create an Account: Sign up using your email (preferably a personal one for long-term access).

Set Up Your Profile: This becomes your public developer identity—add a profile picture, bio, and links to your best repositories.

Create a Repository: Think of this as a folder for your project. You can create it directly on GitHub and then connect it to your local machine using Git.

Key Git Concepts and Commands

1)Repository (Repo): The project folder tracked by Git.

2)Commit: A snapshot of your project at a specific point in time.

3)Branch: A parallel version of your project to work on new features without affecting the main code.

4)Merge: Combine changes from different branches.

5)Push/Pull: Upload your changes to GitHub (push) or download updates from GitHub (pull).

Some basic commands:

git init # Initialize a new Git repo
git add . # Stage all changes
git commit -m "Message" # Commit changes with a message
git branch # List branches
git checkout -b new-feature # Create and switch to a new branch
git merge branch-name # Merge a branch into the current one
git push # Upload changes to GitHub
git pull # Download changes from GitHub

Why Every Developer Should Learn Git & GitHub?

1)Essential for modern development workflows.

2)Makes collaboration seamless and organized.

3)Helps you build a strong portfolio for internships and jobs by showcasing real code and contributions.

🎉 Creating a Birthday Wisher with HTML & CSS — Make Someone's Day Special!

Rohan Harne — Sat, 21 Jun 2025 16:34:35 +0000

🌟 Introduction
Ever thought of wishing someone Happy Birthday in a creative and unforgettable way? How about sending them a customized web page with their name, a photo, and a heartfelt message — all built by you?

In this blog, I’ll walk you through building a simple yet elegant Birthday Wisher website using HTML, CSS, and JavaScript, with multiple pages, image upload, and direct shareable link support. A perfect mini-project to showcase your frontend skills and make someone feel special!

📁 Project Structure
bash
Copy
Edit
birthday-wisher/
├── index.html # Home Page
├── upload.html # Upload birthday image
├── wish.html # Personalized birthday wish
├── style.css # Shared styles
├── assets/ # Images & uploaded files
└── README.md # Project info
🔧 Features at a Glance
✅ Multi-page website
✅ Image upload & preview
✅ Birthday message display
✅ Direct sharable link (yourname.github.io/birthday-wisher/wish.html)
✅ Fully responsive & colorful interface

💻 Key HTML Pages
🏠 index.html – Home Page
html
Copy
Edit

🎉 Make Someone's Day Special!

Celebrate birthdays with personalized wishes and joyful memories.

📤 upload.html – Upload Image Page
html
Copy
Edit

function previewImage(e) {
const preview = document.getElementById('preview');
preview.src = URL.createObjectURL(e.target.files[0]);
preview.style.display = 'block';
}

💌 wish.html – Birthday Message Page
html
Copy
Edit

🎂 Happy Birthday, [Name]!

Wishing you love, laughter, and happiness on your special day!

🎨 Styling with style.css

css
Copy
Edit
body {
background-color: #fff0f5;
font-family: 'Segoe UI', sans-serif;
text-align: center;
}
nav {
background-color: #ff69b4;
padding: 15px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}
.hero {
padding: 50px;
background: linear-gradient(#ffe4e1, #fff0f5);
}
🔗 Making the Link Shareable
Once you host it on GitHub Pages, you can share your wish.html page as a unique link like:

arduino
Copy
Edit
https://yourusername.github.io/birthday-wisher/wish.html
That link is clickable, no login required, and works on any device.

💡 Unique & Commonly Used Code Snippets
📸 JavaScript Image Preview
js
Copy
Edit
function previewImage(event) {
const output = document.getElementById('preview');
output.src = URL.createObjectURL(event.target.files[0]);
output.style.display = 'block';
}
🔗 Navbar Code (Used on all pages)
html
Copy
Edit

Home
Upload
Wish

💬 Final Thoughts
This simple yet meaningful project brings together HTML, CSS, and JavaScript to create a gift that’s digital, personalized, and shareable. It’s perfect for beginners, portfolio builders, or just spreading smiles!

"Code a wish. Share a smile. Celebrate life — the dev way!" 🥳

GitHub Repository: github.com/rohanharne45/birthday-wisher

rohanharne45.github.io/birthday-wisher