# Project 001 Web App UI_Showcase of Sanxingdui Museum
## Group 16: Yichen An, Alina Wang

Codepen URL:https://codepen.io/aw3486/collab/NWMJJzE

Problem:
***After viewing the showcase, students interested in Chinese archaeology will have a basic understanding of Sanxingdui Cultural Relics.***

Solution:
***Build a Web application user interface with HTML and CSS.***

Specifications:

Components that react to user interaction:

1. When users click on the button element on the nav bar, such as [Home], [Visit], and [Exhibition], they will directly visit the official website of Sanxingdui.

2. Clicking the [learn more] button element on the card part, users will connect to the page of Sanxingdui cultural relics. From there, users also can get more details and an introduction.

3. When the mouse gesture is made, carousel items will change.

Components users interact with:
1. Entering a value into the [search] field, use can search and choose the content they want to learn.

2. The sequence of the images is also essential. Even though two larger pictures cannot click, I like my team member's adjustment. Adding those larger pictures to the front of the learn more card is more likely to attract the learners' attention. If we put the larger pictures at the end, users may not be interested in going deeper. In addition, the overall layout of the page and the background color are also important. We also changed the background color and images in CSS a few times.

Reflection:
**what did you learn?
--When I coded, I used bootstrap as a reference to help me create web pages, especially the card and carousel items. Using bootstrap can help me save time coding when I am struggling. Bootstrap is valuable and helpful for creating HTML components. For example:
I found the components link[how to build card and carousel] on Bootstrap, and then I copied the link, and change conent and attributes part.***

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

**what was challenging?
***The biggest challenge is to combine everyone's thoughts. We come from different ideas, and it takes time to determine what we want the web page to look like. The solution we made is to start the easy parts and then see what we will have. Also, we have created different plans, such as plan A, only uses the card part. Plan B, only keep the carousel items. Plan C, put them together. We finally put all the details together and made them work.***

**How do you think you need to improve?
***To divide the big project into some chunks. And focus on a small part each time. For instance, I will concentrate on how to code the card part by using HTML on the first day and works on the head part for another day.
Or, I do some framework first and then add details to it.***

**What are the next steps forward for you and your learning?
***Most of the code I used is from bootstrap; about my future learning, I want to try and practice coding myself, especially on the CSS parts. FCC is a great learning resource because it provides step-by-step instructions.***