# Midterm Project: WebAppUI
Group Member: Yizhe Wu & Tianyi Dong

Web Title: __*Get a Job*__
Codepen URL: https://codepen.io/yw3710/collab/GRvpgXE

__INTRODUCTION__
*Get a Job* is a site that aims for helping college students to land a job after graduation. Finding a job is not an easy process because almost everyone has to send hundreds of resumes in order to hearback from companies. There are tons of website that can help people to land a job, however, we would like to specifically help students. We hope to create a platform for students to connect with other students from different schools but similar field of studies, we believe this can help each other to understand themselves better by knowing what they could have done to improve. In addition, our website will provide students with many different technical reousrces for them to prepare for interview questions.

Description
* Header
When users enter our page, they will see the `header` section first. There are three behaviours for users to interact with.

First, to make our webpage more user-friendly, we placed three anchor elements in the header for users to jump to their desired sections. For instances, **when users can click on the `Major` link, they'll be taken to the section of the webpage with the `My Major` header element. Meanwhile, we add `id` attribute with the value of `major` to `div` element, and give the href attribute a value `#major`. When the mouse click gesture is made, the computer will anchor the page to target elements.**
Second, with the help of a text field on top of the page, users will be able to search for information. **Users could enter the keyword of what they are interested in to text field, and push the button`search`, the page will detect it and show a new html page which includes all item related to the keyword in webapp database. When users enter their keyword, it would give a value to text field, as for pushing the button, the webpage will submit the value to backend for retrieve information** There is also an interaction about mouse gesture. **When the mouse hovers on the button element, the button will be changed to pink. The pseudo-class `hover` is added to `.btn` selector, which applys the pink color property to it for positive user feedback.**

* Profile
In this part, users could submit their own data to webapp to match the relevant resources available on the following pages.
We provided an element for users to their profile image on the left, this can be done by hovering and clicking on `Change profile image`. The color of text and the cursor will be changed when hover onto it as to strengthen visual feedbacks. This applies to all the buttons in this section.**
Moreover,in this`input-group` div elements on the right, the users are allowed to fill in all text-field to offer the page their personal information **Users will be entering personal information in the form, and click on the button`confirm`. The page backend will then remember the text line by line from these interaction activities. The `save` button element is designed to save all information that users provide. After these interactions, the webpage will process all relevant elements and show in `major`, `forum`, `tutorials` page. When users push the `save` button, the web will submit the value to backend for retrieve information**

* Majors
The **"My major"** section is designed for people who wants to learn technical skills from the field of studies they are in.

At the top of the section, users are able to search for the topics that are useful to them in the search bar. The current UI Web design has a list of suggestions of searches when users click on the search bar. In addition, there are some other popular searches beneath the search bar being promoted. If these promoted suggestions/filters contain users preferences, users are able to click on the button and turn on related learning topics.

The left side of the column beneath suggestions/filters are guidances for users to choose. They can choose guidance type such as related courses, textbooks, interview guidance, and other utilities. On the right side of the column, we designed to have several related topics based on users' choice and present them. When user hovers onto the primary button named `Go to check`, we will direct the users to a different page and users can learn from their chosed materials (At this moment, the button can still be clicked but we will direct users to external links in demo stage).

* Forum
The **"Forum"** section is designed for users to have discussions with other people who are also in similar field of studies, so they can know how to prepare for job hunting. Our inspiration came from popular websites such as Reddit, Piazza, and Quora etc. Sometimes, knowing what companies want can help people to be better prepared on landing a job because they can learn from others' successful experiences. If not, knowing failure experiences can also be worth noting for self reflections.

When users scroll to the forum section, there will be several discussion boxes that are sorted out based on users' field of studies and jobs they are interested in. Beneath the title in __bold fonts__ , we placed a few tags such as`Indie-game development` or `Game Design` so it will appear to a specific group of users forum discussion section.

If users want to participate in the discussion, the blue button on the bottom right at each discussion section can guide users to the discussion page. (It is not implemented at this moment)

At last, when users found the discussion userful, we have designed like and dislike button at bottom left of each discussion section(icon used from library source); this helps system to determine whether this discussion is meaningful and worth to be promote to other users' as well. The like and dislike button can be clicked on as well in our current UI design, it will present as blue if the `like` or thumbsup button is pressed and present as red if the `dislike` button is pressed. One can switch the button from like to dislike if it is being misclicked, and only one button can be selected.

* Tutorials
The **Tutorials** section runs similarly with forum except it is visual aid that people can share videos from internet or self produced videos for others to learn. This section is unlike my major section because it focuses more on how to prepare for interviews, portfolios, or knowledges of industry.

In this section, users will be able to see several videos that are also promoted based on users' preferences. After viewing the video, players can press the like or dislike button as to providing feedbacks on whether this specific tutorial is worth to be shared to every user who might be interested.

__Reflection__

During our development process, we realized that there were various things needed to be consider. The first would be interactive designs, which need us to put ourselves in user's shoes. Coming up with basic framework was not challenging, but it became complexed when we were deciding the button placements to make them look user friendly. HTML and CSS are still relatively new to us, despite we were given many resources to implement our ideas, there were always something we had to look up. In the process of addressing contradition between two elements or two properties, we get used to the rules of overriding and replacing, which help us to know the right solution to these problem and how to avoid such problems. In the future, we can't wait to use javascript to put our idea into reality.