Header Ads Widget

Ticker

6/recent/ticker-posts

How to create a webpage layout using HTML and CSS?

Dinesh February 18, 2025

How to I create a Webpage Layout using HTML and CSS?

webpage layout
webpage layout

Within the area of web design, simplicity gives way to beauty, or rather, vice versa. Do not make the mistake of thinking that complex scripts or fancy frameworks are importent to make a good-looking website or a properly functioning one. A stunning layout with a positive user experience is just a matter of good HTML and CSS work.

In this article, we will build this simple layout using only HTML and CSS. It includes a fixed navbar, a fullscreen background image, a content area that is centered, and buttons for call-to-action. Let's dissect it.

The HTML: Building the Structure

Here’s the HTML code that sets up the basic structure for our website layout:

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Website Layout | CodingLab</title> 
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
   </head>
<body>
  <nav>
    <div class="menu">
      <div class="logo"><a href="#">VortexFrame</a></div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Feedback</a></li>
      </ul>
    </div>
  </nav>

  <div class="img"></div>

  <div class="center">
    <div class="title">Stunning Websites with Just</div>
    <div class="sub_title"> 
HTML & CSS—No JavaScript Needed!</div>
    <div class="btns">
      <button>Learn More</button>
      <button>Subscribe</button>
    </div>
  </div>
</body>
</html>

Important HTML Elements

  • Basic Setup: The <!DOCTYPE html> declaration and the <html> tag declare the document type and language in order to be compatible with modern browsers.
  • The Navigation Bar (<nav>): The nav contains a logo and a list of links that constitute the website's top navigation menu, and each menu item links to other sections such as Home, About, Services, etc.
  • Fullscreen Image Section (.img): This is where the fullscreen background image lives, along with CSS styles that will make it look good.
  • Centered Title with Buttons: The center class centers its content vertically and horizontally on the page. Within this container, we have a title, a subtitle, and two buttons just to keep the user engaged.

The CSS: Adding Style and Visual Appeal

Now, let’s take a look at the CSS code that styles the HTML structure and brings it to life. Here’s the CSS:

@import 
url
("https://fonts.googleapis.com/css2?family=Poppins:
wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

nav {
  position: fixed;
  background-color: #1b1b1b;
  width: 100%;
  padding: 10px 0;
  z-index: 13;
}

nav .menu {
  max-width: 1250px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.menu .logo a {
  text-decoration: none;
  color: #fff;
  font-size: 35px;
  font-weight: 600;
}

.menu ul {
  display: inline-flex;
}

.menu ul li {
  list-style: none;
  margin-left: 7px;
}

.menu ul li:first-child {
  margin-left: 0;
}

ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.menu ul li a:hover {
  background-color: #fff;
  color: black;
}

.img {
  background: url("./living-room.jpg") no-repeat;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.img::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.center{
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    padding: 0 20px;
    text-align: center;
}

.center .title{
    color: #fff;
    font-size: 55px;
    font-weight: 600;
}

.center .sub_title{
    color: #fff;
    font-size: 52px;
    font-weight: 600;
}

.center .btns{
    margin-top: 20px;
}

.center .btns button{
    height: 55px;
    width: 170px;
    border-radius: 5px;
    border: none;
    margin: 0 10px;
    bottom: 2px solid white;
    font-size: 20px;
    font-weight: 500;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

.btns button:first-child{
    color: #3b3b3b;
    background-color: none;
}

.btns button:first-child:hover{
    background-color: rgb(80, 77, 77);
    color: black;
}

.btns button:last-child{
    background-color: white;
    color: black;
}

CSS Breakdown

  • Font Import:

    • The @import rule brings in the Poppins font from Google Fonts for a modern, clean look.

  • Global Styles:

    • *{ margin: 0; padding: 0; } resets the margin and padding of all elements to prevent browser defaults.
    • font-family: "Poppins", sans-serif; applies the Poppins font across the whole page.

  • Navbar Styling:

    • The nav bar is fixed at the top of the page and has a dark background color (#1b1b1b). The links inside the navbar turn white with a hover effect that changes the background to white and the text color to black.

  • Image Section:

    • The .img class sets a background image and ensures it fills the entire screen (height: 100vh), with a dark overlay to create a visual contrast for the content.

  • Centered Content:

    • The .center class centers the title and buttons vertically and horizontally, making the layout look clean and centered on any screen size.

  • Buttons:

    • Buttons are styled with a height of 55px, a width of 170px, and rounded corners. When hovered, the first button changes its background to a dark gray while the second button remains white with black text.

Frequently Asked Questions (FAQ)

1. What do HTML and CSS represent? 

Answer:
HTML (HyperText Markup Language) is a building block for structuring content on the web, whereas CSS (Cascading Style Sheets) defines how that content should be styled and laid out. These are the two main elements forming the backbone of web development.

2. Is it necessary to have Java Script for a good-looking website? 

Answer:
Not really, an attractive website can be simply made with HTML and CSS. The structure is done through the HTML and the site layout with CSS. Typically, we use JavaScript with HTML and CSS to add interactivity; however, there is no need for a beautiful functional static website to have that as a bar.

3. How do I add a background image to my website?

Answer:
In CSS, you can use the background property to add an image. Here's an example:
.img {
  background: url('your-image.jpg') no-repeat center center;
  background-size: cover;
  height: 100vh;
}

4. Which advantages does the flexbox support concerning layouts?

Flexbox in CSS is able to create responsive layout designs without major calculations. Mostly Flexbox is used to design navigation bars, grids, and other layouts.

5. What do I do to make sure my site is mobile-friendly?

To guarantee mobile compatibility, responsive design must be adopted. Using relative units to determine lines and features in layout, like percentages and ems, will be flexible enough to obey media queries that can adjust layouts depending on the screen size.
@media (max-width: 768px) {
  .menu ul {
    flex-direction: column;
  }
}

The End

This uncomplicated layout is a good starting point for any project. HTML and CSS alone can make decent-looking, responsive websites without the need for any JavaScript. The fixed navbar, centered title, and attractive background image will ensure that your website is recognized. This layout gives great versatility and style to whichever personal blog or commercial portfolio you create. 

Begin by experimenting with your design by altering the HTML markup structure and CSS styles according to your needs. Happy coding!

Tags:
Dinesh

Posted by: Dinesh

I am Dinesh a passionate developer and YouTuber who enjoys creating innovative solutions and sharing knowledge with others.

Post a Comment

0 Comments

If you have any doubts. Please let me know