reading-notes

Class 01 - Setup Developer Toolbelt

Statement

The reading notes for Class 01 is a quick overview of the basics of how a website uses HTML, CSS and JavaScript.


Getting Started

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

    HTTP, the messenger of the digital age,

    Requested by the browser,

    a connection only possible by TCP/IP,

    After an approval, it conveys,

    With chunks of data packets combined,

    Your eyes will suddenly view, a complete web page in front of you.

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

    HTML files are parsed first in the browser, followed by link elements that refer to the CSS stylesheets and the JS script elements. Once it has those elements it will parse the CSS and Javascript.

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

    There are multiple ways to collect images to use on your website. The important thing to remember is that images may have a copyright. You can use pexels.com, unsplash.com, or many others. When doing your search on google for an image you can also set a search filter for ‘usage rights’ under the ‘Tools’ button. Use the option for ‘Creative Common licenses.’

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

    When creating a string in JS, you will enclose the value in single or double quote marks. Numbers do not require quote marks.

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

    Variables are an integral part of JavaScript. They are a container, given a name, that is then used for storing data values. With variables you can store, manage and manipulate data. This makes programs dynamic and adaptable.


Introduction to HTML

  1. What is an HTML attribute?

    HTML attributes are the extra information you can give an element, that you won’t see on your page. Attributes can be links to websites, titles, and more.

  2. Describe the Anatomy of an HTMl element.

    An HTML element has three parts: an opening tag, the content, and a closing tag. The opening tag, using the name of the element wrapped in opening and closing brackets, shows you where the element begins. The content consists of the items you want to display. The closing tag displays where the element ends and is identical to the opening tag except you add a forward slash before the element name.

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

    The difference between the < article > and < section > element tags is that the < article > is for a complete, standalone piece of content, while < section > is for representing a group of related content within a larger document.

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

    A typical website includes a header, navigation bar, main content, sidebar, and a footer.

  5. How does metadata influence Search Engine Optimization?

    When you specify with keywords that relate to your content within the metadata, it allows for better searchability and possible higher traffic to your website.

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

    The < meta > elements will use attributes such as ‘name’ and ‘content’ to specify the metadata.


Miscellaneous

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

    The first step to designing a website is project ideation.

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

    The most important question when designing a website is: “What do you want to accomplish?”


Semantics

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

    Using an < h1 > element is important for SEO, screen readers, representing the proper type of data, and more.

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

    • Search engines will consider its contents as important keywords to influence the page’s search rankings (see SEO)
    • Screen readers can use it as a signpost to help visually impaired users navigate a page
    • Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
    • Suggests to the developer the type of data that will be populated
    • Semantic naming mirrors proper custom element/component naming

List from: Semantics MDN


What is JavaScript?

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

    JavaScript is required to have interactive maps and animated graphics in the browser.

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

    You can add JavaScript to your HTML document by directly adding internal JavaScript with the script element, or using a file like you do for CSS, with an external JS file. There is also inline JavaScript handlers where you will find small bits JS code inside of HTML.



Things I want to know more about