HTML & CSS Part 2

Table of Contents

Getting Set Up

NOTE: we recommend using Chrome for this tutorial.

If you haven’t already, make sure you understand the concepts from our first tutorial

Go ahead and grab the starter code. You can hit download in the upper right corner, and then open index.html in your browser and in your favorite text editor.

We’re going to be building a site that looks like this, a dumbed down version of Invision’s site. Let’s pretend this is the ‘mockup’ that is given to us by the designer that we need to implement

Thinking in HTML

Since we know what our end product should look like, we should break implementation down into different parts of the page. We can see there’s a hero, a navigation bar and a bottom feature area with a left and right split.

To start near the top, the first thing we could do is build our hero. Let’s break it down even further - think of the sections and elements you’ll need to implement. Try figuring this out before reading the next section.

Note: In practice, it’s important to gain this structural understanding of the mockup so you can understand and build your HTML in a logical manner.

Breaking it Down - the Hero

Let’s look through the hero and try to figure out different parts/elements and what you might need to implement them. You’ll probably need a div to wrap the hero and another one for hero content, some headings for the two titles, and an anchor tag for the button. To style these, you’ll need to add relevant class names for these elements.

Here’s a basic bullet point visualization of how we might structure our html elements:

  • div - An outer div to wrap all of our hero. Let’s use class=’ucsd-hero’
    • div - An inner div to wrap our text and buttons. Let’s use class=’ucsd-hero-content’
      • h1 - For our main heading. A class=’ucsd-title’ sounds good
      • h3 - A smaller heading. A class=’ucsd-subtitle’ sounds good
      • a - Our anchor tag for our button. Since it’s a button, let’s use class=’ucsd-button’

Put into code, it might look something like this:

<!-- Step 1 -->
<div class="ucsd-hero">
  <div class="ucsd-hero-content">
    <h1 class="ucsd-title">Design Better. Faster. Together</h1>
    <h3 class="ucsd-subtitle">The world's leading prototyping, collaboration & workflow platform</h3>
    <button class="ucsd-button">
      Get Started - Free Forever!
    </button>
  </div><!-- End hero-content -->
</div><!-- End hero -->

Styling Hero

Awesome! We’ve added our hero content, but it could really use a bit of styling. Let’s open our stylesheet.css in the /css folder.

Once you’re ready, start by removing default browser spacing and set up our font. Just like in our last workshop, we’ll be using Lato.

/* Font imports */
@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400');

/* Remove default browser margins and padding */
html, body {
  padding: 0;
  margin: 0;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 14px;
}

Time to add color and a background! We can select the outermost div using the css selector .ucsd-hero and change it’s color, background-color, and background-image properties

/* Hero section */
.ucsd-hero {
   color: white;
   background-color: #112333; /*fallback if the background image isn't there*/
   background-image: url('../images/background.jpg');
}
  • background-image: url('../images/background.jpg'): Adds a background image to the div. .. goes to the parent directory to find the /images folder and the background.jpg file within it.

Notice here that we defined a color using using a 6 digit hexcode. In CSS, most colors can be indicated using this notation, which represents RGB colors in Hexadecimal. To explore different colors, check out Color Hex.

Refresh your browser to see that your styling is working. If not, double check that your <link> tag is referring to the correct CSS file.

Now that we have some color, lets add some spacing and align our text to the center in our .ucsd-hero-content <div>

.ucsd-hero-content {
  padding-top: 220px;
  padding-bottom: 220px;
  text-align: center;
}

From here, we can add a bit of font styling to our .ucsd-title and .ucsd-subtitle.

.ucsd-title {
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 300;
}
.ucsd-subtitle {
  font-style: italic;
  font-size: 24px;
  letter-spacing: 1px;
  font-weight: 300;
}
  • font-style: Changes font style to italics or oblique
  • text-transform: Changes the capitalization of text
  • letter-spacing: Increases or decreases the space between characters in a text
  • font-weight: Sets how thick or thin characters in text should be displayed

Last but not least, lets give the our .ucsd-button some styling

