Notes on freeCodeCamp.org Full Stack Web Development for Beginners video

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .

Interesting video for quick coverage of JavaScript along with one small game project and a web app project using HTML, CSS and JS. The first two parts of the video are on HTML and CSS which can be skipped.

Full Stack Web Development for Beginners (Full Course on HTML, CSS, JavaScript, Node.js, MongoDB), https://www.youtube.com/watch?v=nu_pCVPKzTk , published on Nov 1, 2022 by freeCodeCamp.org. The relevant sections of the video are given below:

  • (3:15:49 till around 4:52:01) Learn JavaScript
  • (4:52:01 till around 5:44:04) Create Frontend Movie App

Some tips/info. related to above video:

RPG – Role-Playing Game
Small typo in RPG code:
//let monterHealth;
let monsterHealth;

To follow fetch code of Create FrontEnd Movie App of above video, the tips on arrow functions given elsewhere in this post may help.

Search for movies by their original, translated and alternative titles.,
https://developer.themoviedb.org/reference/search-movie

The gaps in the left columns for some rows for some movie searches (e.g. “Laugh” search) seems to be related to the size of the title of the movie. To see that issue clearly, comment out all center related code in the Javascript:

// const center = document.createElement(“center”);
// center.appendChild(image);
// div_card.appendChild(center);

Now on showing the web page, movie images are not shown but only the titles and from the background colour of the movie cell one can see how height of the cell varies depending on the length of the movie title. At times, tall height of a movie cell seems to prevent cell in immediate row below it as well as cells to its left from having a movie cell (and thus we have blanks on the left side).

At times the data returns null for the poster_path. The program does not handle this case and instead appends “null” to image filename in the generated HTML which results in a file not found condition and a broken image link pic being shown.

The main page has a complicated row/column/card div structure for each Movie card entry. It uses float and 25% width in the column div to break the block behaviour of div tag and have 4 movie cards per row. I recreated that behaviour in a simple html file (test4.html of HCJProj\test folder) whose contents are given below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .column {
        float: left;
        width: 25%;
        padding: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="column">
        <div class="card">RCC1</div>
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="card">RCC2</div>
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="card">RCC3</div>
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="card">RCC4</div>
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="card">RCC5</div>
      </div>
    </div>
    <div class="row">
      <div class="column">
        <div class="card">RCC6</div>
      </div>
    </div>
  </body>
</html>

I was able to greatly simplify this test html file by dropping the row and column div elements and having only the card element with float and 25% width applied to the card element. That file (test5.html of HCJProj\test folder) is given below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .card {
        float: left;
        width: 25%;
        padding: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="card">C1</div>
    <div class="card">C2</div>
    <div class="card">C3</div>
    <div class="card">C4</div>
    <div class="card">C5</div>
    <div class="card">C6</div>
  </body>
</html>

So I now wonder whether the main project in above video is unnecessarily using a very complicated row/column/card div element for each movie card cell.

There are some other issues with this main project. The behaviour of the page when the window is made small reduces each movie card of each row having 4 cards, to a thin slice. Ideally it should be responsive by changing the number of cards per row based on the window size.

Comments

Post a Comment

Archive