Designing with Code

By /

Back to: Create a Static Student Website

User Interface (UI) Customization via CSS

Once your initial site structure is stable and starting content is in place, a relatively quick and easy way to start exploring different visual styles for your website is to customize the user interface via code (CSS). Some web designers prefer using design software, some prefer pencil and paper, and some prefer code. Now that we have a basic setup and code base to work with, let’s explore a few easy ways to customize your UI by designing with code.

View Video Lesson

Quick Customization Options

Below is a general list of relatively quick and easy visual changes that you can make to your site quickly, in the browser, using HTML and CSS:

  • Color Changes
    • Element background colors
      • body (main background color of the web page)
      • header
      • navigation
      • footer
      • hero sections (large display sections at the top of each page)
      • main content area
        • sub sections
    • Text colors
      • headings (h1, h2, h3, …)
      • body
      • links
  • Typography Changes
    • Webfonts
      • Google Fonts
      • Adobe Fonts
    • Type Specimens (e.g. font combinations)
  • Content Changes/Additions (e.g. HTML + CSS)
    • add classes if needed (for targeted styling)
    • add divs and spans if needed (for grouping and/or targeted styling)
    • add new/more content (e.g. more category lists, more list items, etc.)
    • add sections to your home page (below your lists)
  • Add images
    • as content (HTML img tag)
    • as background images (css background image)
  • Add Design Patterns/Components/Features (advanced)
    • Image galleries with modals/lightboxes
    • Carousels and Slideshows
    • Embedded videos

Example: Blue Wave Inspired Blue UI

Below is an example of a clean, minimal, blue and white interface inspired by a photo of a wave that I found on Lorem Picsum (source: Unsplash).

Photo by Tim Marshall, from Unsplash

First, I added a “page-home” class to my body element of my home page (index.html) so that I can display the wave photo on my home page only.

<body class="page-home">

Next I added the image as a background-image to my home page hero with the following CSS:

/* CUSTOM HOME PAGE STYLING */
.page-home .hero {
    background-image: url('https://picsum.photos/id/1041/1600/800');
    background-position: center top;
    background-size: cover;
}

Then I removed the background color for my home page header and changed its positioning to “absolute” so that it will render on top on my home page hero image. I also adjusted the padding of my home page hero section to make room for the header. The final custom CSS is as follows:

/* CUSTOM HOME PAGE STYLING */
.page-home header {
    position: absolute;
    width: 100%;
    background-color: transparent;
}

.page-home .hero {
    background-image: url('https://picsum.photos/id/1041/1600/800');
    background-position: center top;
    background-size: cover;
    padding: 10em 1em 6em 1em;
}

Below is the result of these relatively quick edits:

Student Site screenshot: Custom Home Page Header and Hero Styling
Student Site screenshot: Custom Home Page Header and Hero Styling

Have Fun!

While not required to customize your student site, I encourage everyone to do so. It is a great way to experiment and learn in a hands-on way while having fun! Go nuts! Be creative! Remember, this is your student site, so please feel free to do whatever you want to make it your own.