Command Line Basics Portion

What is a command shell and why would I use one?

Shell is a scripting language as well as a command line interface, it allows users to give commands
to computers in place of GUI's. Shell is very powerful since you can use the commands to do
anything the GUI can do, the only issue being that it has a higher learning curve since you have to
learn keywords that are needed to execute certain commands. The problem of GUI’s is that they do
not scale well when we hae to give thousands of commands to a computer, for every command we
do we have to make a click. Lets say we are doing some work where we have to check thousands of
files to see if they have a certain property that we are looking for, it would take us hours and hours
to go through all of them. With the use of bash we can automate this procedure with a couple of
commands. Shell allows us through the use of the keyboard by giving commands to take full control
of our computer, by not having the need to rely on a GUI we are able to dig much deeper into the
capabilities of our OS’s and find functionalities that were locked to us before.

How can I move around on my computer?

You can move around by using the basic commands of cd Example directory to move to the
directory we want to, cd.. to move up one level, ls to view the contents of the directory we are in
currently ad pwd to see the full path. We can use these commands with other options and arguments
to give us the location and the data we are looking for.
How can I see what files and directories I have?
With the use of ls
How can I specify the location of a file or directory on my computer?
By using cd with an argument specifying the directory we want to go at, we can go to that particlar
location.
Explain the similarities and differences between a file and a directory.
A directory is a folder that holds other files and directories, where a file is just a singular document
that can be whatever exp. An executable, a photo, a text file etc.
Translate an absolute path into a relative path and vice versa.
By making the pwd command we can view the full path to the directory we a re currently in by
making a cd command and using the path that we just saw we can go anywhere we want in the
directories since we now know the full path to where we are.
Construct absolute and relative paths that identify specific files and directories.
When we use a relative path we can only access the files and directories that are contained within
the current directory whereas with absolute paths we give the cd command an argument that starts
from the root directory and it doesn’t matter where we are currently the command will send us to
the requested directory.
Use options and arguments to change the behavior of a shell command.
Through the use of options and arguments the basic commands that we learned gain new
functionalities that make them more versatile to use for navigation the directories of the system.
Demonstrate the use of tab completion and explain its advantages.
We use tab completion to complete the name of a directory or file for convenience, we can also
double tap tab to give us a list of files that contain the line of characters that we have written to that
point so that we can find the right one to select.

How can I create, copy, and delete files and directories?

With the use of rm we can remove files from directories, if we ad the -r option we can delete a
directory recursively, wit the use of mv we can move or rename a file or directory, with the use of
cp we can copy a file or directory. With mkdir we can create a new directory.
How can I edit files?
You can edit files by entering the nano text editor. It is a very basic text editor, that only works with
plain character data, so not tables images or other human readable data.
How can I combine existing commands to do new things?
By using pipes and filter we are able to combine the smaller commands to make much more work
than they can do on their own, this is basically how all of UNIX systems work, by combining small
programs that do one thing very well, into much larger more complex programs.
What is the command line?
The command line acts as a part of the os and is a scripting language at the same time. Through the
command line we can manipulate all the files and directories of the computer. We can also create
new files and programs directly through it.
How do you open the command line on your computer?
You can access the command line through the terminal, which is an application in itself or it canbe a
part of other applications or ides that you are using.
How can you navigate to a particular directory?
There are a couple of commands to navigate through directories cd we use to change the directory
by typing the directory we are trying to access as an argument to the cd command,
Where will cd on its own navigate you to?

Cd without an argument will send you to the home directory of the user.
Where will cd .. navigate you to?

It will navigate you one level up in the directory exp. Desktop/ test cd .. will result in us going to
Desktop.
How do you display the name of the directory you are currently in?
With the .
How do you display the contents of the directory you are currently in?
With the ls command.
How do you create a new directory?
With the mkdir command.
How do you create a new file?
With the nano command which is also a text editor, but we can also create an empty document with
the touch command.
How do you destroy a directory or file?
With the rm command for a file, where as for a directory we add the option -r
How do you rename a directory or file?
We rename or move a directory with the mv command.
What kind of program is Git?
Git is a version control system. It helps us manage the changes that are made to a project that we are
developing. It logs all the changes that are made so that in the future we would be able to check
every previous version of the project. It enables us to share our project with other developers so that
many people would have the chance to work on the project together and keep track of who is doing
what.
What are the differences between Git and a text editor in terms of what they save and their record
keeping?
A text editor creates a whole new file when saving the changes that we made to the document and
erases the previous version of that file. Whereas git saves the snapshot of that document and applies
the newest changes to that version of the document while at the same time saving all the previous
snapshots of the program in the database.
Does Git work at a local or remote level?
Git stores the the files locally in our development machine, this gives it the capability to be very fast
since it is retrieving the data from the device and it allows us to work without the need of an internet
connection since the files are stored locally.
Does GitHub work at a local or remote level?
GitHub works at a remote level since its main purpose is to allow developers to collaborate with
each-other. The the changes that are committed to a project are pushed to the main repository that is
stored on a server which all developers have access to and where they can see all the changes that
have been made to the project.
Why is Git useful for an individual developer?
It is a powerful tool that allows us to experiment and make changes to a project without the fear of
completely ruining the project. Having the possibility to take the project back to a previous version
is a very useful tool, seeing what changes you made, what portion of the code might have resulted
in issues, going back to a previous version to implement something better etc.
Why are Git and GitHub useful for a team of developers?
By allowing a team of developers to collaborate we can make bigger more complex projects, where
everyone can contribute and not cause any confusion as to what happened to the code and who
changed what, since everything is logged in the repository and the files cant be lost since it is
distributed and every version of the code acts as its own backup.
How do you create a new repository on GitHub?
You can create a repository by clicking the the new repository button from the list on the top right
corner of the page or you could simply create and initialize it from you pc and upload it to your
GitHub account.
How do you copy a repository onto your local machine from GitHub?
With the git clone command that we can get from the green get button from our repository on
github
What is the default name of your remote connection?
It is called origin.
Explain what origin is in git push origin main.

