gwcuva/gwc-website

# Introduction to Web Development
## An Assortment of References

**Table of Contents**:
* [New To Web Development](#if-youre-new-to-web-development)
* [Know HTML and CSS](#if-you-know-HTML--CSS)
* [Know JavaScript too!](#if-you-already-know-javascript-too)

### If you're new to web development...
If you're new to web development, **congratulations** on starting your journey!

There are two main languages that you'll start off with: [HTML](https://www.w3schools.com/html/html_intro.asp) and [CSS](https://www.w3schools.com/css/css_intro.asp).

The best way to learn imho is to make your own website from scratch. Try replicating a plain website on your own, such as [Google](https://google.com)!
Here are some important things to look up how to do:

**HTML**
* Make headers and paragraphs
* Embed links
* Add in images (don't forget [a11y](https://www.a11yproject.com/))
* Read over how you can make your [website more accessible](https://webaccess.berkeley.edu/resources/tips/web-accessibility)
* How to make a list (numbered + bullet points)
* Read over this general [guide](https://webaccess.berkeley.edu/resources/tips/web-accessibility)

**CSS**
* Change fonts
* Change color of different headers, paragraph, and links
* Change image size
* Learn [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

If you prefer more of a guided path, check out [freeCodeCamp's Responsive Web Design Curriculum](https://www.freecodecamp.org/learn/responsive-web-design/#basic-html-and-html5). This is a great crash course that covers the practical parts of HTML + CSS!

### If you know HTML + CSS
This is an important time to get started with Javascript! [W3Schools](https://www.w3schools.com/js/DEFAULT.asp) has a tutorial on it, but honestly, if you know Java and Python, you can probably just skip to the React section and google anything you need to know in JavaScript. 

Remember the logic is pretty similar, the syntax is different -- you know when to use a for loop (or check out a `map` method in JavaScript), you'll just need to google the syntax.

### If you already know JavaScript too!
Time to learn about React, especially within this project!

Here's a [tutorial](https://reactjs.org/tutorial/tutorial.html) to help get you started.

I'd also recommend reading the [React Documentation](https://reactjs.org/docs/getting-started.html) as it's well-documented and answers a lot of questions!

**Some general tips**
* Make small components; no render function should be large and do a lot of computation. Read about function components [here](https://reactjs.org/docs/components-and-props.html).
* Components go in their own folder
* Make styled components separately and avoid CSS *unless* it's a general class that you'd want to apply several places in the code, such as text color or font family