HTML tables are intended for displaying tabular data on a web page. They’re great for displaying information in an organized way, and can be styled with CSS to match the look and feel of our website. In this tutorial, we’ll cover the basics of creating HTML tables and adding styles to make them responsive and… Continue reading Getting Started with HTML Tables — SitePoint
Tag: CSS
How to Create Animated Snow on a Website (with CSS and JavaScript)
In this tutorial, we’re going to implement an animated snow effect on a webpage using CSS and vanilla JavaScript, just in time for the holiday season. ‘Tis the season to be jolly so let it snow, let it snow, let it snow! 1. Markup with Holiday HTML For our markup, we’ll have two primary containers:… Continue reading How to Create Animated Snow on a Website (with CSS and JavaScript)
How to Animate a “Twisting Text Effect” With CSS and JavaScript
In this tutorial, we’ll learn how to split an element’s text into separate characters, which we’ll then animate to give us a twisting effect. What We’ll be Building Without further intro, let’s check out what we’ll be building: In our case, there will be two types of animations: The first animation will happen each… Continue reading How to Animate a “Twisting Text Effect” With CSS and JavaScript
How to Implement Infinite Scrolling With JavaScript
What is Infinite Scrolling? Infinite scrolling is a feature used to dynamically load more content on a page once a user scrolls to the end of the page. The concept of infinite scrolling is used to load data from a server in a way that feels “seamless” to a user but doesn’t overload the server… Continue reading How to Implement Infinite Scrolling With JavaScript
10 Best Free Open Source JavaScript Lightbox Widgets and Plugins
Images are crucial, whether you’re running an e-commerce or portfolio website. How many sales you make or new clients you get depends a lot on the quality of the images of your products and services that you can showcase through your images. So it makes sense to highlight your images with a lightbox. Lightboxes make… Continue reading 10 Best Free Open Source JavaScript Lightbox Widgets and Plugins
How to Customize the WooCommerce Checkout Page
The checkout page is one of the most important pages on any eCommerce website. All the effort that you put into your website content, design and marketing will amount to nothing if your customers keep abandoning their carts and never complete the checkout process. Some statistics show that cart abandonment rate can vary in range… Continue reading How to Customize the WooCommerce Checkout Page
Choosing a WordPress Website Builder and Why You Should Use One
There are a lot of tools and services for creating websites today. However, none of them are as popular as WordPress. In fact, WordPress powers around 43% of all websites: that include hobby sites, official government websites, and the biggest news websites. Some examples of websites built with WordPress are The White House, Rolling Stone,… Continue reading Choosing a WordPress Website Builder and Why You Should Use One
WooCommerce Shortcodes Cheatsheet
WordPress added support for shortcodes around 15 years ago. You can use shortcodes to easily add complicated functionality to your website which otherwise would have required you to write a lot of code yourself. Basically, shortcodes are short text snippets whose behavior depends on some more complicated code written in the back end. While WordPress… Continue reading WooCommerce Shortcodes Cheatsheet
How to Customize the WooCommerce Shop Page
People who have created WordPress websites know that there are different kinds of pages that you can create in WordPress. WooCommerce follows a somewhat similar structure. There are single product pages like single post pages and then there are archive type pages to show a list of products. The WooCommerce shop page falls in the… Continue reading How to Customize the WooCommerce Shop Page
How to Customize Contact Form 7 for WordPress: Checkboxes and Radio Buttons
In the past, we’ve discussed different customizations of the WordPress Contact Form 7 (CF7) plugin. Today, we’ll learn how to build custom checkboxes and radio buttons with this plugin. Sound like a good exercise? Here are two animated images that show how these form elements will look after our custom styling: And here is a… Continue reading How to Customize Contact Form 7 for WordPress: Checkboxes and Radio Buttons
Customize a WooCommerce Product Page for Free
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Creating a fully functioning eCommerce store requires you to take care of a lot of big and small things. Any website that you create to sell products will have different types of pages to address different needs. Dedicated product pages are one such example. A product page… Continue reading Customize a WooCommerce Product Page for Free
How to Conform to WCAG (Web Content Accessibility Guidelines) in Email
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} WCAG (the Web Content Accessibility Guidelines) make the web a more accessible place for everyone. They’re written for web content, not email content, but as the two have a lot in common, conforming to WCAG lays a good foundation for applying accessibility to email. So, how do… Continue reading How to Conform to WCAG (Web Content Accessibility Guidelines) in Email
How to Build a Responsive Slider With Swiper.js
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Have you ever built an advanced slider for a project? If so, you might have taken advantage of any one of a number of JavaScript carousels. In the past, I’ve covered two of them: slick and Owl. Today, I’ll introduce another well-known one: Swiper. Ready to learn… Continue reading How to Build a Responsive Slider With Swiper.js
What is HTML Email?
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} In this quick explainer, I’ll clear up any doubts or questions you have about HTML emails, how to create them, and how to send them. What is HTML Email? Your email program or service can send and receive emails in two formats; plain text and HTML. Plain… Continue reading What is HTML Email?
A Look at Its Impact on the Web
In the web design industry, it’s rare that a tool stays relevant for a decade or more. Things tend to change so quickly that the useful life of an app or framework usually isn’t very long. However, Twitter’s Bootstrap has defied those odds. Now in existence for over 10 years, the self-described “front-end open source… Continue reading A Look at Its Impact on the Web
How To Fix Outlook Dark Mode Problems (Email Design)
Unpredictable text color changes in Outlook for Windows is one of the many mind-boggling issues you’ve no doubt encountered if you’ve ever built an HTML email for Dark Mode. Outlook brutally inverts colors in Dark Mode, in some cases even turning dark colors into white. Not only can this result in very unsightly parts of… Continue reading How To Fix Outlook Dark Mode Problems (Email Design)
What Is JavaScript?
Technology is advancing rapidly and web development is no different. New tools and services are constantly coming into existence to help you build the next big thing. It’s great to have so much innovation in web development, but it can be very intimidating for people who are just starting out in the field and have… Continue reading What Is JavaScript?
Create a Unique Scrolling Website With Locomotive Scroll & Tailwind CSS
Have you ever wanted to build a unique single-page scrolling website yet didn’t know where to start? If so, don’t worry! Today we’re going to create together such a website. To achieve this, we’ll take advantage of Locomotive Scroll, a small and easy-to-use JavaScript library for cool scrolling effects. Plus, to speed up the development… Continue reading Create a Unique Scrolling Website With Locomotive Scroll & Tailwind CSS
4 Quick Steps to Make a Website Responsive
Responsive web design as a concept has been around a long time now; in fact, it’s the de facto way of building websites nowadays. Right now people are accessing websites with mobile phones more than any other device, so it’s really important to ensure that your website is suited to small and large screens. It’s… Continue reading 4 Quick Steps to Make a Website Responsive
15 Best Web Fonts That Look Great at Small Sizes
Beautiful web fonts aren’t particularly difficult to find. A quick search will undoubtedly turn up a number of attractive typefaces that will complement your website’s look and messaging. However, many of these fonts tend to have very specific use cases. For instance, a wide font may be perfect for header text but would work poorly… Continue reading 15 Best Web Fonts That Look Great at Small Sizes
A Comprehensive Guide to Flexbox Sizing
Flexbox sizing makes it possible to create flexible layouts that fully adapt to the screen. If you set up everything correctly you won’t have to rely on media queries to support different viewports, layouts, and orientations. In this guide I’ll show you how to use the following flexbox sizing properties: flex-grow flex-shrink flex-basis flex Explainer: Flexbox… Continue reading A Comprehensive Guide to Flexbox Sizing
Is It Time to Reset HTML?
HTML is one of the foundational building blocks of the Web. But just as web design best practices and techniques change over time, so does the code we use. As HTML evolves, some of its older markup has been deprecated while other parts have been repurposed. Does that create more problems for us, though? Would… Continue reading Is It Time to Reset HTML?
A Comprehensive Guide to Flexbox Ordering & Reordering
The flexbox layout module allows us to lay out flex items in any order and direction. Flexbox ordering is, in fact, easier than ordering with floats or CSS grid, even if you might not think so at first. As flexbox is a one-dimensional layout model, as opposed to CSS grid which is two-dimensional, you only have… Continue reading A Comprehensive Guide to Flexbox Ordering & Reordering
30 HTML Best Practices for Beginners
This tutorial is specifically for those who are just diving into web development. If you have one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker! 1. Always Close Your Tags Back in the day, it wasn’t uncommon to see things like this: <li>Some text here.… Continue reading 30 HTML Best Practices for Beginners