DEV Community: Sabiha Samha

Building Sarsa: A Fully-Coded News & Magazine Website

Sabiha Samha — Tue, 25 Feb 2025 04:42:11 +0000

Introduction

As a front-end developer, I wanted to create a clean, modern, and responsive news/magazine website that provides a seamless reading experience. While I took design inspiration from an Envato template, every line of HTML, CSS, and JavaScript powering Sarsa was written by me. This project allowed me to refine my front-end skills, implement best practices, and explore UI/UX enhancements.

Tech Stack & Features

Sarsa is built using:

HTML5 for a structured and semantic layout.
CSS3 with Flexbox and Grid for a fully responsive design.
JavaScript to handle interactivity and dynamic elements

Core Features

Fully Responsive Design – Optimized for desktops, tablets, and mobile screens.
Dynamic Content Loading – Uses JavaScript to handle article rendering efficiently.
Modern UI/UX – Clean layout with smooth scrolling and intuitive navigation.

Development Process

I started by analyzing the UI/UX structure of various modern news websites. Using that knowledge, I:

Structured the HTML with semantic elements for better accessibility and SEO.
Designed the UI with CSS while ensuring flexibility for future customizations.
Added JavaScript functionality to improve user experience, such as interactive elements and smooth scrolling.
Tested responsiveness and performance, making adjustments for cross-browser compatibility.

Challenges & Solutions

Ensuring Smooth Performance: Optimized image handling and minimized unnecessary reflows/repaints.
Cross-Browser Compatibility: Thoroughly tested across different browsers to fix inconsistencies.
Mobile Responsiveness: Used CSS media queries and flexible layouts to ensure a seamless mobile experience.

Lessons Learned

Writing modular and reusable CSS simplifies future iterations.
JavaScript performance optimizations can greatly enhance user experience.
Planning the UI structure beforehand helps streamline the development process.

Source Code

GitHub Repository: github.com/sabiha-samha/sarsa

Hey devs! Who's ready to build an AI-powered SaaS platform with React, ShadCN, Appwrite, & Clerk?

Sabiha Samha — Tue, 25 Feb 2025 02:11:11 +0000

How to build AI-Powered SaaS Platform with React, ShadCN, Appwrite & Clerk

Sadee ・ Feb 21

#react #typescript #tailwindcss #tutorial

Hey devs! Who's ready to build an AI-powered SaaS platform with React, ShadCN, Appwrite, & Clerk?

Sabiha Samha — Tue, 25 Feb 2025 01:54:09 +0000

How to build AI-Powered SaaS Platform with React, ShadCN, Appwrite & Clerk

Sadee ・ Feb 21

#react #typescript #tailwindcss #tutorial

Mastering Full-Stack app | Spotify Clone Project with NodeJS, ExpressJS, EJS, CSS, Authentication with @codewithsadee

Sabiha Samha — Mon, 18 Dec 2023 20:45:59 +0000

Embark on an immersive journey into the world of full-stack development by building a fully functional Spotify clone from scratch. This comprehensive tutorial will equip you with the essential skills and knowledge to master both front-end and back-end technologies, empowering you to create sophisticated web applications.

Throughout this project, you'll gain hands-on experience with NodeJS, ExpressJS, EJS, CSS, and authentication mechanisms, enabling you to confidently tackle complex full-stack development challenges. We'll cover everything from setting up the development environment to implementing user authentication, and creating a dynamic and responsive user interface.

By the end of this tutorial, you'll have not only built a stunning Spotify clone but also mastered the art of full-stack development. You'll be equipped with the ability to design and develop web applications with confidence, opening doors to exciting career opportunities.

This tutorial is designed for both beginners and intermediate developers who are eager to enhance their full-stack development skills. Whether you're a novice programmer or a seasoned developer looking to expand your expertise, this comprehensive guide will provide you with the knowledge and tools you need to excel in the world of full-stack web development.

Join me on this exciting journey and master the art of full-stack development by building a remarkable Spotify clone project.

⏱️ Timestamps
0:00 - Demo
13:17 - Project initial
18:39 - Login
1:01:46 - User authentication
1:53:05 - Home
5:46:02 - Working with player
6:52:40 - Home media queries
8:04:47 - Explore
8:26:30 - Explore media queries
8:28:58 - Pagination
8:41:14 - Explore detail
8:58:02 - Album
9:08:52 - Album detail
10:04:20 - Album detail media queries
10:10:34 - Playlist
10:18:28 - Playlist detail
10:32:02 - Playlist detail media queries
10:34:26 - Profile
11:23:19 - Search
12:33:00 - Artist
13:06:09 - Track
13:52:57 - Track media queries
13:55:14 - Logout
13:58:57 - 404
14:04:55 - 404 media queries

Make Mysterious Shape from SHADOW 🤯

Sabiha Samha — Fri, 09 Dec 2022 13:48:51 +0000

In this video, I will show you how to create mysterious shapes with css box-shadow

CSS Battle 136 - https://cssbattle.dev/play/136
CSS Battle 129 - https://cssbattle.dev/play/129

How to Make Digital Agency Website Using HTML CSS JavaScript

Sabiha Samha — Tue, 13 Sep 2022 13:15:21 +0000

How to Make Digital Agency Website Using HTML CSS JavaScript

This video will show you how to make digital agency website using html css javascript

Github Repo