It is the default name and convention for our remote repository

Explain what main is in git push origin main.

Main is the main branch of the repository, in the future we will learn about multiple branches and
how they are all eventually merged into the main one.
Explain the two-stage system that Git uses to save files.
The first stage is the staging area when we have made a change to a particular document it is
outside of the staging are when we use the command git add with the name of the file, it is added to
the staging are, which acts a sort of waiting room, then when we give the git commit with a
message command, so that we can commit those changes.
How do you check the status of your current repository?
With the command git status, which will display a file that has been edited but not staged in red and
if it has been staged in green. If the changes have been committed the git status will display your
branch is up to date with main.
How do you add files to the staging area in git?
With the command git add and the name of the file that has been edited.
How do you commit the files in the staging area and add a descriptive message?
With the command git commit -m and a message in quotation marks and in case if you want to
make a more descriptive commit you can use git commit and it will take you to vs code, but only if
you have set it up beforehand.
How do you push your changes to your repository on GitHub?
With the command git push if you have only one branch (main) , if you have multiple branches you
use git push origin main.
How do you look at the history of your previous commits?
With the command git log
• What do HTML and CSS stand for?
HTML is Hyper Text Markup Language and CSS stands for Cascading Style Sheets
• Between HTML and CSS, which would you use for putting paragraphs of text on a
webpage?
HTML Is responsible for adding the content to a website all the texts, buttons blocks,
paragraphs etc are written in HTML.
• Between HTML and CSS, which would you use for changing the font and background color
of a button?
CSS is responsible for changing the design of the text and other elements that are present on
the screen.
• What is the difference between HTML, CSS and JavaScript?
HTML is responsible for adding the content to the page like the text the buttons and the
structure of the page the header, footer, body, tables lists etc. are all written in HTML, CSS
handles how those elements appear on the screen, how they are styled and JavaScript is the
one that handles the functionality of the web page or adding an layer extra functionality to
the page, like creating a menu that appears from a button. Adding this extra layer of
functionality makes the web page more appealing to modern customers.
• What is an HTML tag?
An HTML tag can be an opening or a closing tag. An opening tag is comprised of an
opening bracket a closing bracket and a word or or letter inside of it, whereas a closing tag
also has a / before the word inside the tag. The opening tag tells the browser that this is the
start of the HTML element and the closing bracket tells the browser that the element ends
there.
• What are the three parts of an HTML element?
The three parts of an HTML element are a the opening tag, the content of the element and
the closing tag.
• What is the purpose of the doctype declaration?
• <!DOCTYPE html> tells the browser what version of HTML you are using, in this case its
HTML 5.
• What is the HTML element?
• The HTML element encompasses all of the other elements inside the file, it is known as the
root element. All of the other elements are descended from it.
• What is the purpose of the head element?
• The head element contains all the metadata of the web page, this is information that has to
do with the formatting of the web page, how it looks etc. The contents of this element should
not be visible to the user.
• What is the purpose of the body element?
• The body element contains all the content that is visible to the user the titles, the paragraphs,
images, links etc are all contained within the body.
• How do you create a paragraph in HTML?
• You create a paragraph with the <p> </p> tags
• How do you create a heading in HTML?
• With the the h tags that go from h1 to h6, the lower the number is the higher the level of the
heading <h1> is the highest and <h6> the lowest.
• How many different levels of headings are there and what is the difference between them?
There are 6 levels of headings and the difference is the size of the heading that is displayed
which also correlates with its level. The lower the number of the heading the higher the level
is with h1 being the highest and h6 the lowest.
• What element should you use to make text bold and important?
• We use the the <strong> tag.
• What element should you use to make text italicized to add emphasis to it?
• With the <em> tag.
• What relationship does an element have with any nested elements within it?
• It has a parent child relationship, where the elements nested in it are considered its children
and the element that holds them inside the parent.
• What relationship do two elements have if they are at the same level of nesting?
• They are considered siblings.
• How do you create HTML comments?
• With the <!-- --> tags.
• What HTML tag is used to create an unordered list?
• An unordered list can be crated bu suing the <ul> tag and the elements within the list are
contained within the <li> tags, each line of an unordered list starts with a dot.
• What HTML tag is used to create an ordered list?
• An unordered list is created by using the <ol> tag and the elements within the list are
contained within the <li> tags, each line of an order list starts with a number.
• What HTML tag is used to create list items within both unordered and ordered lists?
• The list items within a list are created with the <li> tag
• What element is used to create a link?
• We use the <a> tag to surround the text we want to turn into a link, with the href attribute
inside of the brackets of the tag.
• What is an attribute?
• We use attributes to give tags extra functionality. An attribute can be used by itself or with a
value. In the case of links we use the href attribute with the a tag and we use the absolute
path as a value.
• What attribute tells links where to go to?
• The href attribute.
• What is the difference between an absolute and relative link?
• An absolute link is used to send us to pages that are part of another website, whereas relative
links are used for pages within our own website. The parts of an absolute link are the
protocol, the domain and the path within the website to the page, whereas in a relative link
we only use the path of our website.
• Which element is used to display an image?
• We use the <img> tag, this is a self closing tag which means id doesn’t have a closing tag
and we use the src attribute whee we ad the path to the image.
• What two attributes do images always need to have?
• The src attribute(the path) and the alt attribute(the descriptive text).
• How do you access a parent directory in a filepath?
• By using the ../ command in the path which means go back up one level.
• What are the four main image formats that you can use for images on the web?
• JPG. PGN, SVG. GIF
• What are two benefits of having well-written commit messages and a good commit history?
• So that you would be able to track your progress and have a clear log of the work that you
have done. In case of a bug, having a clear commit message will help you discern what
might have caused the issue.
• How many characters should the subject line of your commit message be?
• The subject line should be around 50 characters, with 72 being the hard limit.
• What are the main differences between external, internal, and inline CSS?
• External CSS is written in a separate file that we then link with the HTML file through the
<link > element that we insert within the content of the head tags. Internal CSS is written
within the <style> tags that are also inserted in the contents of the <head> tags, the
difference being that you don’t need a separate file for this method, its written in the HTML
file itself. Inline CSS is written inside of the tags that you want to style, we add the style=
attribute inside of the tag and we have to wite it specifically for every tag.
• What is the syntax for class and ID selectors?
• We write selectors for class with a dot then the name of class, then we add the curly braces,
the space between the curly braces we call the declaration block, the declarations are created
by a property and a value exp. .class{color: white}, whereas ids the only difference is
instead of a . we use a # at the beginning, both of them without spaces.
• How would you apply a single rule to two different selectors?
• I would group them like so .class1, .class2{ } a comma separated list.
• Given an element that has an id of title and a class of primary, how would you use
both attributes for a single rule?
• I would chain them like so #title.primary{}
• What does the descendant combinator do?
• The descendant contaminator creates a requirement for the selector so that its declarations
can only be applied to an element if that element is a descendant of the previous selectors.
So if a child is an ancestor to the child of the parent element, those declarations will be
applied to that element.
• Between a rule that uses one class selector and a rule that uses three type selectors, which
rule has the higher specificity?
• The rule that uses one class selector, since it has a higher specificity than the type selector, it
doesn't matter how many type sectors there are. If it were I type selector vs 3 type selectors,
the one with 3 would have a higher specificity.
• How do you select a specific element on your page with your browser’s developer tools?
• By right clicking it and selecting inspect element you will open the developer tools pane that
consists of the elements pane that shows the HTML elements and the styles pane that show
what CSS styles are being applied to the code.
• What does a strikethrough in a CSS element mean in your browser’s developer tools?
• It means that the style property that has a line through it has been overwritten by another
property.
• How do you change CSS in real time on specific elements of a web page with your
browser’s developer tools?
• You can change or add styles to your elements directly from the style pane without having to
change the source code and those style properties aren’t permanent.
• From inside to outside, what is the order of box-model properties?
• Content, padding, border, margin
• What does the box-sizing CSS property do?
• It makes the size of the content box, the padding and the border be equal to the values of the
height and width attributes.
• What is the difference between the standard and alternative box model?
• The standard box model has the size of the content area, padding and border all separate
from each other, os when you measure the total size of the box you need to take into account
the size of all the elements content area + padding + border equals total size of the box. The
alternative model changes this rule so that the total size of the box is set by the height and
width attributes.
• Would you use margin or padding to create more space between 2 elements?
• I would use margin.
• Would you use margin or padding to create more space between the contents of an
element and its border?
• I would use padding
• Would you use margin or padding if you wanted two elements to overlap each other?

