What You’ll Be Creating Learning WordPress development isn’t just about learning to code PHP. You’ll also need some HTML and CSS skills if the sites, themes and/or plugins you create are going to work well. In this tutorial, I’ll show you an incredibly useful feature of WordPress that mixes PHP with some simple CSS. It’s… Continue reading Target CSS for Specific Content With WordPress Template Tags
Tag: CSS
Implement Autoplaying GIFs Without Using GIFs
The GIF format is just as popular as its ever been. It may even be more popular than ever before. People love sharing short, auto-playing clips on social media. and the GIF accidentally became the chosen format for that purpose. Unfortunately, the GIFs popularity doesn’t mean that the GIF is a good format. While functional,… Continue reading Implement Autoplaying GIFs Without Using GIFs
Keyboard Accessibility Tips Using HTML and CSS
Making your website accessible for keyboard-only users is an important part of the bigger accessibility picture. Here are some keyboard accessibility tips you can quickly implement using basic HTML and CSS. A11y From the Beginning These tips are part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and… Continue reading Keyboard Accessibility Tips Using HTML and CSS
Draw with CSS: Using CSS To Draw Elements
With clever use of CSS properties, it is in fact possible to draw very complex shapes. All the shapes below were drawn with CSS alone. It might be that CSS isn’t the best way to render shapes in the browser window, but it’s very fast and included for “free” on all modern browsers. Learn how… Continue reading Draw with CSS: Using CSS To Draw Elements
How to Quickly Build Layouts With Bootstrap 4’s Responsive Flexbox Utilities
In this tutorial I’ll show you how to quickly build layouts with Bootstraps 4’s responsive flexbox utilities. To gain a better understanding of these utilities, we’ll examine four different examples. Note: this tutorial assumes you’re familiar with Bootstrap 4 as well as flexbox. Take a look at these courses to get you going in the right… Continue reading How to Quickly Build Layouts With Bootstrap 4’s Responsive Flexbox Utilities
Keyboard Accessibility Tips Using HTML and CSS
1. Test Your Site for Keyboard Accessibility The most important goal of keyboard accessibility is to make every interactive element, such as links and form controls, available with the Tab key. This is how keyboard-only users navigate through a web page. Testing your website for keyboard accessibility is actually pretty easy: just press the Tab key… Continue reading Keyboard Accessibility Tips Using HTML and CSS
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