How to make a News Website with HTML, CSS, and JavaScript Integrated with NewsAPI
In today’s digital age, staying updated with the latest news is easier than ever, thanks to the power of the internet. But have you ever wondered how websites dynamically fetch and display news articles from various sources? In this article, we’ll delve into the intricacies of building a dynamic news website, using HTML, CSS, and JavaScript and employing the NewsAPI for fetching real-time news data.
Setting Up the HTML Structure:
Let’s start by examining the HTML structure, the backbone of our news website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Espere.in | News</title>
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.2.0/mdb.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
data-mdb-collapse-init
class="navbar-toggler"
type="button"
data-mdb-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<!-- Collapsible wrapper -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Navbar brand -->
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<img
src="https://espere.in/static/images/newlogo.png"
height="40"
alt="MDB Logo"
loading="lazy"
/>
</a>
<!-- Left links -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="test.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link category-link" href="#" data-category="business">Business</a>
</li>
<li class="nav-item">
<a class="nav-link category-link" href="#" data-category="technology">Technology</a>
</li>
<li class="nav-item">
<a class="nav-link category-link" href="#" data-category="sports">Sports</a>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
<!-- Right elements -->
<div class="d-flex align-items-center">
<form action="#">
<div class="input-group">
<input id="navbar-form" type="search" class="input form-control" aria-label="Search" placeholder="Search News">
<div class="input-group-append">
<button type="submit" aria-label="Search" class="search_btn input-group-text border-0" id="search-addon">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
</div>
<!-- Right elements -->
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<div class="container">
<div class="gallery display_images row row-cols-1 row-cols-md-3 g-4 mb-4">
</div>
<button class="showmore"></button>
</div>
<script src="script.js"></script>
<!-- MDB -->
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.2.0/mdb.min.js"
></script>
</body>
</html>In this, we have used Bootstrap’s CDN and we have created a navbar in which we have added some categories, you can add them as per your requirement. We’ve successfully incorporated our CSS and JavaScript files into the project, each playing a vital role in enhancing the website’s aesthetics and functionality, as briefly outlined below.
- Navbar: The navigation bar provides links for easy navigation to different sections of the website.
- Container: This div element acts as a placeholder where news articles will be dynamically displayed.
- CSS: Link tag include for loading CSS in our project /
- JavaScript: Script tags include JavaScript code for fetching and displaying news articles.
- External Libraries: External resources such as CSS frameworks (MDB) and Font Awesome icons are linked for styling and additional functionality.
Styling with CSS:
CSS plays a crucial role in enhancing the visual appeal and user experience of our news website. Let’s explore how we style our components using CSS:
* Add this CSS to your stylesheet */
.hover-text {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.card:hover .hover-text {
opacity: 1;
}
/* Add this CSS to your stylesheet */
.image-container {
position: relative;
overflow: hidden;
}
.image-container img {
width: 100%;
height: auto;
height: 250px;
object-fit: cover;
}
.blur-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px 8px 0px 0px;
backdrop-filter: blur(8px); /* Adjust the blur radius as needed */
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.card:hover .blur-overlay {
opacity: 1;
}
.card:hover .interaction-buttons {
opacity: 1;
transform: translate(-50%, -50%);
}
.interaction-buttons {
position: absolute;
top: 20%;
left: 35%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
cursor: default;
}
.touch-button,
.keyboard-button {
padding: 10px 20px;
margin: 5px;
border-radius: 10px;
}
.none-touch-button,
.none-keyboard-button {
padding: 10px 20px;
margin: 5px;
border-radius: 10px;
}
.touch-button{
background-color: red;
color: white;
border: none;
}
.keyboard-button{
background-color: white;
color: red;
border: none;
}
/* Add this CSS to your stylesheet */
.card:hover .keyboard-button {
animation: animate__zoomInRight 0.9s;
}
@keyframes animate__zoomInRight {
0% {
opacity: 0;
transform: translateX(50px) scale(0.8);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.card:hover .touch-button {
animation: animate__zoomInRight 0.9s;
}
@keyframes animate__zoomInRight {
0% {
opacity: 0;
transform: translateX(50px) scale(0.8);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}By applying styles to elements such as the navbar, news cards, and interaction buttons, we ensure a visually appealing and cohesive design. Utilizing CSS frameworks like MDB UI Kit streamlines the styling process, ensuring compatibility and responsiveness across different devices.
- Navbar: Styled to enhance visibility and user interaction.
- Cards: News articles are presented in cards with hover effects for better user engagement.
- Interaction Buttons: Buttons for actions like visiting the source website or viewing the publication date are styled for consistency and clarity.
Implementing JavaScript Functionality:
JavaScript breathes life into our news website, enabling dynamic interactions and data fetching. Here’s how we implement JavaScript functionality:
Read the full article here
https://espere.in/How-to-make-a-News-Website-with-HTML--CSS--and-JavaScript-Integrated-with-NewsAPI/
