The CSS Grid Explained in 7 Minutes (with diagrams and code)

by Janeth Kent Date: 10-01-2018 css css grig video tutorial

A quick and easy high level introduction to the main concepts of CSS Grid given by Morten Rand-Hendriksen at Wordcamp Europe 2017. 7 minutes and you'll understand what CSS Grid is and how to create a basic layout of your own. Adapted from the full CC BY licensed original at https://www.youtube.com/watch?v=txZq7...

by Janeth Kent Date: 10-01-2018 css css grig video tutorial hits : 6557

New graphic window units - CSS

''Intercop 2022' is a project announced by Google, Microsoft, Apple and the Mozzilla Foundation to make all browsers offer the same web experience. The project has 15 focus areas and one…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Why shouldn't we use black?

Nowadays it is becoming more and more common for web pages to have the option to set them in dark mode, or to base their aesthetics directly on black or…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

Nesting: future proofing CSS

Although not currently supported by browsers, there is a proposal for CSS nesting to support a feature that would provide better readability to native CSS, so in the future it…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Blog Categories

Latest news from Hi-Tech world

Google Dorks: How to find interesting data and search like hacker

Go the words Google and Hacking together? Well if you thought that we will learn how to use hack Google, you might be wrong. But we can Use Google search engine…

What is a JWT token and how does it work?

JWT tokens are a standard used to create application access tokens, enabling user authentication in web applications. Specifically, it follows the RFC 7519 standard. What is a JWT token A JWT token…

Infinite scrolling with native JavaScript using the Fetch API

I have long wanted to talk about how infinite scroll functionality can be implemented in a list of items that might be on any Web page. Infinite scroll is a technique…

PHP Recursive Backup of MySql Database

Snippet: This script can be used to make backup of your MySql database, you can use the script in conjunction with cronjobs $user = 'myuser'; $passwd = 'mypass'; $host = 'myhost'; $db = 'mydb'; //…

How to include a JavaScript file in another JavaScript file

Some time ago we wrote about how to Import one JS file into another in the plain JS, those techniques described were quite old and in the modern era javascript…

10 Best Free Ecommerce Solutions On The Market

As the digital landscape continues to evolve, ecommerce has become an essential part of businesses worldwide. Entrepreneurs, small businesses, and even established enterprises are seeking robust and costeffective solutions to…

Optimizing the Robots.txt file for Google

The Robots.txt file serves to give information to Googlebot and other robots that crawl the Internet about the pages and files that should be indexed on our website. Although it…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

How to generate an SSH key and add it to GitHub

In this short tutorial we are going to see how you can generate a new SSH key and add it to GitHub, so you can access your private repositories and…

How to securely access the Dark Web in 15 steps. Second part

Let's continue with the 2nd part of our article in which we try to give you some advice on how to safely and securely explore the dark web. Let's restart from…

How to securely access the Dark Web in 15 steps. First part

The dark web can be a pretty dangerous place if you don't take the right precautions. You can stay relatively safe with a good antivirus and a decent VPN. However,…

How the Internet has Influenced Businesses

The internet has transformed the way that people live their lives. You can access a wealth of knowledge from a device that fits in your hand. Yes, it’s used for…

How to recognise cyber-violence

Cyber-violence, i.e. the digital dimension of violence that mainly affects women and is closely linked to the violence that occurs in the 'real world', is a growing phenomenon that is…

The demise of Third-Party Cookies could decrease marketing effectiveness by up to 30%

In recent years, the digital advertising industry has been undergoing significant transformations. One of the most impactful changes is the impending demise of third-party cookies, which could potentially diminish marketing…

Transitioning from a Home Office to a Virtual Office

The traditional concept of the office has undergone a substantial transformation in recent years. With advancements in technology and changes in work culture, more professionals are embracing remote work options,…

The Best Free SSH Tabbed Terminal Clients for Windows

PuTTy is an emulator for the terminal. It allows you to log into another computer that can be on the same network or accessed via the internet. The basic program…

How to write our own Privacy Policy

In this article we will talk about Privacy Policy statements, how you can write one and implement it on your page. Why did it pop up? These days when we browse on…

Why businesses need to be familiar with APIs

APIs serve as intermediaries between software, allowing them to communicate with each other and perform various functions like data sharing or processing. APIs provide the protocols, definitions, tools, and other…

Examine the 10 key PHP functions I use frequently

PHP never ceases to surprise me with its built-in capabilities. These are a few of the functions I find most fascinating. 1. Levenshtein This function uses the Levenshtein algorithm to calculate the…

How to Write an Amazon Listing That Converts

If you are one of the 2.5 million sellers on Amazon, you’ll know that the platform has incredible potential for profits. However you’ll also know the competition is fierce and…

Donate Bitcoins

Help us survive and sustain ourselves to allow us to write interesting articles and content for free for you.

Click in the bitcoin logo or scan the code with your wallet app in your mobile phone

projects

Social

Ma-No Web Design and Development

The CSS Grid Explained in 7 Minutes (with diagrams and code)

Related Posts