Learn how to create a responsive and accessible article details page from scratch using HTML, CSS, and Vanilla JavaScript. Ideal for beginner to intermediate level front-end developers and designers.
Table of Contents
In this guide, you'll learn how to create a visually appealing and user-friendly article details page that showcases the content of a single article on your website.
We'll start by covering the basic structure and layout of the page using HTML, and then move on to styling and enhancing the appearance of the page using CSS. Finally, we'll add some interactive functionality to the page using vanilla JavaScript, without relying on any external libraries or frameworks.
By the end of this tutorial, you'll have a solid understanding of how to build a fully functional article details page from the ground up, and you'll have the skills to customize and extend the page to suit your specific needs.
Let's start making an amazing article details page Using HTML, CSS, and JavaScript step by step.
Source Code
Step 1 (HTML Code):
To begin building our article details page, we'll start by setting up the basic structure and layout of the page using HTML.
The first step is to create the skeleton of the page, which includes the <html>, <head>, and <body> elements. Inside the <head> element, we'll include information about the page such as the title and any necessary meta tags.
Next, we'll add the main content container for our page, which will typically be an <article> element. This article will hold all of the content for our page, including the article title, author information, main content, and any additional elements such as related articles or a comment section.
Inside the main content container, we'll add the various elements that make up our article details page. This might include an <h1> element for the article title, a <p> element for the author information, and a <section> element with a class of "summary" to hold the main content of the article.
At this point, our basic HTML structure for the page should be complete. In the next step, we'll use CSS to add some styling and visual appeal to the page.
Step 2 (CSS Code):
To continue building our article details page, we'll move on to styling and enhancing the appearance of the page using CSS.
One of the first things we might want to do is add some basic styling to the page, such as setting the font family, size, and color for the various elements on the page. We can do this by defining some global styles for the page, such as setting the font-family and font-size for the body element.
Next, we can start to style the specific elements on the page. For example, we might want to give the article title a larger font size and a different color to make it stand out. We can do this by defining a class for the article title element (such as "title") and applying the desired styles to that class.
We can also use CSS to add some layout and positioning to the page. For example, we might want to center the article title and author information on the page, or float the main content to the left and the related articles to the right.
Finally, we might want to add some additional design elements to the page, such as a background color or image, borders, or box shadows.
By using CSS, we can add a lot of visual appeal and professionalism to our article details page, and make it more visually appealing to users. In the next step, we'll use vanilla JavaScript to add some interactive functionality to the page.
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
width: 100%;
height: calc(max(100vh, 400px));
padding: 100px;
color: #222;
font-family: "Poppins", sans-serif;
}
body article {
width: 100%;
max-width: 1000px;
}
body article header {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
min-height: 400px;
padding: 50px;
border-radius: 16px;
color: #fff;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body article header .upper-header {
display: flex;
justify-content: space-between;
padding-bottom: 20px;
}
body article header .upper-header .mini-title {
font-size: 1.125rem;
font-weight: bold;
letter-spacing: 0.4rem;
text-transform: uppercase;
opacity: 0.9;
}
body article header .upper-header .date-since {
display: flex;
align-items: center;
opacity: 0.5;
font-size: 0.875rem;
}
body article header .upper-header .date-since .date-value {
display: inline-block;
padding-bottom: 2px;
}
body article header .upper-header .date-since svg {
width: 20px;
margin-left: 10px;
}
body article header .lower-header {
padding-top: 50px;
}
body article header .lower-header .tags-container {
display: flex;
align-items: center;
opacity: 0.75;
margin-bottom: 12px;
}
body article header .lower-header .tags-container > span:not(:nth-child(2))::before {
content: ", ";
}
body article header .lower-header .tags-container svg {
width: 20px;
margin-right: 10px;
}
body article header .lower-header .tags-container span {
font-size: 0.875rem;
}
body article header .lower-header .title {
margin: 20px 0;
font-size: 3rem;
font-weight: bold;
opacity: 0.9;
}
body article header .lower-header .subtitle {
width: 50%;
margin-top: 10px;
opacity: 0.75;
line-height: 1.75;
}
body .summary {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 50px;
padding: 30px 50px;
border-radius: 16px;
box-shadow: 0 0 0 1px #f2f2f2;
}
body .summary .summary-item {
width: 100%;
padding-right: 20px;
}
body .summary .summary-item .item-title {
color: #999;
}
body .summary .summary-item .item-text {
margin-top: 12px;
font-size: 1.5rem;
}
body .main-article {
width: 100%;
margin-top: 50px;
padding-bottom: 50px;
line-height: 1.75;
}
body .main-article h4 {
margin-top: 60px;
margin-bottom: 20px;
font-size: 1.25em;
}
body .main-article p {
margin-bottom: 20px;
color: #777;
font-size: 1.125em;
}
body .main-article blockquote {
position: relative;
margin: 40px 0;
padding: 40px;
background-color: #f8f8f8;
border-radius: 16px;
}
body .main-article blockquote::before {
content: url("https://icons.craftwork.design/static/media/QuotesFill.f65b03951f44e212816420b00909f4df.svg");
position: absolute;
top: -10px;
left: -10px;
transform: scale(2);
opacity: 0.1;
}
body .main-article blockquote::after {
content: url("https://icons.craftwork.design/static/media/QuotesFill.f65b03951f44e212816420b00909f4df.svg");
position: absolute;
bottom: -10px;
right: -10px;
transform: scale(2) rotate(180deg);
opacity: 0.1;
}
body .main-article .gallery {
display: grid;
gap: 20px;
grid-template-areas: "img1 img1 img2 img3" "img1 img1 img4 img5";
min-height: 400px;
margin-top: 40px;
}
body .main-article .gallery .image-item {
min-height: 200px;
background-color: #eee;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
transition: 250ms;
}
body .main-article .gallery .image-item:hover {
opacity: 0.9;
cursor: pointer;
}
body .main-article .gallery .image-1 {
grid-area: img1;
}
body .main-article .gallery .image-2 {
grid-area: img2;
}
body .main-article .gallery .image-3 {
grid-area: img3;
}
body .main-article .gallery .image-4 {
grid-area: img4;
}
body .main-article .gallery .image-5 {
grid-area: img5;
}
body .main-article .gallery .gallery-mask {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100vw;
height: 100vh;
padding: 40px;
background-color: #22222288;
transition: 500ms;
}
body .main-article .gallery .gallery-mask img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
transition: 500ms;
}
body .main-article .gallery .mask-off {
visibility: hidden;
background-color: #22222200;
}
body .main-article .gallery .mask-off img {
visibility: hidden;
opacity: 0;
}
@media screen and (max-width: 1024px) {
body {
padding: 50px;
}
body article header .lower-header .subtitle {
width: 100%;
}
}
@media screen and (max-width: 768px) {
body article header .lower-header .title {
word-break: break-all;
}
body article .summary {
flex-direction: column;
}
body article .summary .summary-item:not(:last-child) {
padding-bottom: 30px;
}
body article .main-article .gallery {
grid-template-areas: "img1 img1" "img1 img1" "img2 img3" "img4 img5";
}
}
@media screen and (max-width: 425px) {
body {
padding: 25px;
}
body article header .upper-header .date-since {
display: none;
}
} Step 3 (JavaScript Code):
To finish building our article details page, we'll add some interactive functionality using vanilla JavaScript.
The below javascript code appears to be creating an image gallery with a lightbox effect, where clicking on an image in the gallery will display a larger version of the image in a overlay mask.
The code first selects the .gallery-mask element and the .mask-image element, and adds a click event listener to the .gallery-mask element that adds the mask-off class to the element when clicked. This class appears to be used to hide the overlay mask.
The code then selects all elements with the class .image-item and adds a click event listener to each one. When an image is clicked, the code gets the style attribute of the image element, extracts the URL of the image from the attribute value, and sets the src attribute of the .mask-image element to this URL. The code then removes the mask-off class from the .gallery-mask element, which will display the overlay mask with the larger version of the image.
Finally, the code selects the #dateData and #sinceData elements and sets their inner HTML to the formatted publish date and the time since the publish date, respectively, using the moment library.
And with that, our article details page is complete! I hope this tutorial has been helpful in teaching you how to build a professional article details page from scratch using HTML, CSS, and vanilla JavaScript.
// Layout will not be affected after remove below javascript code
// Handle Image Gallery
const galleryMask = document.querySelector(".gallery-mask");
const maskImage = document.querySelector(".mask-image");
const galleryImgs = document.querySelectorAll(".image-item");
galleryMask.addEventListener("click", () => {
galleryMask.classList.add("mask-off");
});
galleryImgs.forEach((item) => {
item.addEventListener("click", () => {
let styleValue = item.getAttribute("style");
maskImage.setAttribute(
"src",
styleValue.slice(styleValue.indexOf(": url(") + 7, -3)
);
galleryMask.classList.remove("mask-off");
});
});
// Handle Publish Date
const dateData = document.getElementById("dateData");
const sinceData = document.getElementById("sinceData");
let publishDate = "2022-04-26";
dateData.innerHTML = moment(publishDate).format("LL");
sinceData.innerHTML = moment(publishDate).fromNow();Final Output:
Conclusion:
In conclusion, building a professional article details page from scratch using HTML, CSS, and Vanilla JavaScript is a great project for a beginner to intermediate level front-end developers and designers. By following the steps outlined in this tutorial, you can create a responsive and accessible page that is compatible across different web browsers.
Starting with project setup, you can create the necessary files and folders to organize your code. Then, by creating the HTML structure, applying CSS styles, and adding JavaScript functionality, you can create a fully functional and visually appealing page that includes features like related articles and a scroll-to-top button.
By using semantic HTML tags and attributes, CSS selectors and properties, and JavaScript DOM manipulation, you can create a page that is both user-friendly and optimized for search engines. With the skills and knowledge gained from this tutorial, you can apply these techniques to other projects and continue to improve your front-end development skills.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
