Intermediate CSS

With input element and CSS background-image

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

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.


See how they look on both Android and iOS devices

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. getting a number instead of a date). It also gives a poor experience to users (e.g. …

How they look when embedded in an article and the pros and cons of using them (as a reader)

Photo by Kelly Sikkema on Unsplash

Writing about code oftentimes requires sharing code snippets.

While we can use the in-built formatting on Medium to format our code snippet as inline code or code blocks, there are times when we’d like to display code with whistles and bells, such as syntax highlighting and the results of running the code.

In such cases, we can make use of Medium’s embeds. There are at least 17 third-party embeds we can use on Medium.

Intermediate CSS

Learn how and when to apply box-shadow

Photo by Annie Spratt on Unsplash

In today’s article, we’ll look at:

  • how to apply box-shadow,
  • the uses of box-shadow on UI elements and
  • how to create the box-shadow effect.

Applying box-shadow property

Basic HTML

Going beyond headers and paragraphs tags

What happens if you tag your presents wrongly? 😱Photo by Cloris Ying on Unsplash

All websites include text as part of their content. HTML headers and paragraphs are the most basic structure for text content.

However, not all text is created equal. Some text is more equal than others, and we can use special HTML tags to further define text with special meaning.

In this article, we will focus on 11 HTML tags that we can add to text.

  • <em>
  • <strong>
  • <i>
  • <b>
  • <mark>
  • <q>
  • <cite>
  • <code>
  • <small>
  • <sup> and <sub>

Structuring text with the right tag

When we get a mockup web design with text content, we need to think about how to structure them in our HTML.


Basic HTML

Five pointers for those who are not sure

Photo by Samuel Chenard on Unsplash

Be it school or work, we have come to know that headings are important when structuring our content. They provide a quick way for readers to identify the main points and organise information in their minds.

On web, headings are even more important as they can also affect SEO rankings since search engines use headings to index the structure and content of webpages. Also, headings in web is more complicated as we have six different heading tags that we can use to enclose our headings, and there are varying opinions on the right way to use them.

After reading about…

Basic CSS

and create effects like raised text, floating text and pressed text

Adding 3D effect to our text on a website is easy. To make them look awesome, we need to know both the technical knowledge of how to create the effects with text-shadow and how light and shadows are cast on objects to replicate the 3D effect on text.

I’ll start with

  • introducing you to the basics of text-shadow,
  • then proceed to show you how to add multiple values to create a layering effect, and
  • finally to create raised, floating and pressed text effects.

Let’s go through the basics first.

Basic level

As the CSS property suggests, text-shadow property adds shadows to text…

Basic CSS

As plain text, buttons, text with icons and image

In the early days of web, the blue and underlined text, interspersed among the black text and images on webpages was the standard for links.

Nowadays, blue, underlined links may not fit the aesthetics of your design. We can style our underlined links with different colours, and in other ways too, such as buttons, text with icons and images.

The a element and 9 of its attributes

Photo by JJ Ying on Unsplash

HTML links are one of the easiest elements to create. While its default behaviour suffices for most use cases, there are times when we need finer control over what happens when a user clicks on a link. In such a situation, we can make use of its optional attributes.

I’ll go through the uses of a link briefly before introducing the attributes that we can use to determine what happens when a user clicks on a link as well as the information provided to the user about the target resource.

Uses of a Link

Links connect one web resource to another. We use them…


Read to write and 📝 to 📖 | Articles organised by categories on

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