Prework Module 3 Flashcards

1
Q

What is a Web application?

A

An application accessed via a web browser that allows users to perform tasks on the Internet

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is a URL?

A

A uniform resource locator. It is a unique address given to a specific resource on the web.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Computers don’t speak human languages, so we need to speak computer – we need the following three programming languages. What are they?

A

HTML CSS, JavaScript

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What creates the structure of a webpage?

A

HTML, CSS in JavaScript 

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What do we mean by element?

A

It is a type of content on the web page – it can be text image header, or list elements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Elements can also be used to divide or describe a page. What are three, common ones.

A

Meta related elements.
Content division elements.
Semantic elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is SEO?

A

Search engine optimisation – the process of improving, the ranking of a website and search engine such as Google

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are some examples of browsers?

A

Google chrome, safari, Firefox, brave, Microsoft edge

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What does the <head> element of HTML contain?

A

The metadata/information that helps the browser render the page (not visible to the user).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What does the <body> element of HTML contain?

A

The content that is shown to the user.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Are declarations such as <!DOCTYPE html> case sensitive or not case sensitive?

A

Not case sensitive!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What does the code, lang=”en” mean?

A

Language is in English

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What does the code, lang=”en” mean?

A

Language is in English

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Are HTML attributes defined in the beginning element or the closing element?

A

Always in the beginning element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are some metadata tags that can be used inside a HTML <head> tag?

A

<title>, <style>

, <base>, <link>, <meta>, <script>
</style></title>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What does </head> at the end of a <head> html code symbolise? (hint: what is the / doing?)

A

</head> is a closing tag, meaning that section of code is finished.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is the role of the <meta></meta> element in HTML?

A

<meta></meta>

elements contain information about the page that is used by the browser.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What do you call elements that are nested inside other elements?

A

Child elements?

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What do you call the element that holds all the child elements?

A

The parent element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What type of HTML element should content be under if we want it to be visible to the user?

A

The <body> element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is the difference between an element and a tag>

A

An element is the entire element (from opening to closing tag) and a tag is what appears inside the <angle>.</angle>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What does the child element <ul> represent? (hint: it is a <body> html element)?

A

Unordered lists

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What does the child element <p> represent? (hint: it is a <body> html element)?

A

Paragraph

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What does the child element <ol> represent? (hint: it is a <body> html element)?

A

Ordered lists

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What does the child element <li> represent? (hint: it is a <body> html element)?

A

List items

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What does the child element <img></img> represent? (hint: it is a <body> html element)?

A

Image

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What does the child element <br></br> represent? (hint: it is a <body> html element)?

A

break, line break or a line of empty space

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What does the child element <a> represent? (hint: it is a <body> html element)?</a>

A

Anchor, which creates links to the same webpage or other webpages

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What does the child element <href> represent? (hint: it is a <body> html element)?</href>

A

It is used to create a hyperlink

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What does the child element <src> represent? (hint: it is used with the <img></img> html element)?</src>

A

Source - which defines the location of the image file (most important child element for an image!)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Why do we label section elements in VS Code as id=?

A

HTML uses the id attribute to identify elements and select them

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What does git status do?

A

Checks what branch we are currently on

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

What does git checkout -b branch-name do?

A

Creates a new branch and switches to it

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

How do you save work to GitHub?

A

You need to add, commit and push up the HTML code in a feature branch.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

After you push up your work to GitHub, what do you need to do next?

A

Merge your feature branch into the base branch so others can update their branches with an updated version.

35
Q

What are the three ways to style a webpage using CSS?

A

Inline CSS, internal CSS style sheet, and external CSS style sheet

36
Q

When do you use an inline CSS?

A

To style an element directly in a HTML file

37
Q

When do you use an internal style sheet (CSS)?

A

To embed an entire stylesheet directly into a HTML file in the <head> element.

38
Q

What is the most common way to style a webpage using CSS?

A

By using an external CSS style sheet.

39
Q

What does separation of concerns mean?

A

Separating code into different files based on use - i.e. each section of code should have its own responsibility

40
Q

How do you use an external style sheet (CSS)?

A

You link the file using a <link></link> element placed in the HTML’s <head> section

41
Q

When coding CSS rules, what two components do declarations contain?

A
  1. The CSS property (e.g. colour) and 2. the value of the property (e.g. blue).
42
Q

What does a margin indicate in a CSS style sheet?

A

How much space we want around the outside of an element (much like a margin in a word doc)

43
Q

How is a padding property different to a margin property in a CSS style sheet?

A

The padding property adds space around the content inside an element, instead of outside (a margin).

44
Q

When using CSS style sheets, what does the * sign indicate in code?

A

That the rule will be applied to all the elements visible on the page

45
Q

What is the Do Not Repeat Yourself coding principle?

A

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.

46
Q

When writing CSS style sheet code, what does a comma indicate between two selectors?

A

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.

