Everyone will be provided the same HTML template that contains various text elements but lacks any styling. Each group will be assigned a specific theme for the shared HTML template.
In your small groups, your task is to collaborate and style the shared HTML template using CSS to match your assigned theme.
Be prepared to present your styled version of the HTML template to the class. You should explain the CSS selectors and properties you used to achieve your theme.
In your small groups, ONE person should do the following:
- Click *here* to open the “style-challenge” repository.
- Click the “Fork” button (
) in the upper right corner. It will load a new page where you can just click the “Create fork” button at the bottom. A new page will appear with your own copy of the “style-challenge” repository. - Click the “Code” button and click on the “Codespaces” tab.
- Click the “Create codespace on main” button.
- It will take a few minutes to load! Wait for a pop-up box to appear in the bottom right corner asking if you want to install extensions and click the “Install” button.
- It will take a few minutes to install all the extensions! It has finished loading once your screen reloads with an index.html, style.css and web page with the template.
- In the bottom left corner, click on the “Accounts“ button (
). - In the drop-down menu, click the last option that says “Sign in with GitHub to use Deploy to GitHub Pages”. A new window will open but you can just close it.
The SAME person who did steps on the previous slide should do the following:
- Click the “Live Share” button (
). - Click the “Share” button (
). - A pop-up box may appear in the top left corner saying “See text and images copied to the clipboard”. Just click the “Allow” button.
- In the bottom right corner, a pop-up box will appear saying the invitation link has been copied.
- Send this invitation link to your group members so you can edit the same code together.
The group members that receive the invitation must do the following:
- Paste the link that you received into your browser.
- A pop-up box in the bottom right corner may appear (
). - Click the “Sign in” button.
- Click the “GitHub Sign in using GitHub account” option at the top of the page.
- Another pop-up box will appear. Just click the “Allow” button.
- In the next pop-up box, click the “Authorize Visual-Studio-Code” button and sign into your GitHub account.
- Click the “Extensions” button (
). - In the text box, copy and paste CodeSwing into it. It will refresh with only one item appearing called CodeSwing.
- Under CodeSwing, click the “Install” button (
). - After a few minutes, your page will reload with the shared code screen and output of your group.
Think creatively and use various CSS properties to bring your themes to life! Here are some resources for your group to use as you style your site: