portfolio website

We are working hard 👷🏼‍♂️ 🏗 🚜 to continually add more.
Please email if you have requests or questions 🙋.
Contact 👽 🛸 info below.
📬

style homepage

Add a css file and connect it to your html file.

Apply styles for layout and design to your homepage.

vanilla-javascript-portfolio-tutorial

Create Styles Folder

Click the add new folder button in the VS Code project sidebar.

Add a new folder named named css to your root folder.

W3 Schools CSS
Mozilla File Structure
VS Code Files and Folders
VS Code Tips and Tricks
css

Add CSS File

Click the add new file button in the VS Code project sidebar.

Add a new file named named styles.css to your root folder.

Mozilla CSS Structure
W3 Schools CSS
css/styles.css

Write Body Styles

Style the body tag with background-color: black, font-color: aliceblue, and margin: 0.

W3 Schools Tag Selector
Mozilla Selectors
Stack Overflow body vs *
body {
  background-color: black;
  color: aliceblue;
  margin: 0;
}

Save the file.

Refresh the browser.

No change in the browser yet.

Import Stylesheet

In index.html, nest a link tag inside the head tags.

In the link tag, do the following.

  • Set the href attribute equal to the relative path of the css file
  • Set the rel attribute equal to "stylesheet"
W3 Schools link tag
Mozilla link tag
Geeks for Geeks link tag
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jane Doe | Vanilla JS</title>

    // CSS Stylesheet with relative path to relevant styles file
    <link rel="stylesheet" href="./css/styles.css" />
</head>

Save the files.

Refresh the browser to see the body styles.

Create Title Wrapper

Write a css class named .page-title-wrapper and do the following.

  • Make it a flex container using display: flex
  • Move the background-color and color from body to .page-title-wrapper
  • Apply .page-title-wrapper to the outer-most div

Here is .page-title-wrapper.

W3 Schools Flexbox
W3 Schools Background color
Mozilla color
body {
  margin: 0;
}

.page-title-wrapper {
  background-color: black;
  color: aliceblue;
  display: flex;
}

Here is .page-title-wrapper applied to the opening tag of the outer-most div.

Mozilla css selectors
<div class="page-title-wrapper">

Save the files.

Refresh the browser to see the .page-title-wrapper styles.

Vertically Align

Add flex-direction: column to .page-title-wrapper to vertically center the elements nested inside the title wrapper.

Here is .page-title-wrapper with the updated value.

Mozilla Flexbox
Mozilla Flex-direction
.page-title-wrapper {
  background-color: black;
  color: aliceblue;
  display: flex;
  flex-direction: column;
}

Save the files.

Refresh the browser to see the .page-title-wrapper styles.

Horizonally Center

Add align-items: center to page-title-wrapper to horizontally center the elements nested inside the title wrapper.

Here is .page-title-wrapper with the updated value.

