Computer Science 318

Practice

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

1/3 1/3 1/3 Columns

*Columns can be images, text, or a combination

Required HTML Elements
header
nav
main
img
a
p
h1
footer

Optional HTML Elements

• h2-h6
• div
• span
• article
• section
• ol
• ul
• table
• Any others not mentioned but learned.

Required CSS Properties
color
background-color
font-family
padding
margin
transition-property
transition-duration
transition-timing function
background-image
background-size

CSS Requirements
You are required to use/create:

:hover
:before or :after
a css animation which includes:

• animation-name
• animation-duration
• animation-timing-function
• animation-iteration-count
• animation-direction
• Keyframes

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.

• Navigate to W3C Validator
• Select the validate by file upload tab at the top of the page

Lint your CSS at Jigsaw.w3.org

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

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.

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"

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.

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.