• I would set the margin to a negative value so that the elements would overlap.
• What is the difference between a block element and an inline element?
• A block element such as <p> and <h1> take up the whole horizontal space and are stacked
one one top of the other, vertically and you can modify the size of the content box, padding,
margin and border, where as an inline element like <a> or <strong> are stacked horizontally
and when one box ends the other continues on the horizontal plane, they do not recognize
the commands of the block elements like margin and padding in the same way
• What is the difference between an inline element and an inline-block element?
• An inline-block will respect the height and width attributes as well as the top and bottom
margin and padding attributes.
• Is an h1 block or inline?
• H1 is block
• Is button block or inline?
• Inline
• Is div block or inline?
• Div is block
• Is span block or inline?

• Span is inline.
• What’s the difference between a flex container and a flex item?
• We create a flex container with the display: flex attribute, it allows the element to flex and
stretch according to the size of the window or screen, where as a flex item is an element that
is contained within another flex container. A flex container can be a flex item at the same
time if it has children or is a child itself.
• How do you create a flex item?
• You create a flex item with the attribute display: flex.
• What are the 3 values defined in the shorthand flex property (e.g. flex: 1 1 auto)?

• Flex-grow, flex-shrink and flex-basis

• What are the 3 defined values for the flex shorthand flex:auto?

• The three different values are flex: 1 1 auto, which means that the elements initial size are
set to the height and width attributes, but will fill out as much of the free space as it can and
it will get as small as it possibly can.
• How do you make flex items arrange themselves vertically instead of horizontally?
• With the attribute flex-direction: column.
• In a column flex-container, what does flex-basis refer to?
• In this scenario flex-basis means the width of the container.
• In a row flex-container, what does flex-basis refer to?
• In this scenario flex-basis refers to the height of the container.
• Why do the previous two questions have different answers?
• Because a flex container has two axes the main and cross axis. In the main axis, the children
of a container are laid out horizontally so for it to fill out the space of a container it would
need to stretch out horizontally which we set with the width, whereas when the axis is cross
the child need to fill out the vertical space of the container, which we set with the height.
• What is the difference between justify-content and align-items?

