Creating Browsers Window using HTML and CSS

A browser window is the graphical user interface (GUI) element of a web browser that displays web pages and web applications. It usually consists of a title bar, menu bar, address bar, navigation buttons, and content area.


  • Make a container div with rounded corners, a border, and concealed overflow.

  • Make a header with a background color, padding, and navigation bar inside the container.

  • Links to various pages should be added to the navigation bar.

  • Add a search button and text input field to the header.

  • In the main paragraph you can include a heading.

  • The upper right corner of the container should have the 3 buttons to minimize, maximize, and close.

  • Make the search bar and buttons to be at the center of the header.

  • The main paragraph should be put in the center of the container.

  • Apply CSS styles to each element, such as font sizes, colors, margins, and padding.


<!DOCTYPE html>
      /* CSS styles */

      /* Style for the container */
      .container {
         width: 80%;
         margin: 0 auto;
         border: 1px solid #ccc;
         border-radius: 5px;
         overflow: hidden;

      /* Style for the header */
      header {
         background-color: #f2f2f2;
         padding: 10px;
         display: flex;
         justify-content: space-around;
         flex-direction: column;

      /* Style for the navigation bar */
      nav {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 10px;

      /* Style for the navigation links */
      nav a {
         color: #333;
         text-decoration: none;
         font-weight: bold;

      /* Style for the hover effect on navigation links */
      nav a:hover {
         text-decoration: underline;

      /* Style for the buttons */
      .buttons {
         display: flex;
         align-items: center;

      /* Styling buttons */
      .minimize, .maximize, .close {
         height: 10px;
         width: 10px;
         margin-right: 5px;
         border-radius: 50%;

      /* Styling minimize button */
      .minimize {
         background-color: #ff9800;
         color: #ff9800;

      /* Maximize button */
      .maximize {
         background-color: #4caf50;

      /* Close button colour */
      .close {
         background-color: #f44336;

      /* Form styles */
      form {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 10px;

      /* Styling the search input */
      input[type="text"] {
         padding: 10px;
         border: none;
         border-radius: 5px;
         margin-right: 5px;
         width: 50%;

      /* search button styles */
      button[type="submit"] {
         padding: 10px;
         border: none;
         border-radius: 5px;
         margin-right: 5px;
         cursor: pointer;
         background-color: #f2f2f2;
         color: #333;

      /* Hover effect on buttons */
      button:not([type="submit"]):hover {
         background-color: #333;
         color: #fff;

      /* Padding the main content */
      main {
         padding: 10px;

      h1 {
         font-size: 36px;
         color: #333;
         margin-bottom: 10px;

      /* Styling main paragraph */
      p {
         font-size: 18px;
         color: #666;
   <div class="container">
      <div class="buttons">
         <button class="minimize"></button> <!-- Minimize button -->
         <button class="maximize"></button> <!-- Maximize button -->
         <button class="close"></button> <!-- Close button -->
         <!-- Nav elements -->
         <a href="#">Gmail</a>
         <a href="#">Images</a>
         <a href="#">Apps</a>
         <a href="#">Notifications</a>
         <a href="#">Account</a>
      <!-- Search Bar -->
         <input type="text" placeholder="">
         <button type="submit">Search</button>
         <!-- Heading -->
         <h1>Welcome to Tutorialspoint</h1>
         <!-- Paragraph -->
         <p>Tutorialspoint is a free online learning platform where you can learn various programming and technology-related subjects. We aim to provide high-quality education to everyone, everywhere.</p>


In addition to this method, we may also make this using the following techniques:

We can make use of Bootstrap, a popular front-end framework that provides a variety of pre-made UI components. It is possible to create a browser window using the Bootstrap modal component. You can modify the modal to suit your needs.

The method in JavaScript opens a fresh browser tab. The URL of the current browser window can also be changed using the window.location.href attribute.

To build a browser window, various CSS frameworks like Bulma, Tailwind, and Foundation offer pre-made UI components.

Updated on: 22-May-2023


Kickstart Your Career

Get certified by completing the course

Get Started