Prework Module 3 Flashcards
What is a Web application?
An application accessed via a web browser that allows users to perform tasks on the Internet
What is a URL?
A uniform resource locator. It is a unique address given to a specific resource on the web.
Computers don’t speak human languages, so we need to speak computer – we need the following three programming languages. What are they?
HTML CSS, JavaScript
What creates the structure of a webpage?
HTML, CSS in JavaScript 
What do we mean by element?
It is a type of content on the web page – it can be text image header, or list elements
Elements can also be used to divide or describe a page. What are three, common ones.
Meta related elements.
Content division elements.
Semantic elements.
What is SEO?
Search engine optimisation – the process of improving, the ranking of a website and search engine such as Google
What are some examples of browsers?
Google chrome, safari, Firefox, brave, Microsoft edge
What does the <head> element of HTML contain?
The metadata/information that helps the browser render the page (not visible to the user).
What does the <body> element of HTML contain?
The content that is shown to the user.
Are declarations such as <!DOCTYPE html> case sensitive or not case sensitive?
Not case sensitive!
What does the code, lang=”en” mean?
Language is in English
What does the code, lang=”en” mean?
Language is in English
Are HTML attributes defined in the beginning element or the closing element?
Always in the beginning element.
What are some metadata tags that can be used inside a HTML <head> tag?
<title>, <style>
, <base>, <link>, <meta>, <script></style></title>
What does </head> at the end of a <head> html code symbolise? (hint: what is the / doing?)
</head> is a closing tag, meaning that section of code is finished.
What is the role of the <meta></meta> element in HTML?
<meta></meta>
elements contain information about the page that is used by the browser.
What do you call elements that are nested inside other elements?
Child elements?
What do you call the element that holds all the child elements?
The parent element
What type of HTML element should content be under if we want it to be visible to the user?
The <body> element
What is the difference between an element and a tag>
An element is the entire element (from opening to closing tag) and a tag is what appears inside the <angle>.</angle>
What does the child element <ul> represent? (hint: it is a <body> html element)?
Unordered lists
What does the child element <p> represent? (hint: it is a <body> html element)?
Paragraph
What does the child element <ol> represent? (hint: it is a <body> html element)?
Ordered lists
What does the child element <li> represent? (hint: it is a <body> html element)?
List items
What does the child element <img></img> represent? (hint: it is a <body> html element)?
Image
What does the child element <br></br> represent? (hint: it is a <body> html element)?
break, line break or a line of empty space
What does the child element <a> represent? (hint: it is a <body> html element)?</a>
Anchor, which creates links to the same webpage or other webpages
What does the child element <href> represent? (hint: it is a <body> html element)?</href>
It is used to create a hyperlink
What does the child element <src> represent? (hint: it is used with the <img></img> html element)?</src>
Source - which defines the location of the image file (most important child element for an image!)
Why do we label section elements in VS Code as id=?
HTML uses the id attribute to identify elements and select them
What does git status do?
Checks what branch we are currently on
What does git checkout -b branch-name do?
Creates a new branch and switches to it
How do you save work to GitHub?
You need to add, commit and push up the HTML code in a feature branch.
After you push up your work to GitHub, what do you need to do next?
Merge your feature branch into the base branch so others can update their branches with an updated version.
What are the three ways to style a webpage using CSS?
Inline CSS, internal CSS style sheet, and external CSS style sheet
When do you use an inline CSS?
To style an element directly in a HTML file
When do you use an internal style sheet (CSS)?
To embed an entire stylesheet directly into a HTML file in the <head> element.
What is the most common way to style a webpage using CSS?
By using an external CSS style sheet.
What does separation of concerns mean?
Separating code into different files based on use - i.e. each section of code should have its own responsibility
How do you use an external style sheet (CSS)?
You link the file using a <link></link> element placed in the HTML’s <head> section
When coding CSS rules, what two components do declarations contain?
- The CSS property (e.g. colour) and 2. the value of the property (e.g. blue).
What does a margin indicate in a CSS style sheet?
How much space we want around the outside of an element (much like a margin in a word doc)
How is a padding property different to a margin property in a CSS style sheet?
The padding property adds space around the content inside an element, instead of outside (a margin).
When using CSS style sheets, what does the * sign indicate in code?
That the rule will be applied to all the elements visible on the page
What is the Do Not Repeat Yourself coding principle?
It encourages developers to reuse or share pieces of code to reduce the number of lines of code that need to be written or maintained.
When writing CSS style sheet code, what does a comma indicate between two selectors?
That the rule afterwards can be applied to both the selectors (e.g. header, footer {code), which means that the rule does not need to be written out twice.
What is debugging?
Finding where a bug is in the code and trying to fix it so that the code runs smoothly
After you create an external CSS file, how do you link it to your HTML file?
using <link and then rel= and href (link) > under the <head> element in the HTML file
When linking an external file to your HTML file, what does the rel attribute do?
Specifies the relationship between the current document and the linked document resource
When linking an external file to your HTML file, what does the href attribute do?
Specifies the location/URL of the external resource, using a relative path (location is derived from the current location).
When coding with CSS, what does a class attribute do?
A class attribute allows us to share a CSS rule to any element we choose by assigning the rule to a class attribute with a class sector (i.e. we can add styles to certain elements, but not all the elements).
What symbol do you use to symbolise that a “card” is a class selector?
A period/dot (.)
What are two ways we can assign colours in CSS?
- Semantic references/using the name (e.g. blue, gray) or 2. using a colours hexadecimal code (hex#)
Once we have created a class in CSS style sheet code, how do we apply it to an element in the HTML code?
You type class = (“insert class name”, e.g. card).
For example <section class="card">
How do you save CSS styling changes in the GitHub repository?
Add, commit and push up the code in the
What does JavaScript allow you to do when designing websites?
Allows users to interact with websites: effects, interactivity, data communication etc
Where do you place the
element (Java Script) in your HTML file?
Near the bottom of the file, in the <body> element, as the browser reads code in the order it appears in the file
In JavaScript, what are variables?
Variables are containers that store values.
When coding a string variable in JavaScript, what do you need to put around the text?
Quotation marks, e.g. let myVariable = “Bob”
In JavaScript, what are conditionals?
Conditionals are code structures used to test if an expression returns true or not
What does the .js file extension represent?
This file is a Javascript file
In JavaScript, what is the console.log method used for?
To make it easier for developers to test their code
What can we use to control the order in which code is executed (control flow)?
Conditional statements, and loops.
Is an “if” statement a type of conditional statement?
Yes! (e.g. If (a plate is fancy) {
put it on the top shelf)
When looking at “if” statements, what is a falsy value?
A value is falsy if it 0, On, “”, null, undefined or false.
When looking at “if” statements, what is a truthy value?
All other values that arent falsy, or if defined as the value of “true”
When looking at “if” statements (conditional statements) what does === check for?
=== is a strict equality operator that checks to see if two values are equal (returning a result of true or false).
What do we use instead of a conditional statement if we have lots of data values to evaluate?
An array and “for” loops
What is an array? (in JavaScript)
A single variable that is used to hold a group of data (usually related data).
How do we find the location of a data set inside an array?
Each data set is given a unique number, called an index. With JavaScript, the index starts with 0, then 1, 2, 3 (called zero-indexing), ordered according to the order the dataset is in the array.
What do we use a “for” loop for when logging the values of an array?
To perform the coding task (e.g. console.log(shapes[0])) on all the values in the index, instead of having to do it individually.
What are the three statements in a “for” loop?
- The starting point (e.g. var x=0)
- The condition (e.g. x<shapes.length)
- The difference between each indexed dataset (e.g. x++ means x+1, or the number increases by 1 each time).
Overall: for(var x=0; x<shapes.length; x++) {
What is a function in JavaScript?
Reusable blocks of code that contain instructions to perform a certain task. They do not automatically execute when the JavaScript file is run.
What are the 2 requirements for a JavaScript function?
- Define the function
- Call the function (because it does not automatically run)
When we define a function in JavaScript, what are the steps in the code?
- Use the function keyword (e.g. function makeTea () {
- Write the code block - what the function should do - found between the {} brackets
How do we call a function in JavaScript?
Type the name of the function in the console.
What variable can we use when trying to randomise a selection of a number?
The randomTopic function, which uses the Math.floor() and Math.random() properties of JavaScript
What does deployment of a website mean?
When we make a website live on the internet, i.e. everyone can see it and it has a live URL.
What is a README file used for?
It is displayed alongside your project in GitHub to describe your project and how to use it to fellow developers.
What are some useful headings to include in a README file?
Title, description, installation, usage, credits, license, badges, features, how to contribute
https://coding-boot-camp.github.io/full-stack/github/professional-readme-guide
What are the 4 commands to push up a feature branch to GitHub?
- git add -A
- git commit -m “file name (base branch)”
- git pull origin main
- git push origin/”old project name (comparison branch)”
What are some applications we can use to host a web application?
Virtual Private Server, Heroku, Docker, Kubernetes
What are the two ways to deploy a web application?
- Push them to a remote server (privately)
- Publish it on the web (URL)
What application is useful to deploy simple static websites (e.g. the Prework Study guide)?
GitHub pages