• Justify-content arranges the children horizontally along the main axis exp. Justify-content:
center, centers all the children in the middle of the horizontal line, whereas align-items
arranges them vertically along the cross axis which would center the children in the middle
of vertical line. If he had changed the direction of the container, these properties would be
reversed.
• How do you use flexbox to completely center a div inside a flex container?
• You use the justify-content: center property and the align-items:center property.
• What’s the difference between justify-content: space-between and justify-
content: space-around?

• Space between will give the children equal padding on both it’s sides, this causes the
distance between two children to be added up and on the children on the sides the distance to
the edge of the container is half the distance to the other children, whereas space-around
makes the distance between the children and the edge of the container all equal.
• Name the three ways to declare a variable
• var, old way, let new way and const new way for variables that don’t change values.
• Which of the three variable declarations should you avoid and why?
• Var since it is the old way and it doesn’t function exactly the way let does, for example it is
visible outside of code blocks and loops, which may cause problems.
• What rules should you follow when naming variables?
• You should name your variables in a way that is descriptive of the value that will be stored
in that variable and if it is formed of more than one word you should use camel case where
every new word starts with an upper case latter
• What happens when you add numbers and strings together?
• It will form a string it will concatenate it.
• How does the Modulo (%), or Remainder, operator work?
• It gives us the remainder of the first operand when it is divided by the second operand.
• Explain the difference between == and ===.
• == does type conversion when comparing whereas the === does not do type conversion. So
if we were to compare a ‘10’ with a 10 in the == they are equal whereas in the === they are
not equal since they have different types.
• When would you receive a NaN result?
• When a variable that is not a number or has no numerical value is converted to a number
type.
• How do you increment and decrement a number?
• With the ++ increment or – decrement operators.
• Explain the difference between prefixing and postfixing increment/decrement operators.
• The difference happens if we immediately try to store the value in a variable when doing the
incrementing or decrementing. If we want to store the value of the new number we have to
prefix the increment/decrement, if we want to store the value as it is before the
increment/decrement we postfix the operator.
• What is operator precedence and how is it handled in JS?
• Operator precedence is the same as the precedence that we learned in math, it decides which
operation will be resolved first and if the operators have the same presence the operations
are resolved from left to right.
• How do you access developer tools and the console?
• By right clicking the page and pressing inspect or inspect element.
• How do you log information to the console?
• With the console.log() function.
• What does unary plus operator do to string representations of integers? eg. +”10”
• It converts them to numbers.
• What are the eight data types in JavaScript?
• Numbers, bigint , string, boolean, object, undefined, null, symbol
• Which data type is NOT primitive?
• The object datatype
• What is the relationship between null and undefined?
• They both represent variables that have not been given a type. In the case of null we declare
it to be a null variable , whereas in the case of undefined when we declare a variable and we
don’t assign it a type it appears as undefined.
• What is the difference between single, double, and backtick quotes for strings?
• Single and double quotes do the same thing they are used to initialize a string and back ticks
can also be used to initialize a simple string, but they are more commonly used to insert
anther variable within the string by using the ${} inside of them.
• What is the term for embedding variables/expressions in a string?
• Embedding a variable/expression in a string means to insert it within the string, we do this
with the use of back ticks and the ${} symbols.
• Which type of quote lets you embed variables/expressions in a string?
• Back-ticks.
• How do you embed variables/expressions in a string?
• ${}
• How do you use escape characters in a string?
• With the \ we type it before the escape character to signify that it is supposed to be a part of
the text and not the end of the string.
• What is the difference between the slice/substring/substr string methods?
• Slice can be used with positive and negative number to select which part of the string we
want to select. If we use negative numbers it starts from the end of the string going
backwards. Sub string can only be used with positive numbers if we give it a negative
number it will just start from the 0 position. Sub-str can also be used with negative numbers
to start from the end, but in the case of sub str the second clue we give is not the stopping
point of the slice, but the number of characters we want to slice.
• What are the three logical operators and what do they stand for?
• && - stands for and and they denote that a statement can only be true if both operands are
true, ||- stands for or, it denotes that for a statement to be true at least one of the operands
need to be true and !- stands for not, it denotes the opposite of the statement it precedes.
• What are the comparison operators?
• > greater than, ← lower than, >=- greater or equal than, <=- lower or equal than, =- equals,
==- equality with type conversion, ===- strict equality without type conversion.
• What are truthy and falsy values?
• Truthy values are values that when converted to boolean have a 1 or true value and falsy
vale are ones that have a 0 or false boolean value.
• What are the falsy values in JavaScript?
• Null, undefined, 0, ‘’, Nan
• What are conditionals?
• Conditionals are java script functions that we use for splitting up the code when a condition
needs to be met for a block of code to be executed. These can be if else, else if, switch and
the ?.
• What is the syntax for an if/else conditional?
• If () {
} else{
}
• What is the syntax for a switch statement?
• switch(expression){
case choice1:
code
break;
case choice2:
code
break;
default:
code
}
• What is the syntax for a ternary operator?
• Let variableName = (expression) ? True : False;
• What is nesting?
• Nesting is when we insert another if conditional inside another if.
• How do you open developer tools?
• By right clicking the page and selecting inspect or by f12 or ctrl +shift+p
• How do you change screen size of a website using developer tools?
• By entering the developer tools and pressing the phone or tablet button on the top left corner
of the dev tools window
• What is a breakpoint?
• A break point is a function that stops the code from executing at the point where that break
point has been implemented in the code. It is a useful tool for debugging since it can help us
see how our variables look at that point of execution.
• How do you set a breakpoint?
• There are many ways to set a break point you can use an event listener break point that stops
the java script execution when an event is excited, you can add the debug function on the
console log, you can use exception breakpoints to pause the execution when a caught or
caught exception happens, you can select a line of code from the debugging window where
you want the code to stop or you cold select a line that stops a code when a condition is met,
when a XHR URL contains a certain string pattern or we can add a break point on a code
that changes a specific dom element or its children.
What are functions useful for?
• We use functions to create snippets of code that do a specific task, we use them so that we
can call those functions every time we need to run that function, instead of writing those
particular lines of code every time we need them we can just call the function.
• How do you invoke a function?
 We invoke a function by typing its name with brackets at the end. The brackets might be
