reading-notes

Class 1 - Setup Developer Toolbelt

Lab 1 - Let’s Get Started

Setup

Create a webpage that accepts user input and, based on that input, displays messages back to the user

Set up the HTML document body with header, main, and footer elements.

In the main of the file, place a h1 tag with the content “Class 1 Lab”. Style this element with text and background colors via an internal `<style>` element placed in the head of your document.

In the HTML portion of the file, place the four questions within a series of p tags so that they are listed on the screen.

Give each p tag a different text color and background color by using inline styling.

Using a total of four JavaScript ‘prompt’ statements along the lines of our class demo, have a user answer four questions.

The user’s response to each question (input) should be stored in a separate variable. Name your variables carefully and let to define your variables.

Using these responses, return an alert to the user (output) that concatenates their response into some kind of reply like we did in class.

Strive to have your alert for each question utilize the responses to all of the prior questions such that by the fourth question, your response would look something like, “Greetings, Iggy from Ipanema, I also like to eat bananas while on vacation in Paris.”

Be creative and have fun with your questions/responses! They can be whatever you want so long as the input/output requirements are met.

In addition, for each response, create a console.log() message that indicates the nature of the question and the user’s response, as we did in class.

Using Lighthouse in the Chrome DevTools, analyze the accessibility of your application.

The following options to generate a Lighthouse report should be selected:

    - Mode: Navigation
    - Device: Desktop
    - Categories: Accessibility

A score between 50-65 is a great place to start for this first lab.

Lab Assignment Submitted: Link to the Private Gist

Written Class Notes

Command Line Code	Meaning
`pwd`	print working directory
`tree`	shows the file tree of your directory
`ls`	list all the files and folders located in your current directory
`ls -a`	list all the files and folders located in your current directory including hidden files in short form
`ls -la`	list all the files and folders located in your current directory including hidden files in a more detailed form
`cd`	change directory
`cd ..`	change directory to previous one
`mkdir`	make directory
`touch`	create a new file
`code <filename>`	open up this file in VSCode
`code .`	open the current directory in VSCode
`mv`	move a file
`rm <filename>`	remove a file permanently. Warning: there is no recovery!
`cp <source> <destination>`	copy a file
`cat fileName`	shows content of file
`git clone GH HTTPS link`	clones file from GH to local
`git pull origin main`	pull files from GH
`cd ../..`	add two dots and slash to move further previous file
`git init`	initializes new repository in existing project folder

Semantic HTML: HTML you write thoughtfully, picking tags that always indicate the type of content within
Right click, inspect, use Lighthouse: analyzes accessibility. Gives you a report grade.

In-class demo for lab:
 <script> let name=prompt("what is your name?");
            alert("nice to meet you," + name);
            console.log(name);
  </script>
  <p style="color:green></p>
  <style>li { color:red} </style> = global styling use in head means it is applied to all li elements

Start commit message with a description change word like add, updated, delete etc

Assignment submit: GH profile, add, new gist = put single piece of code for safe keeping:

   <!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>
      main > h1 {
      color: orange;
      background-color: black;
      }
   </style>
   </head>

   <body>
   <script>
      let name = prompt("What is your name?").toUpperCase();
      alert(name + "!! Nice to meet you!");
      console.log(name);

      let fruit = prompt("What is your favorite fruit?").toLowerCase();
      alert("Well, " + name + " " + fruit + " my favorite fruit too!");
      console.log(fruit);

      let color = prompt("What is your favorite color?").toLowerCase();
      alert(
      "Wouldn't " + color + " " + fruit + " be interesting " + name + "?"
      );
      console.log(color);

      let vacation = prompt(
      "Where do you want to go on vacation?"
      ).toUpperCase();
      alert(
      vacation + "?!?" + " " + name + ", eating " + color + " " + fruit + " there sounds amazing right now."
      );
      console.log(vacation);
   </script>

   <header></header>

   <main>
      <h1>Class 1 Lab</h1>

      <p
      style="
         color: black;
         background-color: lightblue;
         font-size: 20px;
         padding: 5px;
      "
      >
      <script>
         document.write(name + "!");
      </script>
      !!! Welcome to my page!
      </p>
      <p
      style="
         color: darkolivegreen;
         background-color: lightsalmon;
         font-size: 20px;
         padding: 5px;
      "
      >
      I think
      <script>
         document.write(fruit);
      </script>
      the best fruit too!
      </p>
      <p
      style="
         color: white;
         background-color: red;
         font-size: 20px;
         padding: 5px;
      "
      >
      You have good taste! I think
      <script>
         document.write(color);
      </script>
      is one of my favorite color too!
      </p>
      <p
      style="
         color: darkred;
         background-color: pink;
         font-size: 20px;
         padding: 5px;
      "
      >
      <script>
         document.write(vacation);
      </script>
      ! That does sound better than sitting at home right now!
      </p>
   </main>

   <footer></footer>
   </body>
   </html>

