Title: My First JavaScript Project: How I Built Tic Tac Toe

In this article you will learn:
- How to select all the boxes with querySelectorAll and add click events with forEach
- How to track whose turn it is with one boolean variable
- How to store the 8 winning patterns in an array and check them in a loop
- How to detect a draw with a move counter
- How to show and hide the result message with classList

Play: https://muhammaduzairkhalid15.github.io/Tic-Tac-Toe-JavaScript-Uzi-Solutions/
Code: https://github.com/MuhammadUzairKhalid15/Tic-Tac-Toe-JavaScript-Uzi-Solutions

What was your first JavaScript project? Tell me in the comments.

In this article you will read:
- Why layouts break first, and how that teaches you the most
- Why small details (an underline, a hover effect, a slide) make a page feel finished
- Why rebuilding a real page beats watching more tutorials
- What I am doing next: uploading my JavaScript projects and revising React while building real projects

All my projects: https://github.com/MuhammadUzairKhalid15

I am still learning. What would you add to this list? Tell me in the comments.

Login forms are boring, but one small animation can make them feel polished. I built an underline that grows from the left when you focus a field.

In this article you will learn:
- How to stack a grey line and a gradient line using ::before and ::after
- How transform: scale() and transform-origin: left make the line grow
- How the sibling selector input:focus ~ .underline:after connects the input to the line
- Why I should add labels for accessibility and what I would change next

Live demo: https://muhammaduzairkhalid15.github.io/Animated-Underline-Login-Form-Uzi-Solutions/
Source code: https://github.com/MuhammadUzairKhalid15/Animated-Underline-Login-Form-Uzi-Solutions

What is your favorite tiny UI animation? Tell me in the comments.

In this article you will learn:
- How hidden radio inputs remember the selected tab
- How the ~ selector connects an input to the content that follows it
- How to slide an indicator by changing its top value with a transition
- Where the trick breaks: a fixed number of tabs and no keyboard support when inputs use display: none

Live demo: https://muhammaduzairkhalid15.github.io/CSS-Vertical-Tabs-Uzi-Solutions/
Source code: https://github.com/MuhammadUzairKhalid15/CSS-Vertical-Tabs-Uzi-Solutions

Have you used this trick before? Tell me in the comments.

A landing page does not need a framework to look professional. I built a laptop product page using only HTML and CSS and focused on small details.

In this article you will learn:
- How to make gradient text with background-clip: text
- How to animate an image into the page with a 2-step @keyframes
- How to place decorative SVG shapes behind your content
- How to stack a hero section on smaller screens with a media query
- What is still missing: a working cart and carousel

Live demo: https://muhammaduzairkhalid15.github.io/Laptop-Landing-Page-Uzi-Solutions/
Source code: https://github.com/MuhammadUzairKhalid15/Laptop-Landing-Page-Uzi-Solutions

Which detail would you add next? Tell me in the comments.

In this article you will learn:
- How to put a dark gradient over a background image so text stays readable
- How to build a header with a logo on the left and a menu on the right
- How to make two buttons with mirrored hover effects
- What I got wrong: using floats and fixed widths, which is why the page is not responsive yet

Live demo: https://muhammaduzairkhalid15.github.io/Creative-Agency-Home-Page-Uzi-Solutions/
Source code: https://github.com/MuhammadUzairKhalid15/Creative-Agency-Home-Page-Uzi-Solutions

What is the one thing you always check in a hero section? Tell me in the comments.

SUBTITLE:
Nested lists, the :hover selector and a transparent look over a photo.

INTRO:
Dropdown menus look like they need JavaScript, but CSS can do the basic version on its own. Here is how a nested list and one hover rule build a multi-level navigation menu, plus its limits and how to fix them.

OUTLINE:
1. The HTML: nesting lists inside list items
2. Hiding the sub-menu with display: none
3. Revealing it with ul li:hover ul li
4. Building the horizontal bar with floats
5. The transparent look: opacity vs rgba()
6. Limits: keyboard and touch users
7. Fixing it with :focus-within

Demo: https://muhammaduzairkhalid15.github.io/Transparent-Dropdown-Navigation-Menu-HTML-CSS-Uzi-Solutions/
Code: https://github.com/MuhammadUzairKhalid15/Transparent-Dropdown-Navigation-Menu-HTML-CSS-Uzi-Solutions

TAGS: CSS, Web Development, Frontend, HTML, Navigation

Before learning React, I wanted to prove I could build a full multi-page website with the basics. Here is how a Home, About and Services site comes together, and the CSS patterns I would reuse on any project.

(Based on Traversy Media’s Acme Web Design project, rebuilt for practice.)

OUTLINE:
1. Planning three pages with one shared design
2. The header, navigation and the .current class
3. A hero section with a dark gradient overlay
4. Float layouts: main column and sidebar
5. Reusable components: .btn1 and .dark
6. One media query to make everything responsive
7. What I would do differently with Flexbox and Grid

KEY SNIPPET (for Hashnode):
@media (max-width: 768px) {
header nav,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
width: 100%;
}
}

Demo: https://muhammaduzairkhalid15.github.io/Multi-Page-Business-Website-HTML-CSS-Uzi-Solutions/
Code: https://github.com/MuhammadUzairKhalid15/Multi-Page-Business-Website-HTML-CSS-Uzi-Solutions

TAGS: CSS, Web Development, Frontend, HTML, Beginners

A good checkout UI builds trust before a user types a single digit. Here is how I built a polished payment form UI using nothing but HTML and CSS, and the small details that make it feel professional. (It is a UI demo: it does not process payments.)

OUTLINE:
1. The layout: header, amount card, options, card form
2. The floating card with a negative margin
3. Decorative circles with ::before and ::after
4. The focus pulse animation with @keyframes
5. Hover lift effects
6. Making it responsive under 480px
7. What a real checkout needs: validation and a payment provider

KEY SNIPPET (for Hashnode):
.middle-box {
margin: -35px 30px 25px;
position: relative;
z-index: 2;
}

Demo: https://muhammaduzairkhalid15.github.io/Payment-Checkout-Form-UI-HTML-CSS-Uzi-Solutions/
Code: https://github.com/MuhammadUzairKhalid15/Payment-Checkout-Form-UI-HTML-CSS-Uzi-Solutions

TAGS: CSS, Web Development, Frontend, HTML, UI Design

You don’t need Bootstrap to build a landing page that looks real. Here are the four techniques behind mine, and the mistakes I fixed along the way.

OUTLINE:
1. The layout: navbar, hero, login card
2. A dark image overlay with gradient + url()
3. One accent color for a consistent brand
4. Floating the login card with position: absolute
5. Underline-only inputs
6. What’s missing: responsiveness (and how I’d add it)

KEY SNIPPET (for Hashnode):
.main {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(1.jpeg);
background-size: cover;
}

Demo: https://muhammaduzairkhalid15.github.io/Landing-Page-With-Login-Form-HTML-CSS-Uzi-Solutions/
Code: https://github.com/MuhammadUzairKhalid15/Landing-Page-With-Login-Form-HTML-CSS-Uzi-Solutions

TAGS: CSS, Web Development, Frontend, HTML, Web Design