Part 6: 30 min

Table of Contents:

Let’s do a quick rundown on what we’re gonna do in this section. We are going to:

1. Go through some style choices, and how to make your project unique
2. Centering your divs, changing fonts, adding a colorful background
3. Go through how to submit your project on the form to earn artifacts

Section 1: fancy schmancy

I am so proud of you, acolyte. You are AL. MOST. THERE! Now that you have most of the requirements for your app, we’ve approached the super fun part, with very little instruction from me: design.

Your app needs to be your own. I’m gonna go through how to:

1. Make the content on your app centered
2. Add a title and change fonts and colors

First, we’re going to center all of our elements by changing CSS on our container div - remember that from Part 1? All of your elements (canvas, buttons, inputs, etc.) should be inside that div:

<div id=”container”>
… //all of your HTML elements!!
</div>

To line them up, go into your styles.css file, and a section to edit the container div (which has an ID of container).

Now, inside of that section, we’re going to use the following methods:

display: flex;

height: 100vh;

justify-content: center;

align-items: center;

text-align: center;

flex-direction: column;

gap: 10px;

I’m not going to give you the exact CSS code to use here… think of this as a challenge to use the methods I’ve given you and play around. Learn the Hack Club way: by figuring it out.

Next, we’re going to add a title for our app and change its font and color to something cool. First, add the title in HTML, inside of our container div (so it gets centered). You can add a heading using the <h1></h1> tag, putting the title text inside.

To refer to an entire type of element in CSS, not just the ID or class, you’ll just add the element's name in styles.css, and then with your style code inside.

The styles you might want to use use here:

color: blue;

font-family: Arial, Helvetica, sans-serif;

I used all of the methods above in my stylesheet to customize my site. Here’s my end result!

Now that I’ve gone through my suggestions, here are some ideas on what you could customize on your own. W3Schools is my favorite site for finding CSS inspiration. Go off and explore!

• Background images
• Canvas background colors
• Types of text/headings

Section 2: time to ship!

🎉🥳 WHOOP WHOOP WHOOP PARTY TIME PARTY PARTY TIME 🥳🎉

(full credit to @msw for the gif)

You’ve done it! You’ve made an amazing web app, customized it, and now you’re about to ship it! If you’re new to Hack Club, shipping is a term for when you don’t just code a project, but you publish it on the internet for all the world to see!

In addition, if you’re completing this project for the Athena awards, by shipping this project, you’ll earn artifacts (which you can redeem for laptops, iPads, etc…) not to mention hours towards your certificate and flight to NYC 🛩️🏙️

We’re going to publish our sites to a URL using GitHub Pages. To do so, follow these steps:

1. Go to your GitHub repository

2. Go to Settings

3. On the left menu bar, click on Pages

4. Under Build and Deployment, then under Branch, click on None and in the dropdown, select Main

5. Refresh the page, then click the URL after “Your site is live at…” at the top

6. Congrats! You have successfully shipped your very-own web app!!

Section 3: Pick Me. Choose Me. ReadMe.

Remember that pesky README file we created when we initialized our repository? Now's our time to use it!

Go back to your GitHub repository, and click on the file README.md.

Inside it, include some info about your project! README's are written in Markdown, so you can include plain text here, but if you want some extra features (like headers, bolding text, links, etc.) check out this link. Here are some ideas to get started:

1. a creative title for your project
2. how long it took you to create the project
3. what languages/tools you used to create your project
4. how a user should use your web app
5. contact information in case someone has questions about your project
6. why this project interested you
7. specific features that you want to highlight

Then, when you're done, don't forget to click the green "Commit Changes" button in the top righthand corner!

Section 4: Athena Awards

If you have done this project as on the Athena Awards guided track, go to oscillart.athena.hackclub.com to find the form to submit your project for artifacts!