In this article I’m going to show you how you can achieve that look with just CSS.
We need bricks to build the wall. Since hardcoding 30 divs isn’t necessarily the most exciting thing to do, we’re just going to use a for loop. Don’t worry though, the styling itself will be done purely with CSS. Let’s use the lorem picsum API to get some nice images from Unsplash as backgrounds for the divs.
ES6 introduced a brand new way of handling asynchronous actions and making network requests. Previously we would need to set up all the boilerplate required for XHR to make an API call, now we can simply do
fetch(url). Awesome, right?
fetch is an asynchronous function. What this function returns is a
Promise object. This kind of object has three possible states: pending, fullfilled and rejected. It always starts off as pending and then it either resolves or rejects. Once a promise resolves it runs the
then method. This method takes a callback function as an argument and passes the resolved…
Whenever you submit a url from your web browser’s address bar, you make an HTTP request to a server. What you receive from that request is an HTML document, the website that you requested. HTTP is the protocol that allows us to do that.
In HTML, we can link to other documents using the
a element. After clicking a link like that we get redirected to another page, specified in the
href attribute. The problem is, the entire page needs to reload. What if we don’t want our users to stare at a white screen? Maybe we need to retrieve…
This is great because it’s easy to read and reason about.
The problem occurs when one line of code takes more time. We can simulate a situation like that using
alert freezes the browser and 2 won’t log to the console before we close the modal.
What if we have a time consuming operation but we don’t want…
Front-end web developer, passionate about creating.