Prework Study Guide

HTML

• DOCTYPE declaration goes ast top of document to tell computer it is an html file
• html lang declaration sets the language of the file
• element refers to entire element including both opening and closing tags
• tag refers only to what is inside the angle brackets
• child elements are nested inside of parent elements
• The head element contains information about the webpage
• head element contains metadata elements
• style element links in css
• base element defines the base URL for the webpage
• meta elements define metadata
• charset sets the character encoding
• http-equiv element sets an HTTP header for content
• viewport element sets the default view for the webpage
• title element sets the page title displayed on the browser tab
• link element connects an external resource to the html document
• script element embeds client side scripts in the html document
• The body element represents the visible content shown to the user
• h1 to h6 elements are the different size headings, for eas eof reading should not jump between sizes, go from 1 towards 6. h1 should only be used once on a page.
• p element is a paragraph or body of text
• br element is a line break
• ul ol li elements are eunordered list, ordered list and list items. the li will nest inside the ul or ol
• img element contains info about images that are displayed in a webpage, can contain multiple attributes such as src which defines the location of the image, alt names the image for screenreaders, width and height define the display size of the image
• a element is an anchor that creates links to the same or other webpages
• section is a semantic container element
• footer element appears at the bottom of a page and usually contains the author, contact, sitemap and navigation

CSS

• Enter your CSS notees here
• when styling an element we set out the selector which defines the element or attributes we wish to apply the styling to, then the declaration which consists of the propertyand value. i.e we declare what we are changing and to what, for example div color blue
• this is displayed as selector then the declaration is inside curly brackets with a colon after the property
• The period . selector denotes class
• A margin indicates how much space we want around the outside of an element
• A border denotes the border of the element. Remember HTML elements are essentially boxes.
• A padding indicates how much space we want around the content inside an element

GIT

• git status: checks what branch we are currently in
• git checkout -b branch-name: creates a new branch and switches to it
• git add -A will stage changes you have made ready to be committed, by using -A we are telling it to stage all changes made in the branch
• git commit -m branchname makes a commit that snapshots of the currently staged changes made and updates the branch
• git pull origin branchname the pull command receives the stated branches modifications to the local environment
• git push origin branchname pushes the locally made changes to the remote github branch

• code . will open the local code program such as vs code so you can edit code in the branch you are in
• cd directory-name
• pwd or print working directory prints out the directory we are in
• ls: displays th e list of directories
• mkdir: creates a new directory
• touch: creates a new file in the directory you are in
• open file-name: opens a file

JavaScript

• A variable is a named container that allows us to stoore data in our code
• Control flow is the order in which a computer executes code in a script
• Because of the control flow we place the script element at the bottom of the body in the HTML file, this is so the HTML that Javascript will interact with is already loaded
• string is a sequence of text, needs to be enclosed in single or double quotation marks
• numbers are not placed in quote marks
• Boolean is a true/false value, true and false are special characters that are not placed in quote marks