How Domains Work (And What Is a Domain in the First Place?)

How Domains Work (And What Is a Domain in the First Place?)


Nowadays, having a website is not an option but a necessity. Whether you want one for your business or for your resume, a website helps you establish your authority, get hired, sell products, and so much more. But for any website to be successful, you need a domain name. However, what are domains really and how do they exactly work?
This topic is a bit complex and there are a lot of terms flying about that can be confusing. For that reason, in this guide, we’ll explain what a domain name is and how domains work in detail. By the end of the article, we want you to have a deep understanding of domains and be able to choose the best one for your website.

Slide Down Menu on Scroll

Slide Down Menu on Scroll


Ever wondered how to make a menu that appears as soon as you scrolled a bit? Today we are going to create one like that. It will slide in from the top, the moment we scroll. And hide once we scrolled back to the top.

CSS Blurry Background Image

CSS Blurry Background Image


Today we are going to look into making a background image look blurry. It is easy to achieve in CSS.
Let's get started!

CSS Offset background-position

CSS Offset background-position


Today we are going to look in the CSS background-position rule. We use the background-position to offset position a background in an element. Nowadays, we use a lot of fluid/responsive layouts, which can make this quite uneasy.

Image Lazy Loading - DEV Community

Image Lazy Loading - DEV Community


Lazy loading has been a term that was hot about 15 years ago and never stopped being in fashion. The images are mostly the heaviest part of a website and tend to slow everything down.
It was always pretty tedious to make a custom JavaScript for lazy loading, but we now have the native lazy loading API!
It can be as simple as adding `loading="lazy"' to an image element.

CSS Double Border Radius

CSS Double Border Radius


Yesterday we looked into making rounded corners on our boxes and even circles with border-radius. My good friend svondervoort replied you could use double border-radius. And he is right. I even used it in my Totoro example.
So why not dive into how you use the double border-radius syntax.

CSS Rounded Corners

CSS Rounded Corners


One awesome thing that we can do with CSS is to add rounded corners to elements. This gives it that neat box look and can even be used to create cool circles.

CSS Calc Function

CSS Calc Function


Learn how to benefit the CSS Calc Function

CSS Shorthand Properties

CSS Shorthand Properties


Today we are going to look into CSS shorthand properties. These are quick one-lines instead of writing multiple lines of CSS that do the same thing.

HTML a href Download Attribute

HTML a href Download Attribute


Did you know the a href element comes with a download attribute?
We can put this download attribute on our a href

CSS Attribute Selectors

CSS Attribute Selectors


In CSS, there are many ways to styling objects, but there are some great selectors. Let's find out if you knew about these!
Let me know in the comments how much of them you knew already.

Plain HTML Scroll to Top

Plain HTML Scroll to Top


The other day I made a post about a JavaScript Scroll to Top function, which is very cool. As mentioned, there are so many ways of doing a certain action.
On this specific post, I got a lot of comments; you can do the same in just plain HTML. This is true! And I thought it would be great to write an article about this.

CSS Only Word Rotator

CSS Only Word Rotator


You probably have seen these word rotators on people's portfolio or websites. They are cool and quirky and rotate random words about that person or business. Today we are looking into making that just with CSS!

CSS Only Loader

CSS Only Loader


Today I want to make a basic CSS Loader and show you guys and girls how easy it is to make one yourself.
We can make one with only one div and a couple of lines of CSS.
But let's also dive into making some variants.

CSS Grid-List view toggle

CSS Grid-List view toggle


Today we are doing a very cool project; we are making a list of items and add two buttons. One button for the list view and a button to switch to grid view.
This project mainly relies on CSS, but we are using JavaScript to toggle a class on the main wrapper.
We are going to use CSS Flexbox and Grid to make this work!
Let's get started!

CSS Font-display and how to use it - DEV Community

CSS Font-display and how to use it - DEV Community


Yesterday we included a custom Google Font on our website and briefly mentioned the font-display option.
Let's dive deeper into what it is and how it works.
As we saw yesterday, custom fonts tend to load slowly and block the browser from defining when your website is ready.
This, in turn, makes Google think your website is slow, and nobody wants that.
So in modern browsers, we can use the font-display function.

How to use Google Fonts - DEV Community

How to use Google Fonts - DEV Community


Google fonts are an awesome way of adding a cool font to your website, I know I'm not using them, but that is for other purposes.
I use them in client websites all the time, and they are amazing and simple to use.
Let's get started on implementing a custom font for your website.

How to use CSS Vars - DEV Community

How to use CSS Vars - DEV Community


CSS Vars are amazing, and you should leverage these where possible.
I must admit I'm only using them recently, but a tip for any developer is if you have to reuse code, it's useless. Write better classes, have it in one stop etc.
CSS Vars can be a solution here, let's look at how these work.

CSS Flip Cards - DEV Community

CSS Flip Cards - DEV Community


Ever wondered how to make a playing card, Pokemon card of CV Card flip in CSS?
Today we are going to do this together.

CSS Custom Checkbox ??? - DEV Community

CSS Custom Checkbox - DEV Community


Have you ever wondered how people get the most awesome checkboxes with custom styling?
It's one of these things that are pretty hard to wrap your head around, but every developer should know.
Let me guide you into making your custom checkboxes.

CSS only expanding slider ???? - DEV Community

CSS only expanding slider - DEV Community


Sliders are amazing, a welcome addition to every website, but sometimes can become very complicated with text flying in and images animating from all sides.
Let's say we just want a simple expandable slider, we can achieve this with just css you heard me right, CSS only!

CSS Only Accordion

CSS Only Accordion


Another great example where we can make the web lean again.
Accordions don't even need to have fancy JavaScript plugins, surely we can do it really simple in Vanilla JavaScript, but sometimes it's best to even look at other solutions.
Today we will look into doing a CSS only Accordion with the input hack.

CSS only Parallax Scrolling - DEV Community

CSS only Parallax Scrolling - DEV Community


You have probably seen the parallax effect before. You scroll and it looks like the image is sitting in one place and unaffected by the scroll. Some people take these over the top by adding multiple layers and create the most stunning effect!
For today's topic, we will look into doing the simplest setup possible, to get you included in adding this wonderful effect to your website or project.

CSS Easy Masonry Grid

CSS Easy Masonry Grid


Today we are going to look into making a straightforward CSS Masonry grid. For those who don't know what a Masonry grid is, it's a grid where items that are not equal in size match up. Back in the days, this was quite hard to achieve, and you had to use some bloated JavaScript framework to accomplish this. Nowadays, we can make it with very little use of CSS.

15+ Free SaaS Landing Page Templates - DEV Community

15+ Free SaaS Landing Page Templates - DEV Community


Saas is brief for Software as a service also called cloud-based software. It allows users to attach, use cloud-based apps over the net, and provides a whole software solution that you simply purchase on a pay-as-you-go basis from a cloud service provider. Saas entered the digital market within the early 1990s and it's now mainstream. From massive corporations to pop shops, cloud-based software is the default deployment method in 2020 for nearly every sort of business technology within the world. To provide saas apps to users they don't need to purchase, install, update, or maintain any hardware, middleware, or software.
Pay just for what you employ also saves money because the service automatically scales up and down in keeping with the extent of usage. Saas users don't have to purchase and install special software cause it offers rich apps that are quite easy to use and are custom-made for any reasonable business. Saas makes it easy to mobilize for his or her users so they'll access saas apps and data from any internet-connected device whether it is a mobile or computer or tablet. Collaborating is simpler with saas cause the information is stored within the cloud and there's no option that data is lost. Saas creates value to its users much faster and also offers companies the pliability that's needed to usher in change once they need it.

HTML Image Map

HTML Image Map


Today we are going to look at an almost rare HTML function called we use it to make a mapping selection of links for one image.
The downside to this is that there is no real feedback for a specific hover.

CSS Disco Text

CSS Disco Text


Today, something completely useless, but oh, so fun! A Disco text, mainly because I wanted to explore the hue-rotate function and really didn't have a good use case for it.

CSS Grid Introduction

CSS Grid Introduction


Today we'll be looking at a flex competitor called CSS Grid! As the name suggests, it's an awesome tool to make grids and layouts.
In general, a grid is build by having a container and some children inside it.

CSS Truncate Text With Ellipsis

CSS Truncate Text With Ellipsis


At one stage, this was hype, instead of just showing the whole text, which could be one or five lines. We ended up doing the ellipsis... for only one line.
This means it would show a text and truncate itself with the three dots.

CSS Writing Mode

CSS Writing Mode


The other day I came across the CSS writing-mode property and must admit I've never used it, so I decided to see what we can do with it.
It's an awesome property that tells us how text should flow, horizontal, or vertical.

© Copyright 2021 Igor Kapustin - All Rights Reserved