369 Followers
·
Follow

Intermediate CSS

With input element and CSS background-image

Image for post
Image for post
Created using illustrations from freepik

It is rather confusing to term a toggle button as a button when it isn’t one. In HTML, a toggle button is an input element, specifically of checkbox type.

In this article, I’ll show how to create a simple toggle button and then jazz it up using background images and transitions.

At the end of this article, you’ll know how to style a simple toggle button into a beautiful scenic one that you can proudly add to your webpage or web app. …


A practical example to understand Flexbox

Image for post
Image for post

If you are a front-end developer, you should have a good knowledge of how to apply CSS Grid and Flexbox. While it’s not difficult to pick these skills up, it can be easy to forget them after some time without practice.

In this article, let’s practise using CSS Grid and Flexbox together to avoid getting rusty. I’ll show how to plan and code an image gallery using:

  • CSS Grid for the page layout
  • Flexbox to align the images

To add a bit of a challenge, I’ll populate the image gallery with random images from a public API.

Image for post
Image for post
A mockup of what we’ll create in this article

Let’s go through the planning. …


HTML

See how they look on both Android and iOS devices

Image for post
Image for post
Photo by Arnel Hasanovic on Unsplash

The value we give to the type attribute in input element provides information about the type of expected input. It sets the data type of the element and determines the control type, including the type of virtual keyboard that gets triggered, for a user to input data.

While we can use text type for all input elements in our form, this is not an acceptable practice as we lose control over the type of data we collect (e.g. …

About

aliceyt

Read to write and 📝 to 📖 | Articles organised by categories on https://github.com/tiffam/medium_articles

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store