empty if it doesn’t require an argument or we can add arguments within the brackets of the
function.
• What are anonymous functions?
Anonymous functions are smaller functions usually one liners that have no name, no way to
call them, they are usually called within another function.
• What is function scope?
Everything that happens within the brackets of the function is something that is within the
scope of the function. Lets say we have a var a, that is declared within the function, methods
outside of that function do not have access to that variable, where as if that var a was
declared within a function that has a function nested within it, the nested function would
also have access to that variable.
• What are return values?
When we can create void functions that return nothing or we can create a function that
return a value, that value might be anything from a string, int to another function.
• What are arrow functions?
• Arrow functions are similar to anonymous functions, they are declared with the signs =>. it
may have no parameters, one or many parameters. If it has no parameters it need to have
brackets before the signs when declared like so () => function content.
• What are the three stages in the problem solving process?
First you need to understand the problem, how are you going to fix it. Then you plan ahead,
you split the problem into smaller problems that you solve first and problem by problem you
solve it and write pseudo code, which is basically going through the solution steps in a high
level by just writing in plain english.
• Why is it important to clearly understand the problem first?
It is important because then you will be able to plan ahead on how to solve the different
parts of the problem, what are you going to solve first and what is required for this problem.
• What can you do to help get a clearer understanding of the problem?
Rewrite the problem in your own words in plain english, with your words, use diagrams if
necessary and explain it to someone else to see if you truly understand it.
• What are some of the things you should do in the planning stage of the problem solving
process?
YOU ask if there is going to be an interface, where the data will be fetched , what steps you
will take to solve it.
• What is an algorithm?
An algorithm is a set of steps that we follow in order to solve a problem.
• What is pseudocode?
Pseudo code is how we write the code in a high level in plain english so that we can get a
better feel of how the program will flow and what part goes where.
• What are the advantages of breaking a problem down and solving the smaller problems?
It is much easier to solve smaller problems that to start solving the entire problem at once.
We might get stuck, go in a wrong direction forcing us to make big changes, we might get
confused looking at the bigger problem etc.
• What are three reasons why you may see a TypeError?
When we pass or return the wrong type to the method or return it from the method, when we
try to modify a value that cannot be changed and when we try to do something that is not
allowed to a value.
• What is the key difference between an error and a warning?
A warning is a part of the code that might cause issues now or in the future, whereas errors
are parts of the code which break the program, they might not allow the program to run at all
or cause issues when using that part depending on the type of error.
• What is one method you can use to resolve an error?
We can use debugging to resolve errors by going through the code one line at a time to
check what a part of the code is doing that we might not think about, if we are talking about
a specific method we can use the console.log() method to see in the console what value the
code is returning in that specific part.
Why is it important to write clean code?
It is important to write clean code since it will be more understandable to maintain it in the
future, if it follows conventions, it is much easier to understand and change, not only for
you, but your whole team.
• Name 5 clean code principles previously mentioned
Don't overuse comments, write comments to explain why and not how, revise before starting
to code, use correct indentation, follow correct naming standards for functions and variables
• What is the difference between good comments and bad comments?
A good comment explains why you have decided to solve the problem in the way you have,
whereas a bad comment explains how the code works. How the code works should be self
explanatory, through the use of correct naming conventions.
• What is the DOM?
The DOM is a representation of the the different HTML elements and their children that are
present in the document.
• How do you target the nodes you want to work with?
There are a few different ways that you can target them. We can use CSS style selectors
like .div, #class, relational selectors like firstElementChid.
• How do you create an element in the DOM?
By using the createElement() function.
• How do you add an element to the DOM?
By using the appendChild or insertBefore(newNode, referenceNode).
• How do you remove an element from the DOM?
ParentNode.removeChild(childToRemove).
• How can you alter an element in the DOM?
If we have lets say a div element we call div.style.color we will change the color of that div.
• When adding text to a DOM element, should you use textContent or innerHTML? Why?
Text content is better because inner HTML can be used for JavaScript injection, which is a
security concern.
• Where should you include your JavaScript tag in your HTML file when working with DOM
nodes?
In the end of the file since, it will wait for the document to be rendered first \, then add the
dom elements.
• How do “events” and “listeners” work?
An event is performed when a certain action is done like clicking a button and saying hello,
an event listener is listening to see if that action is being done somewhere in an element on
the page so that it can perform the event.
• What are three ways to use events in your code?
You can add the event directly on the html, you can separate it on a javascript file and you
can add an event listener.
• Why are event listeners the preferred way to handle events?
Because it is more robust, you can add many event listeners to the element and add event
listeners of the same type.
• What are the benefits of using named functions in your listeners?
Because it is more clear and we can use that function on different places around the code.
• How do you attach listeners to groups of nodes?
We use the queryselectorall method for a specific element in the document and that creates a
node list.
• What is the difference between the return values of querySelector and
querySelectorAll?
Query selector receives just one element, whereas the query selector all makes a node list of
all the elements, by something that they have in common.
• What does a “nodelist” contain?
A node list contains a list of the elements that we filtered for.
• Explain the difference between “capture” and “bubbling”.
With capture we go down to the element we were pressing and our click dos not go further
down from where we pressed and it starts to bubble. Whereas with bubbling our pres goes
through every element that is a parent of the subsequent element that we pressed, so in a
way it is bubbling upwards.
• What is the difference between objects and arrays?
An object is a non generic class in java script that can be created with the {}, and entering
different variables and functions, within the brackets to create the body of the object. The
elements of an object have are a key-value pair, every value has a key for example id:1, the
of the object has the value 1. whereas an array is similar to an object in that it can hold other
variables and other objects, it is created with the [] brackets, it does not contain functions
that can be a part of its body, or it doesn’t contain variables that are a apart of its body, it just
stores them and has methods to access them.
• How do you access object properties?
Object properties can be acceses in two ways, in this method object.id, with a dot and the
key of the value or with [] brackets like this object[“id”]
• What is Array.prototype.map() useful for?
It is useful to transform the data of the array and store it in a new array, we can add
parameters to the map to specify how the array will be transformed.
• What is Array.prototype.reduce() useful for?

