Jong Cha

Unit 2: School and Technology | Coding & Programming
Tab_5572

Codepen.io link

Jong Cha

http://codepen.io/cha20084/pen/NRxbXp?editors=1100#0

Reflection

Jong Cha

    To meet my AT Math coding requirements for the unit, I built a small webpage using basic html and css coding on codepen.io. The webpage includes a title, image, table, ordered and unordered lists, and a carousel of pictures.

 

    Putting in the elements of the webpage was not big of a challenge, but styling them to look nice with css coding was a challenge. At first, I styled the background light blue and made the title bold, purple, and aligned onto the center of the page. However, when I added the html coding for the carousel, the styling for the background and the title seemed to disappear. It seemed like the problem was either that the coding for carousel included tags that corresponded to the css coding, or that the coding for carousel had bootsrap, a shortcut for css, that messed with the css coding itself. To fix the problem, I used id tags for the title and body, and used css styling on those specific tags. This helped solve the problem.

 

    Another problem I came across was that I couldn’t get the lists to get aligned to the center. I was able to get the words of the list aligned, but the numbers and bullets itself didn’t seem to get aligned. To fix this problem, I put the lists into a div, and then aligned the div to the center, which solved my problem.

 

Webpage Code

Jong Cha

HTML

 


<html>
  <head>
    <meta charset="UTF-8">
    <title>A Pen by  Jong Hyun Cha</title>
    <link rel="stylesheet" href="css/style.css">
    </head>

  <body>

    <html>
<body id="bg">
    <head>
        <h1 id="Title">
            Hello DP
        </h1>
    </head>
<p align="center">
  <img src="https://yt3.ggpht.com/-BNai2L2CCEE/AAAAAAAAAAI/AAAAAAAAAAA/mKilsQ9YirI/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" width=200>

</p>
  <h2 align="center"><b>Darlene Bio</b></h2>
  <table align="center">
    <tr>
        <th>Birthday</th>
        <th>Gender</th>
        <th>Favorite Subject</th>
        <th>Interesting Facts</th>
    </tr>
    <tr>
        <td align="center">September 17, 1986</td>
        <td align="center">Female</td>
        <td align="center">Math</td>
        <td><a href="http://www.darlenesean.com/">DP's Special Day</a></td>
    </tr>
</table>


<div class="box">


<h2 align="center"> Reasons Why DP is Awesome</h2>
<div class="list">
  <ol>
        <li >She is incredibly smart.</li>
        <li>She has a pure love for math math math.</li>
        <li>She can relate to her students, and give them earnest advice.</li>
    <li class= amazing><b>So cute!</b></li>
    </ol>
  </div>

<h2 align="center"> Best Qualities of DP</h2>
<div class="list">
  <ul>
        <li> Empathy</li>
        <li> Intelligence</li>
        <li> Her smile</li>
    <li class = amazing> <b>Cuteness</b></li>
    </ul>
  </div>
</div>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://a1-images.myspacecdn.com/images03/32/caa630fe45ea40bf890b55a881e64019/300x300.jpg" alt="Singing">
    </div>

    <div class="item">
      <img src="https://lh4.googleusercontent.com/-X8IjTWFUwuU/AAAAAAAAAAI/AAAAAAAAAR0/on7q-1-8U-0/photo.jpg" alt="Big Eyes">
    </div>

    <div class="item">
      <img src="http://universalwebsites.theknot.com.s3.amazonaws.com/UniversalWebsites/PageMainImage/5277187612331810/2913218/42270497/med/SeanDarlene-DipKiss.jpg" alt="Cute">
    </div>

    <div class="item">
      <img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAajAAAAJDg0YjhhYTljLTM5NWMtNDkyNS1iNGIwLTNmODcxZmI5NzMxNQ.jpg" alt="Smile!">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>
</html>

 

 

  </body>
</html>

 

 

 

CSS

 

#bg {
  background-color:  #add8e6
}
img{
  align: center;
}
#Title {
  text-align: center;
  color: purple
}
#dpPhoto{
  align: center;
}

.box { margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
     }
.list {
  margin: auto;
width: 60%;
padding: 10px;
}
table {
  border-collapse: collapse;
}
table, td, th {
  border: 3px solid black;
  text-align: center;
}

th {
  background-color: black;
  color: white;
}

a{
  color: red;
}
.amazing{
  color: purple;
}