search

AgileNix / coderslang-feedback

This repository serves for collecting public feedback on our Full Stack JS course
https://js.coderslang.com
8 stars 6 forks source link

TASK 2251 | STAGE 11 (a missed stage or I'm stuck?) #177

Closed ssfxate closed 3 years ago

ssfxate commented 3 years ago

The question is about all failed checks. When and where have I missed the tasks|requirements to do all of them?

Checks are

For the code

<!DOCTYPE html>
<html>
  <head>
    <title>Mining Empire</title>
    <style>
      body {
        margin: 0px;
      }
      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0px 40px;
      }
      .logo {
        width: 50px;
        height: 50px;
      }
      a {
        color: #FDB848;
        font-family: Tahoma, sans-serif;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 700;
        margin-left: 20px;
      }
      #about {
        background-color: #E4ECEE;
      }
      .section {
        display: flex;
        padding: 40px;
      }
      .section-description {
        padding: 0px 150px;
        flex-grow: 1;
      }
      .section-image {
        padding: 0px 150px;
        display: flex;
        justify-content: center;
        flex-grow: 1;
      }
      .image {
        position: relative;
        bottom: -40px;
        height: 480px;
      }
      .description-header {
        font-family: Tahoma, sans-serif;
        font-weight: 600;
        font-size: 2.2rem;
        line-height: 2.8rem;
        color: #363f41;
      }
      .description-part {
        margin-bottom: 16px;
        font-family: Tahoma, sans-serif;
        font-weight: 300;
        font-size: 1.2rem;
        line-height: 1.7rem;
        color: #363f41;
      }
      .platform {
        height: 40px;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <img class="logo" src="images/logo.png" alt="">
      <div class="links-container">
        <a class="nav-item" href="#about">About app</a>
        <a class="nav-item" href="#download">Download</a>
        <a class="nav-item" href="#learn">Learn with us</a>
      </div>
    </div>
    <div id="about" class="section">
      <div class="section-description">
        <h2 class="description-header">Mining Empire</h2>
        <div class="description-part">Mining Empire is an addictive incremental game where your progress accelerates the more you play.</div>
        <div class="description-part">Become a great Miner and get cash in this clicker adventure game.</div>
      </div>
      <div class="section-image">
        <img class="image" src="./images/screen1.png" alt="">
      </div>
    </div>
    <div id="download" class="section">
      <div class="section-image">
        <img class="image" src="./images/screen2.png" alt="">
      </div>
      <div class="section-description">
        <h2 class="description-header">Download App</h2>
        <a target="_blank" href="https://apps.apple.com/us/app/coderslang-learn-programming/id1489105103"><img class="platform" src="./images/appstore.svg" alt=""></a>
        <a target="_blank" href="https://play.google.com/store/apps/details?id=com.coderslang.com&hl=en&gl=US"><img class="platform" src="./images/googleplay.png" alt=""></a>
      </div>
    </div>
  </body>
</html>

After stage 10 I had the code

<!DOCTYPE html>
<html>
  <head>
    <title>Mining Empire</title>
    <style>
      body {
        margin: 0px;
      }
      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0px 40px;
      }
      .logo {
        width: 50px;
        height: 50px;
      }
      a {
        color: #FDB848;
        font-family: Tahoma, sans-serif;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 700;
        margin-left: 20px;
      }
      #about {
        background-color: #E4ECEE;
      }
      .section {
        display: flex;
        padding: 40px;
      }
      .section-description {
        padding: 0px 150px;
        flex-grow: 1;
      }
      .section-image {
        padding: 0px 150px;
        display: flex;
        justify-content: center;
        flex-grow: 1;
      }
      .image {
        position: relative;
        bottom: -40px;
        height: 480px;
      }
      .description-header {
        font-family: Tahoma, sans-serif;
        font-weight: 600;
        font-size: 2.2rem;
        line-height: 2.8rem;
        color: #363f41;
      }
      .description-part {
        margin-bottom: 16px;
        font-family: Tahoma, sans-serif;
        font-weight: 300;
        font-size: 1.2rem;
        line-height: 1.7rem;
        color: #363f41;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <img class="logo" src="images/logo.png" alt="">
      <div class="links-container">
        <a class="nav-item" href="#about">About app</a>
        <a class="nav-item" href="#download">Download</a>
        <a class="nav-item" href="#learn">Learn with us</a>
      </div>
    </div>
    <div id="about" class="section">
      <div class="section-description">
        <h2 class="description-header">Mining Empire</h2>
        <div class="description-part">Mining Empire is an addictive incremental game where your progress accelerates the more you play.</div>
        <div class="description-part">Become a great Miner and get cash in this clicker adventure game.</div>
      </div>
      <div class="section-image">
        <img class="image" src="./images/screen1.png" alt="">
      </div>
    </div>
    <div id="download" class="section">
      <div class="section-image">
        <img class="image" src="./images/screen2.png" alt="">
      </div>
      <div class="section-description">
        <h2 class="description-header">Download App</h2>
      </div>
    </div>
  </body>
</html>
ssfxate commented 3 years ago

Meantime. How the checks 4, 10 and 11 can pass with the code after stage 10 if there are no links/styles added?

amatiyko commented 3 years ago

@ssfxate Thank you for the report!

I have updated the stage 11 description and some tests. Please, click the tasks download button (in the VSCODE) - the task description should appear updated.

Please, let me know if you have any questions

ssfxate commented 3 years ago

Okay. 1,2,3 now work.

  1. There should be one <div> element with description-part class after the <h2> heading of the #download section
  2. The inner text of the .description-part should be 'Download the app and start mining now'

  3. There should be two links after the .description-part in the .section-description block of #download section

    What's about the last 3?

  4. The first link should have 16px right margin
  5. The first link should have other then right margin equal to 0px
  6. The second link should have all margins equal to 0px

Where are the info about these points?

Let's add two links to download the application: iOS and android
In the .section-description block under the heading add a div with the description-part class and the text Download the app and start mining now.
Next, in the .section-description block, add two <a> elements.
Both links should be opened in a new tab.
The first link should lead to the application page for iOs: 'https://apps.apple.com/us/app/coderslang-learn-programming/id1489105103'.
The second link should lead to the android app page: 'https://play.google.com/store/apps/details?id=com.coderslang.com&hl=en&gl=US'.
Inside the links, we will not use text, but images - inside each link add the<img>tag with the class 'platform'.
The image of the first link should be 'images / appstore.svg', the second link should be 'images / googleplay.png'.
Images with class 'platform' must be 40px high.
amatiyko commented 3 years ago

@ssfxate fixed. Please download tasks to see the changes