NUR LIYANA

Work Collection

Work Collection

Work Collection

Website using Tailwind CSS

Website using Tailwind CSS

Website using Tailwind CSS

I have taken a hands-on approach to learning web development, focusing on creating modern, responsive websites using Tailwind CSS. My journey started with self-paced tutorials on YouTube, where I explored the fundamentals of web design and Tailwind’s utility-first framework.

Overview

Overview

Overview

In this project, I code from scratch a fully responsive website to see how Tailwind CSS works. The site includes dynamic sections, scroll animations, and seamless navigation. To make it accessible to a broader audience, I deployed the website on two platforms: GitHub Pages and Netlify.

You can view the website hosted on two different servers by clicking the buttons above.

Approach

Approach

Approach

  1. Learning Phase

  • Followed a tutorials on YouTube to understand the Tailwind CSS framework, including utility classes, responsive design techniques, and component customization.

  • Experimented with modern web design trends to create visually appealing layouts.


  1. Development Phase

  • Built the project using HTML, Tailwind CSS, and JavaScript.

  • Focused on clean and modular code, ensuring the design is fully responsive across devices.

  • Added animations using libraries like ScrollReveal for enhanced interactivity.


  1. Deployment Phase

  • Deployed the website to GitHub Pages, showcasing its simplicity and integration with version control.

  • Also hosted the site on Netlify, leveraging its continuous deployment and faster global CDN.

Features

Features

Features

  • Responsive Design: Adapts seamlessly across devices.

  • Smooth Animations: Scroll-based effects enhance user engagement.

  • Fast Loading: Optimized for performance with both GitHub Pages and Netlify hosting.

© Nur Liyana Aris | 2025

Johor, Malaysia