SCMP 318 – HTML, CSS, and Bootstrap

Goal

The goal of this assignment is to learn HTML and CSS and Bootstrap. Rather then take time in class to learn this relatively simple topic, we will be using an online tutorial system called Code Academy. Parts of Code Academy are free while others require you register for $19 a month. We will not need the paid version, though you are free to pay for a pro account to get access to more content.

Once we are done with the course, you will use what we know to make a online resume.

We will be using “Bootstrap” in this course. Therefore it is important to learn how to build a site using this library.

Turn in

  • All code and link to resume web page

Step 1 – Learn HTML and CSS

Your first activity will be to go through the following Code Academy course(s):

  1. Make a website – HTML and CSS course
  2. (Optional) HTML Tutorial – a great resource
  3. (Optional) CSS Tutorial – also a great resource

Step 2 – Deploy a simple website to the server

Start with the following:

<!DOCTYPE html>
<html>
  <body>

     <h1>My First Heading</h1>

     <p>My first paragraph.</p>

  </body>
</html>

Now copy firstwebsite.html to the server:

  1. Make a folder on you web folder “/var/www/html/class/softdev/yourusername/web”.
  2. Upload the html file to the directory.
  3. Try it out by going there with the browser

Try it out

Now try it out:

  • Use a browser to go to jimskon.com.
  • Goto softdev
  • Go to your name
  • Open the “web” folder
  • open your new web page.

Now edit the html file with Atom to have your name instead of “My”. Save. See if the changes are there.

Step 3 – Bootstrap online resume

The second part of assignment is to learn expand our web knowledge with Bootstrap. Bootstrap is a library to enhance a website. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional extensions. Bootstrap supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).

You are to learn bootstrap by engaging in one or both of the following tutorials: Bootstrap, BootStrap Course, BootStrap Tutorial

Step 4 – Create a bootstrap resume

You will use what you learn to create a online resume. Here are some simple examples:

  1. Bootstrap tutorial
  2. Getting Started with Bootstrap
  3. 10 free Bootstrap HTML Resume Templates
  4. Bootstrap Resume Templates
  5. HTML 5 resume Templates

Here is an example using Bootstrap (the preferred method): Resume Example, Source

Your assignment is to create a nice looking webpage version of your resume. include the following features for full credit:

  • Multi columns
  • Tables
  • Multi colors
  • Backgound image or color
  • At least one image or icon (you will need to upload a file to the server)

Turn in

Your URL Links on Moodle

Scroll to Top