Some of the most fun I’ve had this year is playing Wordle with my friends and family. But I’m a product designer and a programmer, so as I played, I couldn’t help but notice some strange things about how it was constructed. I was right in the middle of making my own product School Morning Routine,… Continue reading Wordle is a masterclass in product design simplicity
Tag: JavaScript
How to Create a Sticky Toolbar With CSS and a Bit of JavaScript
In this new tutorial we’ll learn how to create a sticky (or fixed) toolbar—also referred to as a vertical navigation menu—with animated tooltips that you can use on your sites for all sorts of things. For example, if you are a store owner, you can use it to include a quick links feature for promoting… Continue reading How to Create a Sticky Toolbar With CSS and a Bit of JavaScript
How Long Does it Take to Learn JavaScript
According to “The State of the Octoverse” by GitHub, the statistics show that JavaScript is the most popular language globally. It is good investment to learn JavaScript for front-end or back-end programming. How Long Will it Take? In the book Outliers by Malcolm Gladwell, there is the 10,000 hours rule. This rule states that there… Continue reading How Long Does it Take to Learn JavaScript
How to Crop or Resize an Image With JavaScript
It’s very easy to show a resized or cropped version of an image on a website using CSS. However, this doesn’t change the original image data. What if you want to create an actual cropped or resized version of an image for your visitors or clients? We’ve already published a couple of tutorials on how… Continue reading How to Crop or Resize an Image With JavaScript
10 Best Cross-Browser Testing Tools for Testing Websites in 2022
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} If you’ve recently designed or redesigned your website, you’re probably planning for a big launch. But before you launch or relaunch your website, it’s important to test your website across various browsers. Now, this may sound intimidating, given how many browsers there are on the market. The… Continue reading 10 Best Cross-Browser Testing Tools for Testing Websites in 2022
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?
How to Build a UIkit Lightbox With Dot Navigation
* { 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 worked with the UIkit front-end framework? Its current version at the time of writing is 3.9.4, and in the next few months, YOOtheme (the team behind it) plan to release v4. This isn’t the first time I’ve written about UIkit; some years ago, while still… Continue reading How to Build a UIkit Lightbox With Dot Navigation
Easy Steps to Convert Photoshop Designs Into a Website
Here’s a simple guide to solving the troublesome task of turning Photoshop designs into a website. Or, in more technical terms, convert PSD files into responsive HTML. Modern business cannot operate without the Internet today. Therefore, it is very important to have a high-quality presence in it, for example, in the form of websites that… Continue reading Easy Steps to Convert Photoshop Designs Into a Website
JavaScript map vs. forEach: When to Use Each One
In this article, we’ll discuss the map and forEach methods in JavaScript, and we’ll also go through the differences between them to understand when to use each one. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for… Continue reading JavaScript map vs. forEach: When to Use Each One
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
What is React Native?
React Native is a cross-platform mobile application development framework that Facebook created in 2015. React Natives uses JavaScript as the underlying programming language, and it aims to help developers can build native mobile apps for both Android and IOS devices with a single codebase. In this post, I’ll introduce some of the key concepts and… Continue reading What is React Native?
Practice Makes Perfect: 4 Reasons You Struggle Learning JavaScript
However much information you process when studying anything, there will be no results unless you start applying it in real life. To master a language, people usually practice writing, speaking, and listening to strengthen their knowledge after learning theory. With a programming language, it’s not quite the same. You can read the code and write… Continue reading Practice Makes Perfect: 4 Reasons You Struggle Learning JavaScript
How to Enable or Disable a Button With JavaScript: jQuery vs Vanilla
In this article, we’ll discuss how you can enable or disable a button with JavaScript. First, we’ll go through how it works in vanilla JavaScript and later on we’ll see how to do it with jQuery. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern… Continue reading How to Enable or Disable a Button With JavaScript: jQuery vs Vanilla
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
How to Change the URL in JavaScript: Redirecting
In this quick article, we’ll discuss how to change the URL in JavaScript by redirecting. We’ll go through a couple of different ways that you can use to perform JavaScript redirects. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without… Continue reading How to Change the URL in JavaScript: Redirecting
5 Web Design Tips To Improve Your SEO
Many factors affect your SEO ranking, and getting the best results from it depends on the same factors that affect your SEO. When people hear the words ‘search engine optimization’ or SEO, they automatically think about optimizing their content through keywords in order to improve their ranking on search engine results pages (SERPs). However, many… Continue reading 5 Web Design Tips To Improve Your SEO
Create Beautiful WordPress Pages with Optimized Images Using Elementor and ImageEngine
WordPress powers nearly 40% of all websites, thanks to its commitment to making publication possible for everyone, for free. Combined with premium plugins and themes, it’s possibly the ultimate tool for building attractive, unique, and feature-rich websites without any coding or design experience. However, you do pay the price for this experience, with WordPress and… Continue reading Create Beautiful WordPress Pages with Optimized Images Using Elementor and ImageEngine
How to Preserve the Menu State on Page Load (Using Local Storage)
What You’ll Be Creating In this tutorial, we’ll create a simple static site with Tailwind CSS and then learn how to preserve its menu state on page load. The first time we visit the site, the menu will be hidden. However, as soon as we open it and close the browser, we’ll use local storage… Continue reading How to Preserve the Menu State on Page Load (Using Local Storage)
Four Free Flutter Widgets You Should Know About
.png)
Flutter development has experienced unprecedented growth in the last year. Not only has it expanded as a channel for developers to expand their skillset in Dart, but it has also allowed them to enjoy the perks of a single codebase. Whether you are making a widget on Flutter or looking for a Flutter widget that could make a… Continue reading Four Free Flutter Widgets You Should Know About
3 Effective Ways To Improve Your Site’s Carbon Footprint
At the dawn of the web-era, there was much focus on how environmentally friendly websites were: we’d chop down fewer trees, ship fewer products, and travel less for business. And because the web was small, any negative impact it had was relatively small. But the Internet’s no longer small, and neither is the impact it… Continue reading 3 Effective Ways To Improve Your Site’s Carbon Footprint
HTML5 Form Validation With the “pattern” Attribute
In this tutorial we’ll explore HTML’s pattern attribute, using it to help us customize the way we validate our forms. Form Validation Video Check out the video tutorial below, subscribe to Tuts+ on Youtube, or read on to learn more about HTML form validation and the pattern attribute! HTML5 Form Validation Form validation is of… Continue reading HTML5 Form Validation With the “pattern” Attribute
7 Skills You Need To Thrive As A Web Designer In 2021
Web design is an ever-evolving field. Those of us that have been in the industry a long time (i.e., six months plus) have seen the launch of more products, the establishment of more ideas, and the promise of more growth than most industries see over a whole career. While the tools we use, the terminology… Continue reading 7 Skills You Need To Thrive As A Web Designer In 2021
8 Best Free Live Chat PHP Scripts
Are you thinking of adding a free live chat feature to your website? Do you want to give personalized live chat support that will improve your visitors’ website experience? Do you want your forum members to chat with each other in real time? Fortunately, there are free PHP scripts available to help. Free PHP live… Continue reading 8 Best Free Live Chat PHP Scripts