πŸš€ My Web Development Journey: From University Struggles to GitHub Wins

πŸ“ Introduction β€” How My Journey Began

When I first joined university, I had only heard of HTML and CSS as β€œthe basics of web development.” I didn’t realize how deep this field could go β€” from simple static pages to complex, interactive applications. At first, the tech world felt intimidating: AI was booming, full-stack frameworks were everywhere, and I was still trying to understand where to start.

I made the same mistake many beginners make β€” I relied too much on watching YouTube tutorials without building anything. I jumped from one course to another, never completing them, and months passed with little progress. That’s when I decided I needed a real change: to stop passively consuming and start actively creating.

πŸ’‘ The turning point was realizing that watching isn’t learning β€” building is learning.

So, I set a simple rule for myself: learn a concept, apply it immediately in a small project, and push it to GitHub. This not only helped me remember what I learned but also started building my public portfolio.

🏫 Project 1 β€” University Landing Page

This is a one-page HTML & CSS design for HITEC University, featuring a hero banner, about section, programs, and a footer.

University Landing Page Screenshot 1 University Landing Page Screenshot 2

πŸ“‚ View Source Code | 🌐 Live Demo

πŸ’‘ Development Process

I started with a wireframe, focusing on a clean header, hero section, and program cards...

⚠️ Challenges Faced

Balancing text readability over the hero background image and making the layout responsive...

πŸ“˜ What I Learned

  • Better CSS layout structuring
  • Importance of consistent color schemes

πŸ‘©β€πŸ’» Project 2 β€” Personal Portfolio

A personal portfolio website to showcase my projects, skills, and contact details. Includes responsive design and a clean layout.

Portfolio Screenshot 1 Portfolio Screenshot 2

πŸ“‚ View Source Code | 🌐 Live Demo

πŸ’‘ Development Process

Planned sections for About, Projects, Skills, and Contact. Used flexbox for layout and simple hover effects...

⚠️ Challenges Faced

Making sure the portfolio looked good on both mobile and desktop screens...

πŸ“˜ What I Learned

  • Media queries for responsiveness
  • Improved typography and spacing
...