CSS Archives - Page 8 of 16

The Future of CSS

October 1, 2018 by Spyrestudios Anyone who knows a thing or two about coding is cognizant of the fact that CSS and HTML are necessary tools to shape a website according to the specifications of clients. CSS or Cascading Style Sheets is a front-end web development practice that makes use of graphical interfaces to interact… Continue reading The Future of CSS

How to Formulate an Email Design and Development Strategy

In this tutorial I’ll explain how to focus your efforts on the email clients and webmail clients being used by your target audience. Note: this tutorial is part of a whole week’s worth of email content on Tuts+ Web Design–check out the Mastering HTML Email learning guide for more! 1. Understand the Importance of a Strategy Your target… Continue reading How to Formulate an Email Design and Development Strategy

Testing Components in React Using Jest and Enzyme

This is the second part of the series on Testing Components in React. If you have prior experience with Jest, you can skip ahead and use the GitHub code as a starting point. In the previous article, we covered the basic principles and ideas behind test-driven development. We also set up the environment and the tools… Continue reading Testing Components in React Using Jest and Enzyme

Building Gutenberg Blocks with create-guten-block

Gutenberg is the new WordPress editor and everyone is talking about it. It has introduced an all-new way of writing content with WordPress. So not only the developers can benefit from its block-modeled layout but the end-users will also be able to create dynamic page layouts with it. However, building custom blocks with Gutenberg can… Continue reading Building Gutenberg Blocks with create-guten-block

What is Z-Index and How Does It Work?

June 18, 2018 by Alex Fox Elements on a web page can stack for a variety of reasons. With basic CSS positioning tools, it’s possible to stack elements on top of one other with negative margins, floats, and other tools. Even without specific position, elements stack, with div stacking on backgrounds on table cells stacking… Continue reading What is Z-Index and How Does It Work?

6 Cross-Platform Development Tools Worth Checking Out

There are many development tools out there, but getting by free and good ones is not that easy. That is why we are sharing 6 Cross-Platform Development Tools Worth Checking Out. Previously, we have already covered Four Robust Builders To Build Amazing Mobile Apps. So, without any further ado let’s take a look at these… Continue reading 6 Cross-Platform Development Tools Worth Checking Out

Four Robust Builders To Build Amazing Mobile Apps

There are many apps out there, but getting by free and good ones is not that easy. That is why we are sharing Four Robust Builders To Build Amazing Mobile Apps. So, without any further ado let’s take a look at these and feel free to share this post with others. Read each entry in… Continue reading Four Robust Builders To Build Amazing Mobile Apps

The Easiest Way To Add Input Masks To Your Forms

Input masks make it much easier for users to figure out the required format for filling out emails, phone numbers, credit cards and other data. Adding masks to your form inputs makes them so much better and its super easy to do, especially when using a JS library. In this article we’ve prepared for you… Continue reading The Easiest Way To Add Input Masks To Your Forms

WordPress Gutenberg Block API: Creating Custom Blocks

The new WordPress editor (codenamed Gutenberg) is due for release in version 5.0. Now is the perfect time to get to grips with it before it lands in WordPress core. In this series, I’m showing you how to work with the Block API and create your very own content blocks which you can use to build… Continue reading WordPress Gutenberg Block API: Creating Custom Blocks

What Are the WordPress PHP Coding Standards?

What are the WordPress PHP coding standards? In this video from my course, Learn PHP for WordPress, you’ll learn all about the coding standards and why they’re important. The WordPress PHP Coding Standards What Are the WordPress PHP Coding Standards? You can find the full WordPress PHP coding standards in the official WordPress handbook. They’re… Continue reading What Are the WordPress PHP Coding Standards?

Simple Bootstrap Powered Login and Signup Form

These days, the bulk of the traffic to websites originates from devices other than desktops. A small portion of it is from laptops but the major portion is from mobile devices of various screen sizes. Gone are the days when businesses used to create separate desktop and mobile versions. In addition to being cost inefficient,… Continue reading Simple Bootstrap Powered Login and Signup Form

Freebie: Beautiful CV Template with Bootstrap

We would like to share with you an amazing Bootstrap 4 template for a responsive CV page. It is very easy to use and implement – just copy and paste, doesn’t require any dependencies, and is completely free to use (no attribution required). The Template It is crafted with the Bootstrap 4 framework. The template… Continue reading Freebie: Beautiful CV Template with Bootstrap

Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after

