How To Add Your Educational History and Skills To Your Website Using CSS (Section 5)

How To Add Your Educational History and Skills To Your Website Using CSS (Section 5)

In this tutorial, you will recreate the “Education” section and “Skills” section (or fifth section) of the demonstration website using HTML tables and CSS classes. Feel free to switch out Sammy’s information with your own if you wish to personalize your website. The methods you use here can be applied to other CSS/HTML website projects.

Introduction

In this tutorial, you will recreate the “Education” section and “Skills” section (or fifth section) of the demonstration website using HTML tables and CSS classes. Feel free to switch out Sammy’s information with your own if you wish to personalize your website. The methods you use here can be applied to other CSS/HTML website projects.

Education and Skills section of demonstration website

To build these sections, you’ll create a CSS class that styles two equal-sized content boxes that can fit side by side on the webpage. You’ll then add a table inside each box where you will add text content.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Creating and Styling Two Equal-Sized Tables

First, copy and paste the following code snippet at the bottom of your styles.css file:

styles.css

. . .

/* Fifth section */

.column-2a {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:60px;
  height:450px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 40px;
  background-color:white;
}

Copy

This code snippet creates the class column-2a, which is like the column-2 class you created to style the “About” section in a previous tutorial in this series, except that its height property is set to 450px. If you change the amount of content in this box, you may need to adjust the height accordingly, otherwise it may overflow or be cut off. If you want to learn more about the other declarations, please review the previous sections in this tutorial series on setting the sizes of contentpadding, and margins.

Save the styles.css file before you proceed.

Next, return to the index.html file and paste the following code snippet after the last closing </div> tag:

index.html

. . .

<!--Section 5: Education and Skills-->

<div class="column-2a">
  <h2>Education</h2>
    <table class="table-style">
      <tr>
        <td>Barnacle Bootcamp</td>
        <td>2020</td>
      </tr>
      <tr>
        <td>Seaweed University</td>
        <td>2019-2020</td>
      </tr>
      <tr>
        <td>Highwater High School</td>
        <td>2018-2019</td>
      </tr>
      <tr>
        <td>Middle-Sized Pond Middle School</td>
        <td>2017-2018</td>
      </tr>
      <tr>
        <td>Minnow Elementary School</td>
        <td>2016-2017</td>
      </tr>
      <tr>
        <td>Phytoplankton Preschool</td>
        <td>2015-2016</td>
      </tr>
    </table>
</div>

css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size.