• Array reduce is used to calculate a value from the values that are within the array, for
example calculating the sum of the age of the array members.
• Why should you use Emmet?
To remove the need to write too much boiler plate on our own.
• What are some useful Emmet abbreviations?
Div.name, div>h, ( div>h)+div
• What syntax would you use to create this element <p class="text"></p>?
p.text
• What syntax expands to an element with a child element inside of it? For example:
<div><p></p></div>
div>p
• What syntax would you use to create three elements that have the same class name?
• li.name*5
• What is the xmlns attribute?

It defines what dialect of XML you are using and in our case we would be using the svg
dialect.
• What are some situations where you wouldn’t want to use SVG?
When we need to have an image with a lot of details like a real life scene or something more
realistic.
• What are the benefits of “inlining” your SVGs? What are the drawbacks?
• If you inline svg-s you can edit them with JavaScript, whereas if you link them they will
appear like a simple picture. In lining does though increase the loading time of the HTML
and make you code harder to read.
• What is a table?
A table is an HTML element that is used to structure your text in a table format it has the
main tags <th>, <td>, <tr>.
• Why is it a bad idea to use HTML Tables for page layout?
Because it has limited edits, its not fully responsive and it does not have all the styling
options that other tags have.
• What are caption elements useful for?
Is a title that we can add to the table.
• What is the scope attribute?
The scope attribute is used to select the number of rows you want to select for the specified
styling.
• Why would you want to use a CSS reset?
To make the default styling of all browsers the same.
• Why would you want to use em or rem for font-size instead of px?
 Because they will scale along with the rest of your website, so in the case of rem the default
size of the font is 16px, and adding a 1rem, 2 rem the scaling is consistent. Instead of
manually setting the font for each element.
• What are some instances where you might want to use vh and vw?
When we want to set the size of an element to change along with the webpage, lets say we
have a div that we always want to stay at 40% of the width of the window.
• What are some instances where you might want to use px instead of a relative unit?

When we set the padding or margin of an element, if we set them with rem they will scale
along with the font size, which will change the white space in the element, whereas with px
they will stay static no-mater the size of the font.
• What are the 2 ways to add fonts that are not installed on a user’s computer?
Down lading a custom font package or using a font style from an online resource like google
fonts and liking that source to your code,
• What is the ‘system font stack’ and why would you want to use it?
Because it gives us a default font style that is inline with the system default, it is a
convenient way to give your font a more appealing look and it doesn’t default to the default
HTML styling which is ugly.
• Which property would you use to increase or decrease the space between letters in a word?
letter-spacing
• Which property would you use to increase or decrease the space between lines in a
paragraph?
Line-height
• Which property would you use to make an element transparent?
opacity
• Which property would you use to make a background image tile?
background-repeat
• Which property would you use to add scrollbars to an element?
Overflow: auto
• Which property would you use to add a shadow behind an element?
box-shadow
• Which property would you use to create rounded corners on an element?
border-radius
• How would you use border-radius to make a circular element?
• Border-radius:50%
What is the difference between the child combinator and the descendant combinator?
Child will only select the child of the parent whereas the descendant will select all of the
elements even those within the child.
• How does the syntax of pseudo-classes and pseudo-elements differ?
Pseudo classes use :, whereas pseudo-elements use ::.
• Do pseudo-classes exist somewhere in HTML? Do pseudo-elements?
 They are formed based on your content on the HTML they are formed based on the position
of the elements on the HTML. Pseudo-elements allow you to modify your elements based
on their structure.
• Name two ways you could select every second child of an element, starting with the first.
:nth-child(even) or :nth-child(2n)
• What is the difference between div:first-child and div:last-child? What will
each select?
One will select the first element in the child list one will select the last element in the child
list.
• What selector would you use to style a button a user is currently hovering over? How about
one that is currently being clicked on?
:hover for hovering and :active for a pressed button.
• How could you select all input elements with a type of text?
[div*=”text”]
• How could you select all classes that begin with thunder?