April 23, 2018 by Alex Fox CSS wasn’t always as flexible as it is today. By using CSS pseudo-elements and pseudo-classes, designers can target elements based on their dynamic states or positioning in relation to other elements. Pseudo-Elements and Pseudo-Classes There are two types of pseudo selectors: pseudo-elements and pseudo-classes. Either of these pseudo selectors… Continue reading Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after

Freebie: 3 Amazing Bootstrap 4 Gallery Templates

In this article we share with you 3 amazing Bootstrap 4 image gallery templates with awesome hover effects. Just like all our freebies, these templates are completely free to use, fully responsive and very easy to integrate- just copy and paste. The Templates The templates are built with the Bootstrap 4 grid component. The HTML… Continue reading Freebie: 3 Amazing Bootstrap 4 Gallery Templates

Which WordPress Website Builder Is for You? Try the #1 WordPress Theme Builder

Posted · Category: Tools Finding just the right WordPress website builder to fit you needs can take time. First, you must determine what it is you want. Then you must take the time to research what’s available. Your research may require the skills of a Sherlock Holmes since you often need to read between the… Continue reading Which WordPress Website Builder Is for You? Try the #1 WordPress Theme Builder

Build A Pomodoro Timer ― Scotch

Last week on the code challenge #5 we looked at building a movie player using a provided API. Here is the solution to the challenge built with Vue.js. This week we’ll be building a Pomodoro timer. A Pomodoro timer is a time management tool which breaks down task completion time into intervals of about 25… Continue reading Build A Pomodoro Timer ― Scotch

Getting Started with Chrome Developer Tools: Inspect Element

Google Chrome is one of the best consumer browsers on the market, but it also contains a number of powerful developer tools. We can reveal some of these tools with Chrome’s Inspect Element (or “Inspect”) tool. This developer tool provides insight into how websites are constructed and styled, and it can help you debug your own… Continue reading Getting Started with Chrome Developer Tools: Inspect Element

Freebie: Beautiful Pricing Table with Bootstrap 4

We would like to present you a cool Bootstrap template for a responsive pricing table. It is very easy to use and implement, doesn’t require any dependencies, and is completely free to use (no attribution required). The Template It is crafted with the Bootstrap 4 framework. The template has simple, elegant and fully responsive design… Continue reading Freebie: Beautiful Pricing Table with Bootstrap 4

4 Easy Hacks To Improve Your Site’s Speed And Get Better Conversions

I have a confession to make; I’m the type of person who has no patience for a slow loading site. And apparently, I’m not the only one. Based on a research by the Aberdeen Group, a 1-second delay in a page load time can have the following negative effect: – Reduced page views by 11% –… Continue reading 4 Easy Hacks To Improve Your Site’s Speed And Get Better Conversions

Coding Buttons in CSS

March 2, 2018 by Spyrestudios Blogger CSS is the gold standard in web design, providing an organized framework for your website. It takes added skill, though, to turn a basic CSS grid into an interactive site. One of those necessary skills is adding clickable buttons within the CSS grid to enhance and simplify navigation. Once… Continue reading Coding Buttons in CSS

Build An Eye-Tracking Alien with JavaScript ― Scotch

Hi and welcome to our Code Challenge #4. This week on the challenge we shall be delving into mouse tracking with JavaScript and simple animations with CSS. The Challenge The challenge is basically to build this Alien from Mars. We were browsing CodePen and saw this awesome CSS alien built by Eduardo Sada. View the… Continue reading Build An Eye-Tracking Alien with JavaScript ― Scotch

Freebie: 2 Beautiful Checkout Forms with Bootstrap 4

In this post we would like to share with you 2 awesome shopping cart and payment form templates. Just like all our freebies, these templates are completely free to use (no attribution required), fully responsive, and super easy to implement – just copy and paste! The Templates The templates use the Bootstrap 4 framework. The… Continue reading Freebie: 2 Beautiful Checkout Forms with Bootstrap 4

CSS Lightsaber Checkbox ― Scotch

Welcome to our Code Challenge #3. Way back when about five years ago when we started Scotch.io, one of our very first articles was to create lightsabers using plain CSS. Let’s bring that back and see how we can build out the same thing in this week’s code challenge. The Challenge The challenge is to… Continue reading CSS Lightsaber Checkbox ― Scotch