Lilian's Prework Study Guide

One of the three cornerstone languages used in web development. Used to create the structure of a webpage!

A webpage is composed of elements that work together.

• Elements are a type of content
• Elements are usually composed of an opening tag and a closing tag represented with angle brackets (< >)
• Tag: refers to what appears inside the angle brackets
• Types of elements:
• Meta-related elements
• Semantic elements (the name of the element describes its content and the role it plays on a webpage. Ex. body, section)
• Non semantic
• Content division elements (Ex. div, span)
• Heading (Ex. h1,h2)
• Lists (Ex. ul, ol, li)


• Elements are composed of tags and can have attributes. Tags contain the content if open and closed!
• Nesting elements: Putting elements inside other elements.
• Void elements: elements with no content, just attributes and dont have a closing tag. Ex img ([img src="images/firefox-icon.png" alt="My test image"])


• Basic elements:
• HTML: its the root of the document, contains the lang element.
• Body: contains the content that is shown to the user. All the elements that we want the user to see and interact with must be placed inside this element
• Head: contains information, or metadata, that helps the browser to render the page correctly. Elements included within the [head] are not visible when a user looks at a webpage
• Usually the head element includes the following elements:
• Meta: contains information about the page that is used by the browser, defines metadata such as the character set, description, keywords, author, and viewport.
• Title: defines the title for a webpage
• Style: defines the CSS styles associated
• Base: defines the base URL for a webpage
• Link: connects an external resource to the HTML document
• Script: embeds client-side scripts in the HTML document
• Main: represents the dominant content of the [body] of a document. The content inside the [main] element should be unique to the document
• Footer: contains the author, copyright, contact, sitemap, and navigation


• Most common elements inside body element:
• src: defines the location, or source, of the image file.
• img: contains information about images that are displayed on the webpage
• atr: contains a text string that describes the appearance and functionality of the image.
• br: creates a line of empty space
• a: anchor, creates links
• href: attribute points to the URL for the link
• ul: unordered list
• ol: ordered list
• li: list item

Is a style sheet programming language used by developers to define how webpage content is presented to users

Whereas HTML strictly handles the structure and content of a webpage, CSS defines the colors, aesthetics, visual layout, and organization.

Css is a Stylesheet language used to describe the presentation of a document written in HTML or XML.

Describes how elements should be rendered on screen, on paper, in speech, or on other media.

Most HTML elements on your page can be thought of as boxes sitting on top of other boxes. CSS layout is mostly based on the box model.

Each box taking up space on your page has properties.

• Ways to style a webpage using css:
• Inline: style an element directly in the HTML file. Quick and permanent changes, but not flexible!
• Internal/ Embedded: You can use the [style] element in the [head] element to put an entire stylesheet directly in the HTML file.
• External: most common, allows developers to keep all their CSS rules in a separate file. We link the file using a [link] element placed in the HTML's [head]


• CSS rules:
• Selector: defines the element or attributes to which the rules will apply
• Types of selectors:
• Element selector: All HTML elements of the specified type. Ex my-element
• ID selector: The element on the page with the specified ID. Ex #my-id
• Class selector: The element(s) on the page with the specified class. Ex .my-class
• Attribute selector: The element(s) on the page with the specified attribute. Ex img[src]
• Pseudo-class selector: The specified element(s), but only when in the specified state. Ex a:hover
• Declarations: Contains the property we want to apply and the value of the property
• Property: ways in which you can style an element
• Property value: appearance for the given property


• Most common rules:
• Display (inline vs block)
• Margin: space outside an element
• Padding: space inside an element (if you increase the padding, you are making the element bigger)


• DRY CODE: Do Not Repeat Yourself
• Coding principle that encourages developers to reuse or share pieces of code in order to reduce the number of lines of code that need to be written or maintained


• CSS is usually linked with the link element
• Ex. [link rel="stylesheet" href="./assets/style.css"]
• Link: creates the connection to the external file
• Rel: attribute that specifies the relationship between the current document and the linked document
• Href: specifies location of the external resource


• Types of elements in css:
• Block (ex. body) - displayed as blocks, one on top of the other
• Inline (ex. images) - displayed one next to the other

Web-based version control and collaboration platform for software developers

• git status: checks what branch we are currently on
• git checkout -b branch-name: creates a new branch and switches to it
• git add -A: add all the files modified
• git commit -m "message": commits the files added and adds a message to that commit
• git pull origin branch-name: gets the latest changes of the branch selected
• git push origin branch-name: pushes the comit(s) to the branch created

JavaScript is a programming language that adds interactivity to your website

• Store values inside variables
• Operations on strings
• Run code in response to certain events

• Application Programming Interfaces (APIs): ready-made sets of code building blocks, allow devs to implement programs.
• Categories:
• Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things.
• Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web

• Interpreted code: the code is run from top to bottom and the result of running the code is immediately returned. Ex javascript
• Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. Ex C++
• Client-side code: code is downloaded, runs on the user’s computer and then is displayed. Ex vanilla javascript
• Server-side code: runs on the server, results are downloaded and displayed in the browser. Ex .NET or Node.js (javascript)
• Dynamic: ability to update the display of the webpage
• Static: shows the same content all the time.

• [script src="./assets/scripts.js" defer][/script]
• Defer attribute tells the browser to continue downloading the html content once the script tag has been reached.
• Both the script and the html will load simultaneously!

• Your scripts should run immediately and dont have dependencies?
• Async: Scripts loaded using the async attribute will download the script without blocking the page while the script is being fetched. However, once the download is complete, the script will execute, which blocks the page from rendering.
• Your scripts need to wait for the DOM?
• Defer: Scripts loaded with the defer attribute will load in the order they appear on the page. They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place.

• Data types holded in variables:
• String: sequence of text
• Number
• Boolean: true/false
• Array: structure to store multiple values
• Object: anything