reading-notes

Class 201.01

Class Notes

• this is used for containers in various parts of the page
• NB to note, there’s not actual difference in these elements, it’s merely convention that we start with <nav> at the top
• today’s assignment should be done with inline style
• use a backtick (`) to emulate a Python f-string like this: this is my variable: ${variableName}

Things I want to know more about

• Event handlers

Read 01 Assignment

00. Why this Topic Matters

This is a foundational component to the entire course - we need to have a solid grasp of how to construct elements in HTML, interact with them via CSS (and JS).

01. Getting Started

1. Compose a short poem describing how HTTP sends data between computers.

Packets take their flight,

Through cyberspace they travel,

Worlds connect as one

1. Describe how HTML, CSS, and JS files are “parsed” in the browser.

   The browser starts parsing an HTML file from top to bottom. It uses elements, tags, attributes to build out the structure. Within the HTML explicit or references to code for CSS and JS are made, which allows to the browser to further beautify the site (css) and/or add functionality (e.g. JS)

2. How can you find images to add to a Website?

   Google images (check copyright); Flickr, ShutterStock, and Pixabay are other photo sites; and mid-journey, Dall-E and others are also fantastic options

3. How do you create a String vs a Number in JavaScript?

   Enclose the desired characters within single quotes (‘’) or double quotes (“”). For example, let myString = "Hello World";. It’s recommended that we use single quotes in JS because HTML tends to use double quotes. To create a number you simply assign a numeric value to a variable, such as let myNumber = 42;.

4. What is a Variable and why are they important in JavaScript?

   A variable is a container for information. Variables help track user preferences, answers, and other fundamental items (e.g. what items you might have in your shopping list).

01. Introduction to HTML

1. What is an HTML attribute?

   this is similar to an argument in a function; it’s a way to add additional information or attributes to elements. They consist of a name-value pair, and are separated by an equals sign.

2. Describe the Anatomy of an HTMl element.

   There’s an opening tag (e.g. <h1>) and a closing tag (e.g. </h1>). The content is what appears within the element. Here’s a picture.

3. What is the Difference between <article> and <section> element tags?

   • <article> encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).
   • <section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries), or a theme. It’s considered best practice to begin each section with a heading; also note that you can break <article>’s up into different <section>’s, or <section>’s up into different <article>’s, depending on the context.

4. What Elements does a “typical” website include?

   Some examples are : <header>, <nav><main>, <section>, <article>, <aside>, <footer>, <div>, <img>, <a>.

5. How does metadata influence Search Engine Optimization?

   Crawlers will extract metadata so it knows who your page might be relevant to. SEO is a whole science, while metadata is important it is not the only thing that influences the page ranking

6. How is the <meta> HTML tag used when specifying metadata?

   The meta tag can be used to provide information such as the document’s character encoding, viewport settings for responsive design, authorship, keywords, and descriptions for search engine optimization (SEO), among others.

02. Miscellaneous

1. What is the first step to designing a Website?

   Surprisingly it’s not anything technical. You should answer a few questions like: What exactly do you want to accomplish, how will the website help me reach my goals, and what needs to be done (and in what order), to reach my goals?

2. What is the most important question to answer when designing a Website?

   What is the purpose of the website and what specific goals do you want to achieve?

3. Why should you use an <h1> element over a <span> element to display a top level heading?

   The span element has no semantic value - in other words, it offers no help to the reader/human what you’re trying to accomplish. Semantics are very important as it makes the code more readable/intuitive.

4. What are the benefits of using semantic tags in our HTML?

   Search engines see it as important keywords for rankings, screen readers aid visually impaired users, finding meaningful code is easier, suggests data type, and semantic naming mirrors element naming

5. Describe 2 things that require JavaScript in the Browser?

   Form validation and dynamic content updates are two common use cases that require JavaScript in the browser.

6. How can you add JavaScript to an HTML document?

   inline (code appears in the html) or external (code appears in a “nearby” .js file), both using the <script> tag. You can attach JavaScript code directly to HTML elements using event attributes. For example, you can use the onclick attribute to define a JavaScript function that will be executed when a button is clicked

References

ChatGPT helped me on some of the answers (especially the Haiku). I rephrased the answers where it was helpful (i.e. I didn’t copy/paste blindly).

This site is open source. Improve this page.