Update

WilliamsStudentsOnline · May 6, 2020 · eff5bad · eff5bad
1 parent 4e5a13c
commit eff5bad
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 8 deletions.
diff --git a/Basic Tools/Developer Tools.md b/Basic Tools/Developer Tools.md
@@ -17,9 +17,9 @@ The window is split into three sections.
 
 ![HTML](Images/HTML.png)
 
-This section shows the HTML that is generated for that particular webpage. Note that if you were to select or mouse-over the HTML components here, the corresponding element in the webpage will get highlighted.
+This section shows the HTML that is generated for that particular webpage. Note that if you were to select or mouse-over the HTML components here, the corresponding element in the webpage will get highlighted. Use this feature to understand how HTML elements are organized, and learn from them for your websites.
 
-This section is also editable
+This section is editable, and you can add or remove html elements to see their impact on the final window! 
 
 ### CSS Rules
 

diff --git a/Personal Website HTML/README.md b/Personal Website HTML/README.md
@@ -10,11 +10,16 @@ Suggested Time: 1 week
 2. [Setting Up](#setting-up)
 3. [Helpful Tips](#helpful-tips)
 4. [Further Extensions](#further-extensions)
+5. [Past Submissions](#past-submissions)
 
 
 ## Requirements: 
 
 1. Must be responsive to mobile (e.g. Resizing the browser window up to a minimum width of 480px should still allow for all content to be seen)
+1. Must include at least one CSS:hover ability
+1. Must include at least one CSS animation
+
+Note that requirements 2 and 3 are meant for your front-end lead to see that you can use various CSS features, and can be removed afterwards should you not want them in your final product.
 
 ## Setting Up:
 
@@ -33,11 +38,23 @@ $ touch index.html styles.css sample.html sample-styles.css
 
 At this point, you should be all set to develop!
 
-5. Develop your website, while ensuring to commit your changes along the way
+5. Develop your website, while ensuring to commit your changes along the way. Past submissions from other students can be found [below](#Past-submissions). 
+6. You might feel completely lost, and that is fine - start simple.
+    * Sketch out what you want to do to see how things are organized.
+    * Get inspiration from how other websites organize their information via [inspect element](../Basic%20Tools/Developer%20Tools.md)
+    * Mess with the starter code provided in `sample.html` and `sample-styles.css`
+    * Look out some online tutorials
+    * Ask your front-end lead! 
 
 ## Helpful Tips:
 * Ensure Responsive Design:
     * Remember to avoid using absolute numbers for most widths/heights where possible.
     * Look into CSS grid/ flexbox for help with responsive design.
     * Consider using em/rem for font sizes, although they may not be necessary most of the time.
 * Know how to use your Developer Tools!
+
+## Past Submissions:
+Found below are submissions from students who have previously completed this project, and consented to sharing their repository here. Note that they might have completed the project with different requirements, but nonetheless are good resources to see how other people might have tackled this project.
+
+1. Matthew Schleifman's Hangman Website - [Code](https://github.com/mas19/hangmanwebsite) [Website](https://mas19.github.io/hangmanwebsite/)
+1. Elijah Tamarchenko's Personal Website - [Code](https://github.com/Conqueror1776/Simplistic-Personal-Website) 
diff --git a/Personal Website React/README.md b/Personal Website React/README.md
@@ -1,6 +1,6 @@
 # Create your own personal website (React)
 
-This week, we'll be trying to create our own page on github. While it can serve also as some online presence/ online resume, it is also important for front-end developers to display some of our projects online so that people can look at them and for you to have something to be proud of :)
+This week, we'll be trying to create our own page on github. While it can serve also as some online presence/ online resume, it is also important for front-end developers to display some of our projects online so that people can look at them and for you to have something to be proud of :) This project mainly focuses on creating components and **styling**, rather than all the other cool features React has.
 
 Suggested Time: 1 week
 
@@ -15,7 +15,7 @@ Suggested Time: 1 week
 2. [Setting Up](#setting-up)
 3. [Helpful Tips](#helpful-tips)
 4. [Further Extensions](#further-extensions)
-
+5. [Past Submissions](#past-submissions)
 
 ## Requirements: 
 
@@ -25,6 +25,7 @@ Suggested Time: 1 week
     * Material Design (https://material-ui.com/)
     * Elastic UI (https://github.com/elastic/eui)
     * Fomatic UI (https://fomantic-ui.com/)
+    * Grommet (https://v2.grommet.io/)
     * Any other library you find
 
 Challenge: Create a different branch and format everything using just pure CSS. 
@@ -85,7 +86,7 @@ nothing to commit, working tree clean
 
 At this point, you should be all set to develop!
 
-13. Type `yarn start` and begin to develop your website in React! Refer to the [crash course document](react-crash-course.md) for some guidance. Starter code using the Elastic UI library, as well as instructions is available in the starter code folder - refer to the [README](./Starter%20Code/README.md).
+13. Type `yarn start` and begin to develop your website in React! Refer to the [crash course document](react-crash-course.md) for some guidance. Starter code using the Elastic UI library, as well as instructions is available in the starter code folder - refer to the [README](./Starter%20Code/README.md). Past submissions from other students can be found [below](#Past-submissions).
 
 **Deployment**
 
@@ -105,3 +106,7 @@ At this point, you should be all set to develop!
 
 Recreate your personal website with Gatsby (gatsbyjs.org/)! Gatsby offers Search Engine Optimization, routing, and image optimization, which can improve the performance of your website.
 
+## Past Submissions:
+Found below are submissions from students who have previously completed this project, and consented to sharing their repository here. Note that they might have completed the project with different requirements, but nonetheless are good resources to see how other people might have tackled this project.
+
+1. Kaizen Conroy's Personal Website - [Code](https://github.com/kaizen3031593/kaizen3031593.github.io/tree/source) [Website](https://kaizen3031593.github.io/)
diff --git a/Personal Website React/Starter Code/README.md b/Personal Website React/Starter Code/README.md
@@ -2,7 +2,7 @@
 
 ## Setup
 
-1. Install yarn at https://yarnpkg.com/
+1. Install yarn at https://yarnpkg.com/getting-started/install
 1. `cd <project folder>`
 1. `yarn add @elastic/eui @elastic/datemath moment`
 1. Copy the starter files `App.css, App.js, Header.js, PageSection.js` and override what you have in the file.

diff --git a/README.md b/README.md
@@ -16,11 +16,13 @@ If you have any suggestions with regards to how this repository can be improved,
 Quickly skim through this document to get an idea of the basic tools. Understanding and installing all of them is highly recommended, but they are not essential for the rest of the projects.
 
 1. [Basic Tools](Basic%20Tools/Basics.md)
+1. [Prototyping](Prototyping/README.md)
+1. [Additional Thoughts on Web Design]
 
 ## Project List
 
 1. [Creating a personal website](https://github.com/WilliamsStudentsOnline/wso-frontend-training/tree/master/Personal%20Website%20HTML) [HTML/CSS]
 1. [Creating a personal website and publishing it to GitHub.](https://github.com/WilliamsStudentsOnline/wso-frontend-training/tree/master/Personal%20Website%20React) [React]
 1. [Hacker News Application](https://github.com/WilliamsStudentsOnline/wso-frontend-training/tree/master/Hacker%20News%20Application) [React/Redux/Jest]
-
+1. [Typescript](https://github.com/WilliamsStudentsOnline/wso-frontend-training/tree/master/Typescript) [Typescript]
 
diff --git a/Typescript/README.md b/Typescript/README.md
@@ -0,0 +1,11 @@
+# Typescript
+
+We will be building on the previous project and converting it into [Typescript](https://www.typescriptlang.org/), which is a typed superset of Javascript that compiles to plain Javascript. This is beneficial for our projects because it allows our compiler and code editor to perform static checking and ensure that we are passing the correct parameters in our code. 
+
+
+A tutorial can be found [here](https://www.typescriptlang.org/docs/home.html).
+
+Suggested Time: 1 week
+
+## Pre-requisites
+* Should have done the Hacker News Application project