Week 4 - May 8th, May 12th

Saturday May 8th

Reviewed Grid/Flex exercise

Grids/Flex

Worked on the New Site - there are three sub-sections within the Building a News Site. All three should be complete.

Building a News site

Class Video

Homework

No homework to turn in this week. But make sure you have finished the News site we worked on today in class because we'll being using that same code when we start to work with React.

For our next class, we're going to work through two or three of the mock-ups from front-end mentors.

Wednesday May 12th

Did two front-end mentors challenges

Solution

@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");

body {
  --cyan: hsl(179, 62%, 43%);
  --cyan-lighter: hsl(179, 47%, 52%);
  --yellow: hsl(71, 73%, 54%);
  --lightGrey: hsl(204, 43%, 93%);
  --blueGrey: hsl(218, 22%, 67%);
  --white: hsl(69, 69%, 100%);

  background-color: var(--lightGrey);
  font-family: "Karla", sans-serif;
  color: var(--white);

  display:flex;
  justify-content: center;
  align-items:center;

  padding:100px 80px;
}

h1 {
  color: var(--cyan-lighter);
}

h2 {
  color: var(--yellow);
}

h3 {
  color:white;
}

.card {
  width: 500px;
}

.card > div {
  padding:30px;
}

/************************** join ******************************/

.join {
  background-color: var(--white);
  color:black;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  grid-area:join;
}

.join p {
  color: var(--blueGrey);
}

/************************** subscribe ******************************/

.subscribe {
  background-color: var(--cyan);
  grid-area:subscribe;
}

.subscribe .pricing {
  display:flex;
  flex-direction:row;
  align-items:center;
}

.subscribe .pricing .price {
  font-size:32px;
  font-weight:700;
  margin-right:5px;
}

.subscribe .pricing .description {
  color: #daffff;
}

button {
  padding:16px;
  width:100%;
  background-color: var(--yellow);
  border:0px;
  border-radius: 8px;
  color:white;
  font-size:16px;
  font-weight:700;
  box-shadow: 5px 5px 10px rgb(0,0,0,.1);
}


/************************** why-us ******************************/

.why-us {
  background-color: var(--cyan-lighter);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  grid-area:why-us;
}

.why-us ul {
  list-style:none;
  margin:0px;
  padding:0px;
  color: #daffff;
}

@media screen and (min-width: 600px) {
  .card {
    display:grid;
    grid-template-areas:
    "join join"
    "subscribe why-us"
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | Single Price Grid Component</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <div class="join">
      <h1>Join our community</h1>
      <h2>30-day, hassle-free money back guarantee</h2>
        <p>
          Gain access to our full library of tutorials along with expert code reviews.
          Perfect for any developers who are serious about honing their skills.
        </p>   
    </div>
    <div class="subscribe">
      <h3>Monthly Subscription</h3>
      <div class="pricing">
        <span class="price">&dollar;29</span> 
        <span>per month</span>
      </div>

      <p class="description">
        Full access for less than &dollar;1 a day
      </p>

      <button> Sign Up</button>
    </div>
    <div class="why-us">
      <h3>Why Us</h3>
      <ul>
        <li>Tutorials by industry experts</li>
        <li>Peer &amp; expert code review</li>
        <li>Coding exercises</li>
        <li>Access to our GitHub repos</li>
        <li>Community forum</li>
        <li>Flashcard decks</li>
        <li>New videos every week</li>
    </ul>
    </div>
  </div>
</body>
</html>

Solution

body {
  background-color: hsl(0, 0%, 98%);
  font-family: "Poppins", sans-serif;
}

main {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;

  padding: 60px;
}

.heading1 {
  font-size:22px;
  color: hsl(229, 6%, 66%);
  font-weight:400;
}

.heading2 {
  font-size:25px;
  color: hsl(234, 12%, 34%);
  font-weight:500;
}

.description {
  color: hsl(229, 6%, 66%);
  text-align:center;
  width:500px;
  margin-bottom:60px;
}

@media screen and (min-width:600px) {
  .cards {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    align-items:center;
    grid-gap:20px;
  }
}

.card {
  border-radius:5px;
  padding:30px;
  margin-bottom:30px;
  box-shadow: 1px 5px 15px 5px hsl(229, 6%, 66%);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.card .title {
  font-weight: 600;
  color: hsl(234, 12%, 34%);
}

.card .desc {
  color: hsl(229, 6%, 66%);
  margin-bottom: 30px;
}

.card img {
  align-self:flex-end;
}

.supervisor {
  border-top: solid 3px hsl(180, 62%, 55%);
}

.team-builder {
  border-top: solid 3px hsl(0, 78%, 62%);
}

.karma {
  border-top: solid 3px hsl(34, 97%, 64%);
}

.calculator {
  border-top: solid 3px hsl(212, 86%, 64%);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Four card feature section</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
      <div class="heading1">Reliable, efficient delivery</div>
      <div class="heading2">Powered by Technology</div>
      <div class="description">
        Our Artificial Intelligence powered tools use millions of project data points
        to ensure that your project is successful
      </div>

    <div class="cards">
      <div class="card supervisor">
        <div class="title">Supervisor</div>
        <div class="desc">Monitors activity to identify project roadblocks</div>
        <img src="images/icon-supervisor.svg" alt="">
      </div>
      <div>
        <div class="card team-builder">
          <div class="title">Team Builder</div>
          <div class="desc">Scans our talent network to create the optimal team for your project</div>
          <img src="images/icon-team-builder.svg" alt="">
        </div>
        <div class="card karma">
          <div class="title">Karma</div>
          <div class="desc">Regularly evaluates our talent to ensure quality</div>
          <img src="images/icon-karma.svg" alt="">
        </div>
      </div>
      <div class="card calculator">
        <div class="title">Calculator</div>
        <div class="desc">Uses data from past projects to provide better delivery estimates</div>
        <img src="images/icon-calculator.svg" alt="">
      </div>
    </div>
  </main>
</body>
</html>

Introduced Binary Number System

Class Video

Homework

No homework assignments this week. Just use the time to review the two front-end mentor challenges we did.

Also, understanding how binary and hexadecimal numbers work is an important skill. I added a few more videos to the page within the JavaScript gitbook I showed during class. There are several general videos that I think do a good job of explaining the concepts and I also included links to the recordings I made that correspond to the slides I showed today during class.

I recommend you review the videos in the Resources section to see if the concepts become clearer with a few different ways of explaining them.

PreviousWeek 3 - May 1st, 5thNextWelcome to MERN Full Stack

Last updated