.ucsd-button {
  display: inline-block;
  padding: 0 28px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  height: 50px;
  font-size: 1rem;
  border-radius: 25px;
  background-color: #34699A;
  color: white;
  border: none;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.ucsd-button:hover{
  background-color: #0e4374;
}
  • ucsd-button:hover: this defines properties when the cursor is hovered over our div
  • display: inline-block: The inside of this div is formatted as a block, but the div itself is formatted as an inline element

Just to refresh your memory, There are two ways HTML can be displayed:

  • block: these elements take up the full width available
    • Examples: div, p, h1
  • inline: these elements take as much width as they need
    • Examples: span, a

Refresh your page. Awesome! We now have a title, subtitle, and button styled and it looks like our hero is just about finished. Take a moment now to look back at the various properties we used and feel free to change their values to better understand what they do.

Building the Info Section

Let’s take another look at our goal and scroll down to the bottom where our content is. Just like the .hero, you’ll probably need a div to wrap the section and another one to wrap it’s contents. You’ll also notice that the contents are split into two halves, so you’ll also need another div to separate the two.

Here’s a basic bullet point visualization of how we might structure our html elements:

  • div - An outer div to wrap the entire Info section. Let’s use class=’ucsd-info’
    • div - An inner div to wrap our first half of content Let’s use class=’ucsd-half’
      • div - Another div to wrap its contents Let’s use class=’ucsd-half-content’
        • h2 - For our main heading. Let’s class= ucsd-half-content-heading
        • p - A paragraph. A class=’subtitle’ sounds good
        • p - Another paragraph. We’ll make this italic later on using class=’ucsd-italic’
    • div - An inner div to wrap our second half of content Let’s use class=’ucsd-half’
      • div - Another div to wrap its contents Let’s use class=’ucsd-half-content’
        • img - For our image. Let’s use class=’ucsd-computer-image’

In code, this looks like

<!-- Step 2 -->
<div class="ucsd-info">
  <div class="ucsd-half">
    <div class="ucsd-half-content">
      <h2 class="ucsd-half-content-heading">
        Powerful design<br>
        prototyping tools
      </h2>
      <p>
        Get high-fidelity in under 5 minutes. Upload your design files and add animations, gestures, and transitions to transform your static screens into clickable, interactive prototypes.
      </p>
      <p class="ucsd-italic">
        "InVision is a window into everything that's being designed at Twitter. It gets all of our best work in one place."
      </p>
    </div>
  </div><div class="ucsd-half">
    <div class="ucsd-half-content">
      <img class="ucsd-computer-image"src="images/featurette.png" />
    </div>
  </div>
</div>

Styling Info

Let’s start with a few basic properties on our .info div and define our .italics class.

.ucsd-info {
  max-width: 1100px;
  margin: 100px auto; /*100px top and bottom, auto left and right allows it to center*/
  padding: 0 15px; /* For when the window is smaller, doesn't but up against the edges */
}
.ucsd-italic {
  font-style: italic;
}

How to split left and right

Refresh the browser and check out what we have so far. Sweet, looks like be just need to separate the two halves.

Take a look at our HTML and brainstorm some ways we can split our two .ucsd-half classes. We know each div takes about half of the page, so we should set our width: 49%. Additionally, this would be a great place to use our display: inline-block property since we want our divs to be inline with each other, and its inner content to be block elements.

/* Split left/right */
.ucsd-half {
  width: 49%;
  display: inline-block;
  vertical-align: middle;
}
  • width: 49%: For width, we can use relative % values. This is saying that the width should take up 49% of the first parent div, which in our case is .info, that has a width defined. We’re using 49% because we want to prevent accidental wrapping of elements.
  • vertical-align: sets the vertical alignment of an element

Finally, we’ll add a few text and image properties to the contents of our info section.

.ucsd-half-content {
  font-size: 18px;
  color: #5c6772;
}
.ucsd-half-content-heading {
  font-weight: 300;
  font-size: 42px;
}
.ucsd-computer-image {
  width: 100%;
}

Building the Navigation

Let’s look at the navigation in the example and figure out what we need. We’ll need a left-aligned area for our logo, a list for all the links in our navigation, and a button in the upper right. As before, we’ll need to figure out a way to align elements to the left and the right, and figure out how to display list elements inline.

Let’s try to break down the structure of the navigation

  • div - An outer div to wrap all our navigation sounds nice. Let’s use class=’nav’
    • div - We need another inside div to specify a max-width. Let’s use class=’nav-content’
      • div - For our left content. Let’s use class=’nav-left’
        • span - For the logo. Let’s use class=’logo’. Note here we’re using text, but you can use an image also.
      • ul - For our right content. Since unordered lists are display: block by default (like divs), we don’t need another div to wrap them. Here we can use multiple classnames for sets of properties that accomplish different goals. Let’s use class=’nav-right nav-list’, and use nav-right for aligning the list on the right and nav-list for list-specific properties
        • li - Our links to individual pages
        • li class='button' - A rightmost call to action button

With that, you can try writing the basic HTML

<div class="ucsd-nav">
    <div class="ucsd-nav-content">
        <div class="ucsd-nav-left">
            <span class="ucsd-logo">envision</span>
        </div>
        <ul class="ucsd-nav-right nav-list">
            <li class="ucsd-nav-right__item">Tour</li>
            <li class="ucsd-nav-right__item">Customers</li>
            <li class="ucsd-nav-right__item">New Features</li>
            <li class="ucsd-nav-right__item">Enterprise</li>
            <li class="ucsd-nav-right__item">Blog</li>
            <li class="ucsd-nav-right__item">Login</li>
            <li class="ucsd-nav-right__item">
                <button class="ucsd-button">Sign up Free</button>
            </li>
        </ul>
    </div>
</div>

Different positioning types: fixed

The first thing we might want to do is get the nav to stick at the top. Generally this is done with a position property with a value of fixed, and then specifying top: 0 to tell CSS that this element should be 0 pixels from the top of the container. With these two properties, the element will stay at the same position on the page regardless of scrolling.

We’ll also add some basic styling (colors, padding for whitespace, and a small bottom border) to the nav div that wraps all our content.

.ucsd-nav {
  background-color: white;
  padding: 16px 0;
  width: 100%;
  position: fixed;
  top: 0;
  border-bottom: 1px solid #5c6772;
}

There are also absolute and relative positioning, which are used often in positioning elements. Here’s a link if you want to learn more.

Separating Content with Float

Now we want the logo to be on the left side, and the rest of the content to stay on the right side. To do that, we can use the float property for easy positioning.

.ucsd-nav-left {
  float: left;
}
.ucsd-nav-right {
  float: right;
}

If we look at the page now we can see that the navigation elements are far off to the side of the page. Let’s make the navigation content fall within the same width as the rest of the page.

.ucsd-nav-content {
  margin: auto;
  max-width: 1100px;
}

Styling Lists

The default list styling involves elements in individual rows. We want to override the default HTML list styles.

.ucsd-nav-right {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
.ucsd-nav-right__item {
  display: inline-block;
}

This gives us our list inline. Let’s add a couple additional styles to space out and add color to our list items.

.ucsd-nav-right__item {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 0 10px;
  color: #5c6772;
  cursor: pointer; /* Tells the browser that the cursor should be a pointer on hover */
}

Hover Effects

We can add a hover effect to let users know that these links are clickable when hovered. This uses the pseudo-class hover

.ucsd-nav-right__item:hover{
  color: #040505;
}

We want to style the button and the text logo. Let’s add some margin and padding to enlarge and add spacing to the button and specify its colors and height. Let’s also style the logo.

.ucsd-nav-right__item .ucsd-button {
  padding: 0 20px;
  margin: 0 10px;
  color: white;
  height: 40px;
}
.ucsd-nav .ucsd-logo {
  padding-left: 16px;
  line-height: 36px;
}

Feedback and thank you

Here at Design at UCSD, we’re passionate about putting forward educational, hands-on and fun workshops, and are always looking to improve and iterate, so if you’ve completed this tutorial (remotely or on-site), please fill out this form to let us know how we did.

What’s Next?

If you’re ever interested in getting more involved with DesignatUCSD, have general feedback, or just want to love us, email us at [email protected].

The next logical steps

Now that we’ve covered some HTML and CSS, what’s next? To become a frontend developer, you’d need to learn and do a couple more things:

  • Javascript
  • Mobile friendliness
  • Frontend frameworks (like Bootstrap) - we’ll be having a workshop on this soon!
  • Practice, practice, practice!

Additional resources

Here are some resources for you to continue learning frontend:

  • This Medium post: A good post on how to get started with frontend development in general and how to practice.
  • CodeAcademy Tutorial: A hands-on tutorial teaching you the basics of HTML, CSS, and later on Bootstrap (also recommended by the above post).