Computer Science 318

Fundamentals of Web Design

Lab 18


Use previous labs to complete requirements


Reference previous labs when you need assistance.


Pick a topic you would like to make a website for. (Must be a different topic than lab 3 and 6)

Open GitHub Desktop

Create a new folder called lab18

Create a new file called index.html plus any other pages you wish.
*If you do a one page website you need to have jump links to different areas on the webpage.

Setup your HTML file(s)

Create your stylesheet

Link your stylesheet to the HTML

Required Layout

Your page(s) must include the following layouts at least once.

Mobile Screen Width (Under 1000px)

One Column

Desktop Screen Width (Over 1000px)

1/3 2/3 Columns

Lab 18 1/3 2/3 columns

1/3 1/3 1/3 Columns

Lab 18 1/3 columns

*Columns can be images, text, or a combination

Required HTML Elements

Optional HTML Elements

Required CSS Properties
transition-timing function

CSS Requirements
You are required to use/create:

:before or :after
a css animation which includes:

Website must look good on mobile screen sizes and desktop screen sizes. Once you are satisfied with your work, go through the final checklist.

Final Steps

Validate your HTML.

Lint your CSS at

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab18 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab18

Are you someone who needs to double check that it worked? If you want to make sure the push was successful click on the "View on GitHub" button from GitHub Desktop. It will open up your repository in the browser. From there you should be able to see all of your files.

...What if I need to make a change after pushing?

So let's say you have already pushed but noticed an error. No worries, this is easy to fix.

In visual studio code make any changes you need to. Once you are done making corrections. Save.

Go back to GitHub Desktop. You should see your changes to the documents listed there.

GitHub fixing an error.

Fill out the Summary field again. I suggest saying what you fixed. For example: "Fixed paragraph error on Sea-Jellies"

Click "Commit to main"

Click "Push Origin" and you are done.