Frontend Starter Pack

This repository contains starter code for a basic HTML/CSS/Javascript website.

Intro

The frontend of a website boils down to 3 components:

• how the site is structured (HTML)
• how the site looks (CSS)
• how the site functions (Javascript/JS).

In this demo, we'll be using pure HTML/CSS/Javascript. It is a compilation of HTML, CSS, JS starting ideas and concepts that you can use for your ZotHacks project or whatever project you want.

How to get this code

1. We highly recommend installing Git and cloning the repository.

   Run this command to get all of the files in this repository:

   git clone https://github.com/HackAtUCI/zothacks-frontend-startercode.git

2. You could also download the code as a zip by clicking on the green "Code" button and clicking "Download ZIP".

   Then, you can extract into a folder and open the folder in your favorite code editor.

How to run your code

• You can drag the HTML file into your browser to see all of your changes!
• If you use VSCode, there are some extensions that make developing frontend apps much easier.

Extensions

Live Server

If you use VSCode, you can get the Live Server Extension.

Any change you make will be directly reflected in the website instead of you having to drag the HTML file into your browser again.

1. Navigate to the Extensions tab in VSCode, search for "live server", click the top option, and click on the blue install button in the top center.

2. Select index.html and click on the "Go Live" button in the bottom of VSCode. Your browser should automatically open with the HTML file rendered!

   

Congratulations! Now whenever you edit your HTML, CSS, or JS file, your changes are automatically reflected in your browser.

Try changing "Hello, world!" to something different and see your changes appear in the browser!

Live Share

If you use VSCode and need to collaborate on the same project (like in a hackthon!), you can get the Live Share Extension.

This allows multiple people to edit the same file at the same time, just like how multiple people can edit a Google Doc at the same time.

You can also use this with the Live Server Extension!

Note: The following steps will require 2 or more computers. One computer (Computer 1) has the code and this extension. Another computer (Computer 2) simply needs to connect to the session (will be explained in the next steps). All other computers can follow Computer 2's steps.

1. On Computer 1, navigate to the Extensions tab in VSCode, search for "live share", click the top option, and click on the blue install button in the top center.

2. On Computer 1, click on the "Live Share" button in the bottom of VSCode. Click the button. You will be prompted to sign into GitHub or Microsoft.

3. Once you sign in, you will see a notification starting a session and later, Invitation link copied to clipboard!. Send this link to Computer 2.

4. On Computer 2, navigate to the link. You can choose to open VSCode locally or use the web. You may be asked to sign in.

5. On Computer 1, you will see a notification to approve someone to join the collaboration session. Click "Accept read-write" so Computer 2 can edit the files.

6. On Computer 2, you will see that the same code from Computer 1 shows up with Computer 1's cursor active.

Congratulations! You can now have multiple users edit the same files at the same time!

Notes about HTML

There are a few things we want to point out about HTML files. You can look at the comments in index.html for detailed examples and explanations.

1. Overall structure

Everything is composed of tags. Notice how the title tag here has an opening and closing tag to enclose the title.

<title>My App</title>

Everyting is composed of tags and nested tags. Nesting simply means we place a tag inside another. In this example, the img image tag is placed in the a anchor tag:

<a href="https://youtu.be/GtL1huin9EE">
    <img id="petr" src="petr.png" alt="petr"/>
</a>

2. Linking CSS

Near the top of index.html, you'll see this:

<link rel="stylesheet" href="styles.css" />

This code allows the styles from styles.css to affect your html code. Note that styles.css is its own file in the same folder as index.html.

3. Linking JS

Near the bottom of index.html, you'll see this:

<script src="script.js"></script>

This code allows the javascript code from script.js to affect your html (and maybe css) code. Note that script.js is its own file in the same folder as index.html.

Resources

Google and documentation are your best friends!

• Don't know what an HTML tag does? Look it up or go to the MDN Docs.
• Don't know what a selector is or what certain styles do? Look it up or go to the MDN CSS Docs.
• Don't know what some javascript function does or how to add interactivity to your HTML file? Look it up or go to the MDN JS Docs.

If you've never built a website before, here are a few resources to get you started.

• What is an API?
• How to Make API Requests: Get data using a frontend.
• HTTP Requests: How the internet communicates. Whenever you go to a URL or submit a form, there is a request that is sent to get or change information.

If you're feeling more advanced, here are some other resourses to expand your front end knowledge,

• Bootstrap - CSS library that containing preset styles
• SASS/SCSS - CSS scripting framework that can potentially give you a more intuitive view on CSS (nested CSS)
• Flexbox - Allow you to structure and space out your elements in pure CSS. You can see this in action when you are using the display: flex; styling in your container element.
• React - A JavaScript framework that allows you to build your website using the idea of components.