Design Windows UI using HTML and CSS

In this tutorial, we will be preparing basic HTML and CSS setup for creating a desktop-like interface, particularly a taskbar at the bottom of the page. We will be creating a desktop User interface with taskbar icons and desktop background.

The images used in the code are as follows :

bg.jpg

icons.png

taskbarright.png

Follow this video for complete guidance :

Full Source Code

<style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background-image: url("bg.jpg");
    background-size: cover;
    overflow: hidden;
    height: 100vh;
  }
  .taskbar {
    background-color: #f3f3f3;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    z-index: 110;
    justify-content: center;
  }
  .right {
    justify-self: flex-end;
    position: absolute;
    right: 0;
    margin: 6px 0;
    height: 85%;
  }
</style>
<div class="taskbar">
  <img src="icons.png" alt="taskbarcenter">
  <img class="right" src="taskbarright.png" alt="taskbarright">
</div>

CSS Styles:

*: This selector applies styles to all elements on the page and resets their margin and padding to 0. It’s a common technique to ensure a consistent starting point for styling.

body: Styles for the body element include setting a background image (“bg.jpg”) to cover the entire viewport (background-size: cover;). The overflow: hidden; property ensures that no scroll bars appear, and the height: 100vh; makes the body take up the full height of the viewport.

.taskbar: Styles for the taskbar div include setting a background color (#f3f3f3), making it take up the full width of the viewport (width: 100%;), positioning it at the bottom (position: absolute; bottom: 0;), using flexbox for centering content (display: flex; justify-content: center;), and giving it a higher z-index to ensure it’s above other elements on the page.

.right: Styles for the right part of the taskbar, positioning it to the right (position: absolute; right: 0;), adding some margin and setting its height (margin: 6px 0; height: 85%;). The justify-self: flex-end; property is not valid in this context; it should be align-self: flex-end; to align the item at the end of the flex container.

HTML Structure:

The <style> tag contains the CSS styles.

Inside the <style> tag, there is a <div> element with the class “taskbar.” This div represents the taskbar at the bottom of the page.

Inside the “taskbar” div, there are two <img> elements. One with the source “icons.png” represents the center part of the taskbar, and the other with the class “right” and the source “taskbarright.png” represents the right part of the taskbar.

Explanation

The code creates a simple desktop-like interface with a background image, a taskbar at the bottom, and icons in the center and right sections of the taskbar. It’s a basic structure that you can expand upon by adding more elements, functionality, and styling as needed.