[class^=”thunder”]
• What is the difference between static and relative positioning?
Static means that it just follows the positioning of the rest of the document, so if you have h1
as the first element of a div, it will be at the top, whereas with relative you can modify the
position of the h1 relative to the div so if you add top 20px it will move the element 10 pix
from the top.
• What is absolute positioning useful for?
It is useful when you have an element that you always want to appear on screen like a
floating chat head on a page.
• What is the difference between fixed and sticky positioning?
Fixed will always stay on one place on the page no mater how the view box moves if you
scroll etc. it will stay on the same place on the page. Whereas with sticky it will start as a
static element then when the border of the page approaches it becomes relative until its
container is alow not a part of the window anymore, then it disappears.
• What are the four CSS math functions we covered above?
Min- minimum number in brackets,max- max number in brackets,calc- use itto make
calculations without worrying on the metric,clamp- use it to set main , medium, max
number.
• How do we use CSS math functions in our CSS?
We use it to set values that can change according to the requirements of the screen to make
our page more responsive.
• How can CSS functions help make websites and applications more responsive?
Because we can set values within the calculations that will change according to the size of
the screen.
• How would you declare a custom property with a name of text-color?

:root{--text-color:blue;}
• How would you access a custom property with a name of background-color?
div{background:--background-color;}
• Where would you declare a custom property to have its scope be global and accessible by all
other selectors?
:root{}
• Where would you declare a custom property so that a user’s theme setting from their OS or
browser was taken into account?
We use the prefers-color-scheme media query.
• What is the most used browser currently?
Chrome
• What was the original name of the first web browser?
WordWideWeb Browser
• How are mobile browsers different on Apple mobile operating systems from Android?
All different browsers on IOS are re skinned versions of safari, which means they user web
kit as the render engine.
• What are some advantages of using a CSS framework?
Easy to launch an app, makes for very quick development and the standards are set so its
easier for multiple people to work on one project.
• What are some disadvantages of using a CSS framework?
Bloated code, boring designs. Since these frameworks are made to work with ass many
browsers as possible they have code that is written so that even the oldest versions of
browsers are supported which add a lot of bloat to your project and since its very hard to edit
the code of frameworks its recommended that you do not edit them to much, this leads to a
lot of websites looking the same.
• What are some advantages of using a CSS preprocessor?
The syntax is easier to read, easier to set variables, less time to write code.
• What are some disadvantages of using a CSS preprocessor?
• Much harder to debug longer compile times, don’t have direct access to CSS, harder to
remove once implemented in aproject.
• Explain what the form element is for and what two attributes it should always include.
The form element is a container element like div, it is used to create input sections for our
pages. It needs to contain two essential elements the action element that is responsible for
telling the backend where the request is being sent from and the method attribute which tells
the backend what kind of method will be used when submitting the request from the form
element.
• Explain what form controls are at a high level.
Form controls are the elements which allow us to input our data in the form element, for
example the input element is what we use for creating a field for adding our inputs and the
label element is responsible for naming that field so that the user can know what that filed is
for.
• What is the name attribute for?

The name attribute is used to name the input and label field that that is more understandable
for us developers, what that particular input field is for. In most cases we would name the
input and label field with the same name attribute to show that they are related.
• What are the three most common form controls you can use for allowing users to select
predefined options?
The email, password, date, numbers
• What are the three types of buttons in HTML?
The submit which is the default which would submit the form data, the reset which resets all
the input fields to their default state and the generic button, which we would have to make a
custom functionality for in JavaScript.
• What are the two most challenging aspects of styling forms?
The default browser styling changes how our form inputs will look so we have to override
them and making custom styles for some form inputs like dates and checkboxes is very
difficult.
• What does the required validation do?

Required stops the brow3ser from submitting the form unless that field with required has
been filled.
• What validations can you use for checking text length?
Min-length and max-length
• How can you validate the minimum and maximum of numeric inputs?
Min and max attribute.
• What can you use the pattern validation for?
To see if the users input follows a certain pattern, that s is needed for the form data to be
valid.
• What pseudo CSS selectors are available for styling valid and invalid inputs?
The valid and invalid pseudo selectors.
• How can you use Flex to make a two-dimensional layout?
When we add the modifier display:flex, we are able to order our flex children in main and
cross axis.
• Why was CSS Grid introduced?
Css grid was introduced to make it easier for developers to order items in two dimensions
and it helps with keeping them in a consistent size.
• Which CSS layout module would you use to easily make equal sized items in a container?
Css grid is used for that
• How does an HTML element become a grid item?
By applying the display:gird modifier.
• What is the space between lines on the grid?
That is the gutter or alley and it is defined by using the gap modifier on a grid item.

• How do you set gutters (also known as alleys) in the grid?

If we type gap:50; then all of the cells will have a gap of 50px between then (rows and
columns). We can also define specific gaps for rows and columns

• Describe what happens when you have more content than defined tracks.
Then CSS will start to line them up implicitly, basing it on the explicitly defined rows. So if
your explicitly defined rows look like grid-template rows: 50px 50px, the following
elements will all be arranged in rows that have two cells.

• How could you change the size for those undefined tracks?
By using grid auto-rows, we lets say select 50px and then all of the other rows that will
come after the explicit rows will have a row width of 50px.
• Explain the difference between a track and a line.
A tack is the space between the gird lines. So the space between column line 1 and 2 and
row line 1 and 2 is the first cell. Whereas the lines are just the lines that separate the
different grid tracks and cells.
• What is the smallest unit on a grid?
A cell

• What kind of value do we give to the grid-column-start or grid-column-end

properties?
We give them numbers.

• Which property can we use to combine all the start and end values for a grid item?
We use grid area. Like so gird area: 1/1/2/2

