Introduction
Placeholder is a content-based web project. It is coded in HTML5, JavaScript and CSS3. It displays an animated box-shadow content layout.
This project is about making a content placeholder. A placeholder is a representation of how the content is placed. It has an awesome loading animation. This project displays a box-shadow layout with images and contents. The html is used for placing content. CSS is used for styling the place holder and the loading animation is made using JavaScript. We are using google fonts. You need to run index.html file in the browser to run the project. See the screenshot below.
The functionality is added using CSS and JavaScript code. CSS and JS are linked to the HTML file. We are using a random user from the random user API. This place holder has an image on top and title, paragraph, username, user logo, and date.
The image is taken from the Unsplash website. This project is very useful for beginner level as well as intermediate level. Keyframes are created in CSS to give the animated look before the placeholder loads. It takes some seconds to display the content. You will see an animation before the content appears.
How to use this placeholder project?
- Download the project and extract the source code.
- Set up an editor or IDE.
- Open the project folder on the editor. (vscode, sublime)
- Launch the program in the browser. (chrome, brave)
- Use the project.
- Share
Click the button below to get the source code for this project.