47
Q

What is debugging?

A

Finding where a bug is in the code and trying to fix it so that the code runs smoothly

48
Q

After you create an external CSS file, how do you link it to your HTML file?

A

using <link and then rel= and href (link) > under the <head> element in the HTML file

49
Q

When linking an external file to your HTML file, what does the rel attribute do?

A

Specifies the relationship between the current document and the linked document resource

50
Q

When linking an external file to your HTML file, what does the href attribute do?

A

Specifies the location/URL of the external resource, using a relative path (location is derived from the current location).

51
Q

When coding with CSS, what does a class attribute do?

A

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).

52
Q

What symbol do you use to symbolise that a “card” is a class selector?

A

A period/dot (.)

53
Q

What are two ways we can assign colours in CSS?

A
  1. Semantic references/using the name (e.g. blue, gray) or 2. using a colours hexadecimal code (hex#)
54
Q

Once we have created a class in CSS style sheet code, how do we apply it to an element in the HTML code?

A

You type class = (“insert class name”, e.g. card).

For example <section class="card">

55
Q

How do you save CSS styling changes in the GitHub repository?

A

Add, commit and push up the code in the

56
Q

What does JavaScript allow you to do when designing websites?

A

Allows users to interact with websites: effects, interactivity, data communication etc

57
Q

Where do you place the

 element (Java Script) in your HTML file?
A

Near the bottom of the file, in the <body> element, as the browser reads code in the order it appears in the file

58
Q

In JavaScript, what are variables?

A

Variables are containers that store values.

59
Q

When coding a string variable in JavaScript, what do you need to put around the text?

A

Quotation marks, e.g. let myVariable = “Bob”

60
Q

In JavaScript, what are conditionals?

A

Conditionals are code structures used to test if an expression returns true or not

61
Q

What does the .js file extension represent?

A

This file is a Javascript file

62
Q

In JavaScript, what is the console.log method used for?

A

To make it easier for developers to test their code

63
Q

What can we use to control the order in which code is executed (control flow)?

A

Conditional statements, and loops.

64
Q

Is an “if” statement a type of conditional statement?

A

Yes! (e.g. If (a plate is fancy) {
put it on the top shelf)

65
Q

When looking at “if” statements, what is a falsy value?

A

A value is falsy if it 0, On, “”, null, undefined or false.

66
Q

When looking at “if” statements, what is a truthy value?

A

All other values that arent falsy, or if defined as the value of “true”

67
Q

When looking at “if” statements (conditional statements) what does === check for?

A

=== is a strict equality operator that checks to see if two values are equal (returning a result of true or false).

68
Q

What do we use instead of a conditional statement if we have lots of data values to evaluate?

A

An array and “for” loops

69
Q

What is an array? (in JavaScript)

A

A single variable that is used to hold a group of data (usually related data).

70
Q

How do we find the location of a data set inside an array?

A

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.

71
Q

What do we use a “for” loop for when logging the values of an array?

A

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.

72
Q

What are the three statements in a “for” loop?

A
  1. The starting point (e.g. var x=0)
  2. The condition (e.g. x<shapes.length)
  3. 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++) {

73
Q

What is a function in JavaScript?

A

Reusable blocks of code that contain instructions to perform a certain task. They do not automatically execute when the JavaScript file is run.

74
Q

What are the 2 requirements for a JavaScript function?

A
  1. Define the function
  2. Call the function (because it does not automatically run)
75
Q

When we define a function in JavaScript, what are the steps in the code?

A
  1. Use the function keyword (e.g. function makeTea () {
  2. Write the code block - what the function should do - found between the {} brackets
76
Q

How do we call a function in JavaScript?

A

Type the name of the function in the console.

77
Q

What variable can we use when trying to randomise a selection of a number?

A

The randomTopic function, which uses the Math.floor() and Math.random() properties of JavaScript

78
Q

What does deployment of a website mean?

A

When we make a website live on the internet, i.e. everyone can see it and it has a live URL.

79
Q

What is a README file used for?

A

It is displayed alongside your project in GitHub to describe your project and how to use it to fellow developers.

80
Q

What are some useful headings to include in a README file?

A

Title, description, installation, usage, credits, license, badges, features, how to contribute
https://coding-boot-camp.github.io/full-stack/github/professional-readme-guide

81
Q

What are the 4 commands to push up a feature branch to GitHub?

A
  1. git add -A
  2. git commit -m “file name (base branch)”
  3. git pull origin main
  4. git push origin/”old project name (comparison branch)”
82
Q

What are some applications we can use to host a web application?

A

Virtual Private Server, Heroku, Docker, Kubernetes

83
Q

What are the two ways to deploy a web application?

A
  1. Push them to a remote server (privately)
  2. Publish it on the web (URL)
84
Q

What application is useful to deploy simple static websites (e.g. the Prework Study guide)?

A

GitHub pages