• Which grid container property can map out a visual structure of grid items?
With grid area we can give every gird section a specific name that we can then call in the
gird area mofifier so that the cell takes that form.
• How do you create several grid tracks of the same size without manually typing each one
out?
We use repeat(2,3…, 1fr or other value 20px)
• What is the difference between a static and dynamic size value?
A static size value is a value that we have declared that doesn’t change with the changing of
the view port. A static size value is 1px, whereas dynamic vales change as the view port
changes since they have a value that is decided by the size of the view port.
• How can you assign a grid track a flexible value that changes depending on the remaining
space available in the grid?
 We use the value fr
• How can you assign grid tracks an uneven distribution of the remaining space in a grid?
We can dive it a multiplier in front of the fr value, so 2fr 1fr, would mean that the first
column or row would have a size twice the second one.
• Which CSS functions will return the smallest or largest value supplied to them?
We use the min for the smallest and max for the largest value.
• Which CSS Grid-only function allows you to supply a minimum and maximum track size
that is calculated in realtime?
It is the function minmax, that specifies the smallest and the largest value the flex itmes are
allowed to have.
• Which global CSS function allows you to supply a minimum, ideal, and maximum value
that is calculated in realtime?
It is called clamp, you enter three values the min the ideal and the max.
• What attribute of repeat() can be used to fill in as many grid tracks as possible, given
certain constraints?
Auto-fill will create as many tracks ass possible to fill the empty space in the grid container.
If there are more gird items to add it will add it to those spaces, if there aren't any it will just
create empty cells that will have the size specified in the repeat function for example
repeat(auto-fill, minmax(150px,1fr), will create as many 1fr tracks as possible as long as the
grid container is bigger than the explicitly declared items.
• What is the difference between auto-fit and auto-fill?

Auto-fit will create new grid items but it will collapse them so that the the explicitly
declared items will expand to fill the empty space, whereas the auto-fill, will cerate new
implicit cells although it will keep all of them the same size as the explicitly declared ones,
its as if it is saving the space for the new cell.
• When might you use Flexbox over Grid?
When you have to align items in one direction its probably better to use flex-box since its
easier to move the items in one line with the different flex options.
• When might you use Grid over Flexbox?
When we have to style different items in two axes its better to use grid since we have control
over rows and columns through grid.

• When might you use the two of these tools together?

We can easily mix the two in different scenarios, for example when we want a flex parent to
have its children be gird items we can easily do that. Then we would be ab;e to style how the
grids are organized in in the axis of the flex parent and within the grid item we can order the
items through the grid in both axes.
• Write an object constructor and instantiate the object.
Function animal(name )={this.name = name;}
let rabbit = new Animal(“jack”);
• Describe what a prototype is and how it can be used.
A prototype is an object that is inherited by another object. It can provide variables and
methods to the object that inherits it.
• Explain prototypal inheritance.
Every object that you create in java script will inherit some methods from a prototype
object. The chain goes all the way to the Object.prototype, after that prototype if we search
for its prototype we get a null return.
• Understand the basic do’s and don’t’s of prototypal inheritance.
When setting the prototype of an object we use the method
Object.setPrototypeOf(Player.prototype, Person.prototype)
this sets the prototype for the object Player to Person. The
wrong way to do it is Player.prototype = Person.Prototype. In
this case we are directly referring to Person.prototype and
not copying it. Now if we modify Player in some way we are
modifying Person which is the prototype.
• How does this behave in different situations?

• In the global context it references the global object which is window in JavaScript or global
in Node. When you create an object and you use the this within the method of the object ,
you are referencing the object the method belongs to, we could also do this indirectly by
using the call and apply methods of the function object.
• How does scope work in JavaScript?
Depending on where you add your variables they will be accessible to the elements which
are apart of the same scope or the parent scopes.
• What are closures and how do they help in creating private variables?
Closures are functions that have been returned by a previous function that was called and
that is saved within a variable. It contains all the variables of its parent function from which
it was returned. We can write multiple function within a parent function and return them as
an array, we can then call them from the variable where they were stored and they can be
used as an accessor to the variables that were inside the parent function from where they
were returned.
• What common issues can you can face when working with constructors?
You need to use the keyword new, when declaring a constructor otherwise the program wont
work.
• What are private variables in factory functions and how can they be useful?
In a factory function we are basically bundling different functions together and we use those
functions to modify the different variables that are inside of it without having access directly
the those variables from outside of the function.
• How can we implement prototypal inheritance with factory functions?
When saving a function to a variable we can use de-structuring to pick the functions that we
want from the parent function that we are saving. We then use the array of functions that we
selected from that parent function and return them from the other parent function from
which we are calling them. So an example would be we save the functions getPoints and
getName from the player function, in the array playerFunctions, then when we return them
 when we call the teams function along with the other functions that are within the teams
function.
• How does the module pattern work?
When we immediately invoke a function expression to bundle a bunch of functions and
variables together we call it the module pattern. The difference between a factory function
and a module is that we use the factory function to create multiple objects like creating
multiple players in a game, whereas we use the module to bundle different related functions
together, that we call once and we store their results in a variable. We do not have access to
variables from inside the module.
• What does IIFE stand for and what are they?
I basically explained it in the upper part.
• What is the concept of namespacing and how do factory functions help with encapsulation?
• When writing code we might encounter situations where different functions end up with the
same name, to avoid getting different functions that do different things mixed up. We can
create modules that contain those different functions and call them from there. So we might
have different modules exp. Cars and trucks. Then we can call the function run from both of
these modules Cars.run and Trucks.run, they will both be called but have different
functionality within then and we cant get them mixed up since they are a part of different
name-spaces Cars and Trucks.