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
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. …
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:
To add a bit of a challenge, I’ll populate the image gallery with random images from a public API.
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. …
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.
In today’s article, we’ll look at:
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.
When we get a mockup web design with text content, we need to think about how to structure them in our HTML.
While it is easy to keep to the use of heading tags for headers,
<p> for paragraphs and some sprinkling of
<span> so as to style parts of the text with CSS, we can convey more meaningful information about the content to browsers, search engines, and screen readers as well as people like your fellow developers and readers who rely on screen readers with the use of semantic tags. …
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 the various opinions, and barely escaping from a sea of confusion, I’ve summarised what I learnt into five pointers that can be used as a guide on using heading tags. If they are useful to you, feel free to use them. …
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
Let’s go through the basics first.
As the CSS property suggests,
text-shadow property adds shadows to text. …
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.
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.
Links connect one web resource to another. We use them to connect one website to another and navigate from one section to another on the same website. We also use links to trigger a new email draft on a user’s email client, a phone call, and file downloads. …