HTML Website UI improvements! – Kids Koding Academy

Hello everyone and welcome back to another blog post! Today I will be going over how to add more UI (user interface) improvements to your websites so that it is easier for people to interact with your page.

Let’s get started,
Step 1: Include a CSS framework
Using a CSS framework can help streamline the styling process and provide pre-designed components. One popular CSS framework is Bootstrap. Add the following code to the <head> section of your HTML file, just below the existing <link> tag for your style.css file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

This will include the Bootstrap CSS file from a CDN (Content Delivery Network) and make the Bootstrap classes available for use in your HTML.

Step 2: Implement responsive navigation using Bootstrap
Replace your existing <nav> code with the following Bootstrap-based code:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">My Website</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

This code utilizes Bootstrap’s navbar component to create a responsive navigation bar. It includes a brand/logo, a collapsible button for small screens, and a list of navigation links.

Step 3: Improve the overall layout using Bootstrap grid system
Modify your existing content sections to utilize the Bootstrap grid system. For example, update the section containing the “About Me” information like this:

<section class="container mt-5">
  <div class="row">
    <div class="col-md-6">
      <h2>About Me</h2>
      <p>Hi, my name is Jane Doe and I'm a web developer based in New York City. I have experience with HTML, CSS, and JavaScript, and I'm always learning more!</p>
    </div>
    <div class="col-md-6">
      <img src="https://via.placeholder.com/400x200" alt="Placeholder image" class="img-fluid">
    </div>
  </div>
</section>

Here, the content is divided into two columns using the col-md-6 class. This will ensure a responsive layout where the text and image are displayed side by side on larger screens and stacked vertically on smaller screens.

Step 4: Apply additional Bootstrap styling and components
Explore other Bootstrap components and classes to enhance the UI further. For example, you can use Bootstrap’s form components to style the contact form or utilize card components to present sections with a visually appealing design.

Step 5: Customize and fine-tune the styles
Once you have incorporated Bootstrap, feel free to adjust and customize the styles according to your preferences. You can modify the colors, fonts, spacing, and other visual aspects by overriding or adding your own CSS rules.

I hope you all enjoyed this blog post and I’ll see you next time!