---
tags: mstu5003, tinker, wk2, bootstrap, html, css
---

<div class="banner">
<h1 style="color: skyblue;">Web App UI </h1>
<h4 style = "color:gray;"> Group 2 | Ryan Yong Choi, Jinny Park, Meredith Renda & Chi Zong </h4>

:::info
CodePen Collab:
<strong>Final: </strong>https://codepen.io/cz2709/pen/dydjoNB??editors=110
<br>Trials:
https://codepen.io/yjp2110/collab/BaYVqdp
:::

### Problem

>Define a simple problem that your audience (you choose) desire and articulate it in a sentence:

>Create a simple and efficient interface that offers visual representation of users online course content and progress.

### Solution
>Through utilizing components such as progress bars, alerts, and badges, our users will be provided a better experience and interaction with their course progress. The components will promote an environment of goal-oriented behavior where users receive a snapshot of what content areas need focus, where they are seeing success, and offer future content suggestions, based on the users. Additionally, using a framework like Bootstrap is a quick way to get a responsive CSS tenplate. Without the template, it would probably take hours to program manually.

### Specifications

>Our mock-up represents multiple pages of the app.
>We utilized Bootstrap's responsive grid system so the site would scale appropriately, creating a dynamic experience on any type of user device.

>The user would begin to create their presence by signing up for Khan Academy- inputing email, name, age, grade level, This data will be utilized in the My Profile section of their account.

>The users are prompted to customize their experience by choosing preferred courses by utilizing the Preferences check box. After submitting their preferences wih the Submit button, they user have suggested courses that they can begin to interact with. These courses can be spread out over time, leting the user approach them in sections.

>As the user begins to interact with the courses and work through the lesson videos, challenges and projects, we will be able to provide information on progress, which can be accessed by the top navigation Progress button. In addition to the Progress button, users can navigate to their Profile, Courses, and Teachers. The Courses and Teachers button have a badge to notify the user of any Course updates or New messages from Teachers.

>

### Challenges
>Challenge 1: applying popovers to our Courses and Teachers buttons that have badges in columns 3 and 4.
>Solution: Applied

<div class="container" id="user-input"</div>

>Challenge 2: Creating aesthetically pleasing progress bars for Class Progress
>Solution: Adding height to the style

<div class="progress" style="height: 25px;>"</div>

>Challenge 3: Even spacing of the top buttons
>Solution: Margin padding

.progress

{padding: 25px 50px 75px 100px;

}
.btn
{margin-left:10px;}

}
.ml-1
{margin-left: ($spacer * .25)

!important;
}.p-3 {padding: $spacer !important;

}

>Challenge 4: Challenge 4 is a post script of Challenge 2: We would like the progress bars to stand out so it's one of the first items users refer to when they access their progress page.
>Solution: progress-bar-animated

>Challenge 5: After adding subject areas the formatting seemed to be off. After tinkering around, we realized that instead of four columns, we only need 3. Each column we want to make it 4/12. The 3 columns are nested inside the big row class. Then inside each col-4, we added all of the subject areas

<div class="row mb-3">
<div class="col-4">
<div class="form-check row"

---