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
Your page(s) must include the following layouts at least once.
Mobile Screen Width (Under 1000px)
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
Optional HTML Elements
- Any others not mentioned but learned.
Required CSS Properties
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.
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.