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.

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.

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

KEY SNIPPET (for Hashnode): ul li ul li { display: none; }

ul li:hover ul li { display: block; }

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

In this article you will learn:

• How to build a multi-part navbar with flexbox

• Why a transparent border on hover avoids layout shift

• How flex-wrap and space-evenly make a clean card grid

• How to structure a multi-column footer

• What I would fix next: making the layout responsive

Live demo: https://muhammaduzairkhalid15.github.io/Amazon-Homepage-Clone-HTML-CSS-Uzi-Solutions/ Source code: https://github.com/MuhammadUzairKhalid15/Amazon-Homepage-Clone-HTML-CSS-Uzi-Solutions

Learning project, not affiliated with Amazon. Which website would you rebuild to practice? Tell me in the comments.

In this article you will learn:

• How to give every element its own number with a CSS variable (--i)

• How to place 15 dots around a circle with rotate and translateY

• How to stagger the animation with animation-delay and calc()

• How @keyframes fades each dot in sequence

Live demo: https://muhammaduzairkhalid15.github.io/Dots-Loading-Animation-CSS-Uzi-Solutions/ Source code: https://github.com/MuhammadUzairKhalid15/Dots-Loading-Animation-CSS-Uzi-Solutions

What is the smallest CSS trick that taught you the most? I would love to read your answers.

The login form is the first UI most developers build, and most look the same. Here are the four small CSS details that lift mine from basic to polished.

OUTLINE:

1. The starting point: plain HTML form

2. Icons inside inputs (position: absolute + padding-left)

3. The focus state: border-color + inset box-shadow

4. Transitions that feel smooth

5. Framing the card with a header band

6. What this form does NOT do (no backend) and what to add next

KEY SNIPPET (for Hashnode): form .row input:focus { border-color: #16a085; box-shadow: inset 0px 0px 2px 2px rgba(26, 188, 156, 0.25); }

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

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

INTRO: In this post, I walk through building a responsive profile card: how flexbox centers the card, how a ::before pseudo-element creates the colored header behind the avatar, and how border-radius with object-fit keeps the image perfectly round.

CODE SNIPPET: .profile-card::before { content: ""; background-color: #4070f4; height: 36%; width: 100%; position: absolute; top: 0; left: 0; border-radius: 24px 24px 0 0; }

Demo: https://muhammaduzairkhalid15.github.io/Responsive-Profile-Card-Uzi-Solutions/ Repo: https://github.com/MuhammadUzairKhalid15/Responsive-Profile-Card-Uzi-Solutions

TAGS: css, html, webdev, frontend, beginners

INTRO: Sometimes the best JavaScript is no JavaScript. In this post, I walk through building a glass-style slide-out sidebar using only HTML and CSS: how the checkbox hack works, how sibling selectors (~) control other elements, and how position: fixed with left transitions creates the slide-in effect.

CODE SNIPPET: #check:checked ~ .sidebar-menu { left: 0; }

Demo: https://muhammaduzairkhalid15.github.io/Pure-CSS-Sidebar-Menu-Uzi-Solutions/ Repo: https://github.com/MuhammadUzairKhalid15/Pure-CSS-Sidebar-Menu-Uzi-Solutions

TAGS: css, html, webdev, frontend, beginners

In this article I cover:

• Creating a fixed navbar with position: fixed and z-index

• Layering a dark overlay on a background image with a pseudo-element

• Centering content absolutely using transform: translate(-50%, -50%)

• Styling button hover transitions

Live demo: https://hero-landing-uzi-solutions.netlify.app/ Source code: https://github.com/MuhammadUzairKhalid15/Hero-Landing-Page-Uzi-Solutions

Feedback and suggestions are very welcome!

In this article I cover:

• Using perspective and transform-style: preserve-3d on the parent

• Hiding the reverse side with backface-visibility: hidden

• Rotating the back face 180deg so it lines up correctly

• Adding a glassmorphism look with backdrop-filter: blur()

Live demo: https://flip-card-ui-uzi.netlify.app/ Source code: https://github.com/MuhammadUzairKhalid15/Flipping-Card-Ui-Uzi-Solutions

Feedback and suggestions are very welcome!

In this article I cover:

• Using a background image with background-size: cover for card texture

• Structuring the header (logo + chip) and footer (number, name, date) with flexbox

• Typography choices for a clean, card-like hierarchy

• Adding a soft box-shadow for a raised, physical feel

Live demo: https://master-card-ui-uzi-solutions.netlify.app/ Source code: https://github.com/MuhammadUzairKhalid15/Credit-Card-Ui-Uzi-Solutions

Feedback and suggestions are very welcome!

In this article I cover:

• Using checkbox + label tricks for toggle state

• Pseudo-element positioning for the YES/NO knob

• Cubic-bezier easing for a bouncy feel

• A 3D flip effect using perspective and rotateY

Live demo: https://toggle-uzi-solutions.netlify.app/ Source code: https://github.com/MuhammadUzairKhalid15/Toggle-Buttons-Uzi-Solutions

Feedback and suggestions are very welcome!

In this article I cover:

• How background-attachment: fixed creates the parallax illusion

• Structuring alternating light/dark sections for visual rhythm

• Making the effect work smoothly across screen sizes

• Limitations of CSS-only parallax vs JS-based solutions

Live demo: https://parallax-scroll-hc-uzi-solutions.netlify.app/ Source code: https://github.com/MuhammadUzairKhalid15/Parallax-Scrolling-Website-HTML-CSS-Uzi-Solutions

Feedback and suggestions are very welcome!

In this article, I'll cover:

• How I structured the form using CSS Grid for responsiveness

• Styling decisions for a clean, professional look

• Handling different input types (text, select, textarea, file upload, date)

• Accessibility considerations for form labels

Live demo: https://job-application-uzi-solutions.netlify.app/ Source code: https://github.com/MuhammadUzairKhalid15/Job-Application-Website-by-Uzi-Solutions

Feedback and suggestions are very welcome!

In this post I'll cover:

• The layout and structure decisions I made

• Styling challenges I ran into (and how I solved them)

• How I deployed it using GitHub and Netlify

🔗 Live demo: https://aqkhan-tribute.netlify.app/ 💻 Source code: https://github.com/MuhammadUzairKhalid15/Tribute-Website-for-Dr.-Abdul-Qadeer/

#webdev #beginners #html #css