Read 1 - Readings Overview

Resources Link/Pages

Getting Started

Introduction to HTML

Miscellaneous

Answer

Statement on why this topic matter as it relates to what I’m studying in this module:

This gives you all the tools and guides needed to understand the basic, backbone, and makeup of a simple webpage.

Getting Started

Compose a short poem describing how HTTP sends data between computers.
- Client requests from server, server ponders requests, server approves and now client requests manifest
Describe how HTML, CSS, and JS files are “parsed” in the browser.
- The browser reads the HTML file first and recognizes that external CSS and JS files exist. The browser then sends a request to the server and when the server apporves those files, the browser is able to read the external files. CSS gets applied first before JS is executed.
How can you find images to add to a Website?
- Go to Google and change usage rights to creative commons licenses to avoid copyright. Then you can save images into your repo or save any of your own personal images or copy the images web address to link in HTML using <img src="image url or image file path" alt="attribute to descibe image">
How do you create a String vs a Number in JavaScript?
- String: use single or double quotes "string" or 'string'
- Number: use any number with no quotes 10
What is a Variable and why are they important in JavaScript?
- It’s a container that stores value after you assign something to it and it’s important because you can store and change data to make a website dynamic.

Introduction to HTML

What is an HTML attribute?
- Additional information about the element and it goes before the closing bracket of the opening tag. Like for <img src="image url or image file path" alt="attribute to descibe image">, src=" " and alt=" " gives more information about the <img> element by specifying a file path and giving an image description with alternate text.
Describe the Anatomy of an HTMl element.
- Includes an opening tag wrapped in angle brackets, content in the middle, ends with closing tag that is the same as the opening with an added forward slash before element in the brackets. <element>Content</element>
What is the Difference between <article> and <section> element tags?
- Article: groups together content that can be a stand-alone
- Section: groups related content together to make it more organizational
What Elements does a “typical” website include?
- <!DOCTYPE html>: Specifies the HTML version.
- <html>: Wraps the entire content of the page.
- <head>: Acts like a container for content in HTML page
- <title>: Creates title of page
- <body>: Contains the content of the web page.
How does metadata influence Search Engine Optimization?
- It gives more data about a webpage that allows search engines to understand the content more, and therefore affecting ranks in visibility. The more it understands the content the more it can determine relevancy and push the webpage higher.
How is the <meta> HTML tag used when specifying metadata?
- It provides additional info like character encoding, which helps display proper characters in the human language.

Miscellaneous

What is the first step to designing a Website?
- Project Ideation which involves your goals with a website and tasks to reach that goal.
What is the most important question to answer when designing a Website?
- What do you want the website to accomplish.
Why should you use an <h1> element over a <span> element to display a top level heading?
- It gives the text a meaning instead of producing just a look, and the meaning provides search engines better understanding of the content.
What are the benefits of using semantic tags in our HTML?
- Provides search engine with better understanding of content, makes thing accessible, and it is just the standard way to write content so other developers can interpret your code.
Describe 2 things that require JavaScript in the Browser?
- Any time you reload a page or user input is different and it is able to display different content
- Validate user input like producing error messages when trying to enter a password
How can you add JavaScript to an HTML document?
- Externally: create a separate JS file script.js and use <script> element to link it.
- Internally: use <script> element and write JS in HTML file

Things I want to know more about

How to write server-side code, like pulling data from somewhere and updating it on real-time on the webpage.

Career 1 - Identify Your Accountability Partners

Find 2 people in your current class to be your accountability partner.
- Those two people should not be in your direct friend pool. They need to be people you are less casual around.
Once your two partners have accepted the role, please submit those two names in the assignment entry screen.

Your accountability partners will be responsible for checking your resume and your personal pitch in this course.