Build a Responsive News Website Homepage

Introduction

In this project, you will learn how to create the homepage for the LabEx Daily newspaper website. You will be responsible for setting up the HTML structure and styling the various sections of the homepage using CSS.

👀 Preview

LabEx Daily homepage preview

🎯 Tasks

In this project, you will learn:

How to set up the HTML structure for the LabEx Daily homepage
How to style the header section, including the logo and navigation buttons
How to style the banner section, including the phone image and the content area
How to style the tab title section, including the "Latest News" and "More" text
How to style the news list section, including the layout of the news items and the "More" button
How to style the footer section, including the left and right sections

🏆 Achievements

After completing this project, you will be able to:

Create a responsive and visually appealing homepage for a news website
Use CSS to style different sections of a web page
Position and align elements using CSS
Apply various CSS properties to achieve the desired design

Set Up the Project Structure

In this step, you will set up the project structure and prepare the necessary files and folders.

The initial code for this question has already been provided. Open the coding environment, and the directory structure is as follows:

├── css
│   └── style.css
├── images
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── phone_sample.png
│   └── qr.png
└── index.html

Where:

css/style.css is the style file that needs to be completed for this challenge.
images contains the image files used in the project.
index.html is the homepage of the LabEx Daily project.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Please complete the css/style.css style file (don't modify the base css style already given) so that the LabEx Daily home page looks as follows (total page width is 1024px):

Image Description

Style the Header

In this step, you will learn how to style the header section of the LabEx Daily homepage. Follow the steps below to complete this step:

Open the css/style.css file in your code editor.
Add the following CSS rule after /* TODO */ to adjust the heading style:

/* header */
.headerbox {
  height: 78px;
  background-color: white;
}

.navbox {
  padding: 23px;
}

.navbox h1 {
  color: #0099f2;
  float: left;
}

.navright {
  float: right;
}

.on {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: #0099f2;
  background-color: #f0f9ff;
  line-height: 32px;
  text-align: center;
}

.on + a {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: black;
  line-height: 32px;
  text-align: center;
}

These CSS rules style the header, including the LabEx Daily logo, the "APP Download" button, and their hover effect.

In this step, you will learn how to style the banner section of the LabEx Daily homepage. Follow the steps below to complete this step:

Open the css/style.css file in your code editor.
Add the following CSS rules to the css/style.css file:

/* banner */
.banner {
  position: relative;
  overflow: hidden;
  height: 460px;
  background-color: #008bed;
}

.container {
  width: 964px;
  height: 430px;
  position: absolute;
  bottom: 0px;
  padding: 30px 30px 0px 30px;
}

.container img {
  width: 409px;
  position: absolute;
  bottom: -15px;
}

.content {
  width: 43%;
  padding-top: 100px;
  float: right;
}

.content h2 {
  color: #fdfdfd;
  font-size: 40px;
  line-height: 40px;
  padding-bottom: 10px;
}

.info {
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  color: #99d1f8;
}

These CSS rules style the banner section, including the background color, the positioning of the phone image, and the content area with the title and description.

Style the Tab Title

In this step, you will learn how to style the tab title section of the LabEx Daily homepage. Follow the steps below to complete this step:

Open the css/style.css file in your code editor.
Add the following CSS rules to the css/style.css file:

/* tabtitle */
.tabtitle {
  width: 960px;
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgb(249, 249, 249);
}

.tabtitle h3 {
  line-height: 100px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  float: left;
}

.tabtitle h4 {
  line-height: 100px;
  font-weight: 500;
  font-size: 24px;
  color: #cccccc;
  float: right;
}

These CSS rules style the tab title section, including the background color, the positioning of the "Browse Content" and "Latest Content" text, and their respective styles.

Style the News List

In this step, you will learn how to style the news list section of the LabEx Daily homepage. Follow the steps below to complete this step:

Open the css/style.css file in your code editor.
Add the following CSS rules to the css/style.css file:

/* list */
.list {
  position: relative;
  background-color: rgb(249, 249, 249);
  height: 1718px;
  padding-bottom: 30px;
}

.list ul {
  list-style: none;
}

.list li {
  margin-left: 30px;
  margin-bottom: 20px;
  padding-top: 20px;
  float: left;
  background-color: white;
}

.list img {
  display: block;
  margin-top: 20px;
  width: 260px;
  height: 260px;
  margin: auto;
}

.list a {
  display: block;
  width: 300px;
  height: 374px;
}

.list p {
  width: 260px;
  font-size: 14px;
  line-height: 25px;
  color: #333333;
  margin: auto;
}

.more {
  position: absolute;
  bottom: 30px;
  width: 960px;
  height: 62px;
  left: 32px;
  background-color: #e8eef2;
  text-align: center;
}

.more a {
  display: block;
  width: 100%;
  line-height: 62px;
  font-size: 20px;
  color: #59abdf;
}

These CSS rules style the news list section, including the layout of the news items, the image size and positioning, the text styles, and the "Check out more in the app!" button at the bottom.

In this final step, you will learn how to style the footer section of the LabEx Daily homepage. Follow the steps below to complete this step:

Open the css/style.css file in your code editor.
Add the following CSS rules to the css/style.css file:

/* footer */
.footer {
  height: 265px;
  background-color: #e5e5e5;
}

.footerBox {
  width: 960px;
  padding: 32px;
}

.footerL {
  width: 710px;
  height: 210px;
  float: left;
}

.footerL p {
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 15px;
  color: #000;
}

.footerR {
  float: right;
  text-align: center;
}

.footerR img {
  width: 141px;
  height: 152px;
}

These CSS rules style the footer section, including the background color, the layout of the left and right sections, the text styles, and the positioning of the QR code image.

Congratulations! You have now completed the styling of the LabEx Daily homepage. You can now open the index.html file in your web browser to see the final result.

LabEx Daily homepage footer

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.

Building a Responsive News Website Homepage