Getting started with your first portfolio - Part 3: Adding CSS & implementing responsive web design

  1. Create a file called styles.css in the same directory as index.html
  2. Add the following line before the enclosing </head> tag in index.html
<link rel="stylesheet" href="styles.css" />

Element Selector

If we add this into styles.css, all of the text inside the enclosing p elements will be italicized

p {
  font-style: italic;
}
  • p is the selector - this is the element we want to stylize
  • each of the lines within the curly brackets { } is a particular style that will be applied to the element selected (p in this case)

Example of intro italicized

While adding a CSS selector will select all HTML elements with a selected attribute, this may not be what we want. We will instead give the p element a specific identity that we can style. We will do this by adding a class attribute.

Class Selector

Classes define particular styles for all elements that share the same class name.

.cool-class {
  font-weight: bold;
  color: green;
}

Corresponding HTML code if we wanted to use this class in HTML

<h1 class="cool-class">Hemlo frens</h1>

Example of intro text

ID Selector

Similar to class selectors, we can set an ID to an HTML element using the id attribute. How this is declared in CSS:

#cool-id {
  color: blue;
}

Using this id in an HTML element

<p id="cool-id">much amaze</p>

😎 Pro tip

You might think that ID and class do the exact same thing - you're not wrong! They just have different usages

  • ID: for unique instances of an element (e.g. one unique button style that is different from the others)
  • class: for repetitive cases (e.g. items listed in bullet points under the same list)

CSS Grid

CSS grid is used to structure your webpage into columns and rows

  • first we define how the rows and columns are structured in terms of percentages
  • for each element we then decide on which cell to put it in

This is important, because we need to make sure that our content is responsive across different screen sizese

Example of 2 x 3 table

1 2 3
4 5 6

To make this table, we do the following

.grid-table {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto auto;
}
  • display: grid tells the browser that this is a grid container
  • grid-template-rows and grid-template-columns set the dimensions for rows and columns respectively
  • auto width/column means our grid is flexible - this grid could end up looking very asymmetric depending on the content

HTML

<div class="grid-table">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

😎 Pro tip

You can use percentages/pixels instead of auto, e.g.:

  • 50% 50%
  • 300px 300px
  • 4rem 4rem

Mobile Responsiveness

A three-column display on a normal desktop screen may not necessarily look good in a mobile display. When building your site, it's important to design for cases where the user is not viewing your site from a desktop browser, but from their mobile device instead.

Media Queries

A media query is a block of CSS code that only runs if a given condition @media (<condition>) is met

Example

.grid {
  display: grid;
  grid-template-columns: 100%;
}

@media (min-width: 600px) {
  // breakpoint 1: run this code if the minimum width of screen is 600px
  .grid {
    grid-template-columns: 50% 50%;
  }
}

@media (min-width: 900px) {
  // breakpoint 2: run this code if the screen is at least 900px wide
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
  • grid-template-column sets either one column of 100%, two columns of 50% 50%, or three columns of 1fr 1fr 1fr (three equal-sized columns)
  • display: grid and grid-template-columns: 100% applies to both media queries, so we don't need to add them again

Positioning our portfolio

  1. We want to add some margins around the content of our portfolio to give it more space to "breathe". We'll create a container class
<body>
  <div class="container">
    <!-- all of our existing content goes here -->
  </div>
</body>
.container {
  max-width: 840px;
  margin: 0 auto;
}

Example of intro text

  • margin: 0 auto; means no margin for top-bottom, and auto margins for left-right

  • Now we'd like to center-align our intro headline

  • Let's make a new class called intro

<div class="intro">
  <!-- content goes here -->
</div>
.intro {
  text-align: center;
}

Example of intro text

  1. Let's arrange the about portion to have two columns with the first half on the left and second half on the right
<div class="about-grid">
  <div class="about-section">
    <p>I love nwPlus. Very amaze.</p>
  </div>
  <div class="about-section">
    <p>Some of my interests include:</p>
    <ul class="about-list">
      <li>Doggos</li>
      <li>Dogspotting</li>
      <li>Smol puppers</li>
    </ul>
  </div>
</div>
.about-grid {
  display: grid;
  grid-template-columns: 50% 50%;
}

.about-section {
  text-align: center;
  text-decoration: none;
}

.about-list {
  list-style: none;
  padding: 0;
}

Example of intro text

Example of intro text

  1. To simulate a mobile screen, we can do cmd+(or ctrl)shift+m. Notice how the content looks very disproportional, like a zoomed-out version of the desktop site

    Example of intro text

    Example of intro text

  2. we can make our site more responsive by instructing our browser to show the webpage in mobile size

  3. Let's add this meta tag before the closing head tag
<head>
  <meta charset="utf-8" />
  <!-- existing content in the <head> element -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
  • meta allows you to control the dimensions and scaling of a page
  • width=device-width sets the width of page to follow the screen-width of the device
  • initial-scale=1.0 sets the initial zoom level when the page is first loaded

Example of intro text

  1. Another thing we'd like to do is have the about sections one below another on mobile devices. Let's write a media query for that, defining the breakpoint as 480px
@media (max-width: 480px) {
  .about-grid {
    grid-template-columns: 100%;
  }
}

Example of intro text

Example of intro text

  1. Let's make similar changes to the projects section - 2x2 on desktop, 4x1 on mobile
<h2 class="heading">Pawjects</h2>
<div class="projects-grid">
  <img class="project-image" src="https://via.placeholder.com/300" />
  <img class="project-image" src="https://via.placeholder.com/300" />
  <img class="project-image" src="https://via.placeholder.com/300" />
  <img class="project-image" src="https://via.placeholder.com/300" />
</div>
.heading {
  text-align: center;
}

.projects-grid {
  display: grid;
  grid-template-columns: 50% 50%;
}

.project-image {
  justify-self: center;
  padding: 4%;
}
@media (max-width: 650px) {
  .projects-grid {
    grid-template-columns: 100%;
  }
}

Example of intro text

Example of intro text

  1. Let's split the contact section as well, by 30-70
<div>
  <h3 class="heading">Contacc</h3>
  <div class="contact">
    <div class="links">
      <h4>Links</h4>
      <ul class="links-list">
        <!-- List items -->
      </ul>
    </div>
    <div>
      <!-- Contact form -->
    </div>
  </div>
</div>
.contact {
  display: grid;
  grid-template-columns: 30% 70%;
}

.links {
  justify-self: center;
}

.links-list {
  list-style: none;
  padding: 0;
}

@media (max-width: 650px) {
  .links-and-contact {
    grid-template-columns: 100%;
  }
}

Example of intro text

results matching ""

    No results matching ""