W3 Schools align-items
Mozilla align-items
.page-title-wrapper {
  background-color: black;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Save the files.

Refresh the browser to see the .page-title-wrapper styles.

Vertically Center

Add justify-content: center and height: 100vh to page-title-wrapper to verticaally center the elements nested inside the title wrapper.

Here is .page-title-wrapper with the updated values.

W3 Schools justify-content
Mozilla justify-content
W3 Schools CSS Units
.page-title-wrapper {
  background-color: black;
  color: aliceblue;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Save the files.

Refresh the browser to see the .page-title-wrapper styles.

Write a css class named links-wrapper and do the following.

  • Make it a flex container using display: flex
  • Apply it to the div wrapping the a tags

Here is .links-wrapper.

.links-wrapper {
  display: flex;
}

Here is .links-wrapper applied to the opening tag of the div.

<div class="links-wrapper">

Save the files.

Refresh the browser to see the .links-wrapper styles.

Evenly space the a tags within the div using justify-content: space-evenly and give each a tag margin: 0 5px.

.links-wrapper {
  display: flex;
  justify-content: space-evenly;
}

.links-wrapper > a {
  margin: 0 5px;
}

Save the files.

Refresh the browser to see the .links-wrapper styles.

Remove the underline from the a tags and make the font color of the a tags a light blue.

Mozilla text-decoration
Stack Overflow text-decoration
Color Hunt
Chrome Color Picker
.links-wrapper {
  display: flex;
  justify-content: space-evenly;
}

.links-wrapper > a {
  color: lightblue;
  margin: 0 5px;
  text-decoration: none;
}

Save the files.

Refresh the browser to see the .links-wrapper styles.

Style Image

Write a css class named .title-image that rounds the corners of the element and adds margin to the bottom.

Here is .title-image.

W3 Schools border-radius
CSS Tricks border-radius
.title-image {
  border-radius: 10px;
  margin-bottom: 40px;
}

Here is .title-image applied to the img tag.

<div class="title-image">

Save the files.

Refresh the browser to see the .title-image styles.

Style Headings

Style the h1 and h2 titles with margin, font-family, and font-weight and make the h2 italic and a different shade of the h1 color.

Here are styles for h1 and h2 tags.

W3 Schools font-family
W3 Schools font-style
W3 Schools font-weight
W3 Schools opacity
ThoughtCo grouping selectors
h1,
h2 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  margin: 2px 0;
}

h1 {
  font-weight: 500;
}

h2 {
  font-weight: 200;
  font-style: italic;
  opacity: 0.8;
}

Save the files.

Refresh the browser to see the new styles.

Style the .links-wrapper with margin.

Mozilla margin
Stack Overflow margin vs padding
.links-wrapper {
  display: flex;
  justify-content: space-evenly;
  margin: 40px 0;
}

Save the files.

Refresh the browser to see the new styles.

Import Font Awesome

Import Font Awesome by add the following to your head tag.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>

Here is the entire head tag with it.

Font Awesome Home
Font Awesome cdn
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Jane Doe | Vanilla JS</title>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  />
  <link rel="stylesheet" href="./css/styles.css" />
</head>

Save the files.

Refresh the browser to see the new styles.

Display Icons

Replace a text with Font Awesome icons.

<div class="links-wrapper">
    <a href="https://www.linkedin.com/company/money-club-for-makers/">
        <i class="fab fa-linkedin"></i>
    </a>
    <a href="https://github.com/thacash">
        <i class="fab fa-github"></i>
    </a>
    <a href="https://twitter.com/thacash_club">
        <i class="fab fa-twitter"></i>
    </a>
    <a href="https://stackoverflow.com/users/19829260/maker">
        <i class="fab fa-stack-overflow"></i>
    </a>
    <a href="https://www.youtube.com/channel/UCB2UGLXI2IYuIX9QVkXB2ew">
        <i class="fab fa-youtube"></i>
    </a>
</div>

Save the files.

Refresh the browser to see the new styles.

Discussion

CSS is the language for applying styles to html elements.

Examples of style properties include.

  • background-color
  • color
  • display
  • font-size
  • font-type
  • height
  • width

Here is a list of CSS properties

Write CSS code in files that have a .css suffix in the filename.

This is called using an external stylesheet.

Sometimes developers write CSS code in their html file using the style attribute or nested in style tags in the head element.

Use an external stylesheet instead of the style attribute or nested in style tags in the head because it is easier to maintain your code.

Whichever style approach you use, be consistent, intuitive, and predictable so that reading and maintaining your code is easy

When using a .css file, import it into html files in the head tag using a link tag having its src set to the .css file's relative path.

<head>
  <link rel="stylesheet" href="./css/styles.css">
</head>

In your .css file, use the following syntax to create CSS classes.

Each CSS class is a collection of style properties that you can apply to one or more elements.

div {
  border-radius: 5px;
  color: orange;
  font-size: 18px;
  padding: 10px;
  margin: 10px;
}

.page-title {
  background-color: blue;
  font-size: 24px;
  padding: 10px;
}

If writing a class for a tag type, use the tag name to assign the collection of styles to all tags of that type.

After the tag name is an object { } comprised of key:value pairs of style properties separated by a semi-colon.

Here is an example of styling all h1, h2, and a tags.

h1,
h2 {
  margin: 10px 0;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 24px;
}

a {
  border-bottom: 1px solid blue;
  padding: 2px;
  text-decoration: none;
}

Instead of styling all elements with the same tag name, you can style individual elements using class selectors.

The class name starts with . followed by a name you give it.

After the name is an object { } comprised of key:value pairs of style properties separated by a semi-colon.

.page-title {
  color: darkslategray;
  font-size: 24px;
  padding-bottom: 10px;
}

.page-subtitle {
  color: lightgray;
  font-size: 24px;
  font-style: italic;
}

Name your class selectors with descriptive terms so that when someone reads your code, they know what to expect generally.

Each class name should be unique in order to avoid bugs, more on that below.

Make your custom CSS names nouns because your classes apply to objects.

Good names help bring your code to life when someone reads it!

After writing the class styles, set any html element's class attribute equal to the class selector name to apply the style properties to the html element.

Here is an example.

<div class="page-title">Let's build cool stuff.</div>
<div class="page-subtitle">Maker Club</div>

Apply a CSS class to as many html elements as you want

Although you should generally avoid the style attribute, you will see people use it online. Therefore, you learn a little about it now so that you can understand it when you see it.

When using the style attribute, you set an HTML element's style attribute to a string (e.g., "something-in-quotes=is-a-string") not an object 9e.g., { something: "in curly braces }) containing key:value pairs separated by a semi-colon.

Like in a .css file, each key is the name of a CSS property and each value defines that property for the class.

Here is an example inside an HTML file.

<p style="color: gray; margin: 10px; padding: 20px; width: 50%;">
  This is text inside a paragraph tag.
</p>

When using external stylesheets, your code is easier to maintain and reuse because you can apply the css classes to multiple elements. With the style attribute, however, you cannot.

When using external stylesheets, you can import more than one stylesheet.

<head>
  <link rel="stylesheet" href="./css/styles.css">
  <link rel="stylesheet" href="./css/navbar.css">
</head>

The order you import them matters in the event you have conflicts between classes.

For instance, a conflict arises when each css file has a class named .page-title but the classes have different properties.

The browser reads your code from top to bottom and remembers the last thing it read.

In the event of conflicts between your CSS styles, whether the conflict arises within a file or across multiple files, the code appearing lower in the file is what wins.

Here are examples of css properties useful for layout.

Here are examples of css properties useful for design.

You saw an example of a selector above (i.e., .page-title is a .class selector)

That is not the only selector available.

Look at this list of other CSS selectors.

When first learning, keep things simple by using just the .class selector

Also check out pseudo classes and elements.

  • Pseudo classes define a special state of an element (e.g., hover)
  • Pseudo elements style specific parts of an element (e.g., first letter of a div)
Last updated Sept 12, 2022 at 8:51