Jump to Content

Andrew M McCall

Css

Vanilla Javascript Carousel Slider: A Beginner's Tutorial

Vanilla Javascript Carousel Slider: A Beginner Slider

A photo or content slider is one of the oldest, but most popular design assets one can create with javascript. Many developers will reach for popular carousel frameworks such as swiper, slick, or photoswipe. Most of the time, you don’t need so much overhead. Let’s build a slider together and see how we can build a responsive slider without using a ton of a extra javascript.

SCSS Use VS Import: How To Use @Use in SCSS

You have probably seen many times that @import is gradually being deprecated in SASS. So what is the alternative? Sass wants us to use @use which actually requires a little bit more setup but comes with the ability to namespace your sass and make it easier to maintain in larger projects.

What Is Wrong With Using @Import in SASS?

I do not feel there is any better way to put this than cite the official SASS documentation:

Hugo Website Tutorial: How To Create A Hugo Website

Hugo Website Tutorial: How To Create Your First Hugo Website

Hugo is a powerful static website generator written in the GO language. It can help you create clean, modern websites that load quickly with little overhead.

[VIDEO] Hugo Tutorials

  1. 👉 [Video] How To Install Hugo On Windows 10 With Chocolately Package Manager (Less Than 2.5 Minutes)
  2. 👉 [Video] How To Boostrap A New Hugo Theme And Display The Home Page
  3. 👉 [Video] Output Structured Data Using Hugo, YAML, and Frontmatter

What is the Hugo static site framework?

Hugo is one of my favorite website build tools. It is very fast. They advertise themselves as being “blazingly fast.” Hugo is a static website generator built with the GO language. It uses GO templating and than renders a 100% static website at build time. The reason you want this: speed. Static websites have less technology debt than other modern workflows that require a server backend to process and build pages on the fly.

CSS Grid Gallery: Easy Fluid Gallery With CSS Grid and Javascript

Learn how to create a fluid image gallery with css grid and a few lines of javascript. In the following article, we will learn how to create a grid gallery that is fluid and easy to navigate with CSS Grid and Javascript. First, we will create a container for our grid gallery. Then we will create a row of items. Finally, we need to set up a grid to contain the items in the row. We will then apply some styling for our gallery so that it looks nice on all browsers by using CSS Grid and Javascript’s responsive design techniques.

Everything You Need To Know About Parallax Scrolling & Javascript

 Everything a beginner javascript student needs to know about implementing parallax scrolling on their website. What parallax is, why use it, why not to use, and a few ways that it can be achieved.

What is parallax scrolling effects?

What is parallax scrolling? If you have only come here for a parallax definition then your journey ends here: Parallax scrolling effects is a movement, one that is created by the scrolling of one layer of an image, which creates a sense of depth and keeps the audience’s eyes glued to the screen. It can be done using CSS3 or Javascript. In this blog post, I’ll be going through a beginner Javascript tutorial on how to implement parallax scrolling.