Shruti Balasa Author at 1stWebDesigner

Author: Shruti Balasa

Shruti Balasa is a full stack web developer, a mentor and a course creator. Her love for math and logic puzzles in childhood turned into a profession. She wants to make learning web design extremely simple for beginners through her course on HTML & CSS and her YouTube channel Thirus Tips & Tutorials. Shruti lives in Bangalore, India. Connect to her on Twitter @shrutibalasa

Create a Carousel using CSS Scroll Snap and JavaScript

This tutorial will help you create a responsive carousel using the CSS scroll-snap property and very little JavaScript for navigation. You can use it for products display, or as a…

How To Create a Responsive Timeline with Image Thumbnails

In this tutorial you will learn how to create a responsive timeline for a set of related events you wish to display in a chronological (or reverse chronological) sequence. This…

Learn How to Create Flip Cards using CSS

In this tutorial you will learn how to create blog post cards that flip on hover revealing the post excerpt on the back of the card. We will achieve this…

Create Simple Parallax Scrolling Effect in Hero Section using Pure CSS

In this tutorial you will learn how to create a simple pure CSS parallax scrolling effect in the hero section of your landing page. Parallax scrolling is an effect where…

How To Create a Responsive Dropdown Navigation Using Only CSS

This tutorial will guide you through creating a responsive dropdown navigation using CSS only, with the help of CSS flexbox and the “checkbox hack”. Basic knowledge of HTML and CSS…

How To Add reCAPTCHA v3 to PHP Form and Submit Using Ajax

In this tutorial, we will add Google reCAPTCHA v3 to a PHP form and submit it without leaving the page, using Ajax. If you have had a contact form or…

Pure CSS Animation of Blog Post Excerpt on Hover

In this tutorial, we’ll make this cool animation of revealing the blog post excerpt on hover using pure CSS and no JavaScript. The GIF below shows what you will be…