Scribd
Upload
8 views

Odin Knowledge Check

Uploaded by

2205951
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Odin Knowledge Check

Uploaded by

2205951
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Odin Knowledge Check

1. Open-source software is software in which the code is available to public to review and
modify whereas in Closed source software the code is not available to public to modify and
review.
2. A web server is a computer on which a website is hosted.
3. When multiple computers/devices are connected with each other it creates a network.
4. Any computer linked to a network has a unique address that identifies it called IP address.
5. Router is a device that connects multiple networks together.
6. A client is a typical user’s internet connected device that fetches data from servers.
7. Server is something where the web pages and data are stored.
8. Git is a Version Control System. (It’s a epic save button)
9. Git:
 Commands related to a remote repository:
 git clone [email protected]:USER-NAME/REPOSITORY-NAME.git
 git push or git push origin main (Both accomplish the same goal in this context)
 Commands related to the workflow:
 git add .
 git commit -m "A message describing what you have done to make this snapshot
different"
 Commands related to checking status or log history
 git status
 git log
10. HTML stands for Hypertext Markup Language.
11. CSS stands for Cascading Style Sheets.
12. Three parts of an HTML element are ‘<opening tag>content<closing tag>’.
13. The purpose of doctype is to tell the browser which version of HTML it should use to render
the document. For HTML5 its ‘<!DOCTYPE html>’.
14. <html> element is the root element of the document meaning every other element after it
will be a descendent of it.
15. The purpose of <head> element is to store all the meta information about our webpage and
data to render the document properly.
16. The <body> element is where all the content that will be displayed to the user will go.
17. <p> Paragraph tag
18. <h1> to <h6> Heading tag
19. <strong> for bold
20. <em> for italic
21. When we create a nested element we create a parent-child relationship between them.
22. If two elements are at the same level then they are ‘Siblings’.
23. <!-- and --> for HTML comments.
24. <ul> unordered list, <ol> ordered list, <li> list items
25. Anchor element <a> is used to create a link.
26. An HTML attribute gives additional information to an HTML element and goes in the opening
tag of the element.
27. ‘href’ attribute tells the links where to go.
Eg: <a href="https://www.theodinproject.com/about">About The Odin Project</a>
28. When we click on a link we can make it open it on the same tab or a new tab using ‘target’
attribute. For same tab use target=”_self” and for new tab use target=”_blank”.
29. When we use the target attribute, we take some security considerations, such as we use
rel=”noopener” so that the opened link is prevented from accessing the webpage from
which it was opened and red=”noreferrer” prevents the opened link to know which webpage
has the link to it.
30. Absolute links are the links to the pages on other websites on the internet.
Relative links are the links to the pages of our own website.
31. <img> tag is used to display an image.
32. Every image tag must have <src> tag which contains the location/link of the image used on
the webpage and <alt> tag which displays a text describing the image incase the image does
not load properly.
33. To go to a parent directory, we need to use ‘../’.
34. Syntax for class selector:
.title{…}
Syntax for id selector:
#title{…}
35. A descendant combinator is used to select two selectors such that the child element will be
selected only if the ancestor element is selected. Eg. ‘.ancestor .child{ … }’
36. A single rule can be applied to two different selectors as ‘.sel1.sel2{…}’  Chained Selectors.
37. Three ways to add CSS in html file:
1) External CSS: Another file with extension .css is created which is linked in
html file in head tag. Eg. <link rel="stylesheet" href="styles.css">
2) Internal CSS: CSS is added in the html file itself using in head tag using
<styles> tag.
3) Inline CSS: Adding styles directly to an element by adding a styles attribute in
the opening tag of that element.
38. ID selector > Class selector > Type Selector
39. Block elements are stacked upon each other and Inline elements are places alongside each
other.
40. Padding increases the space between the contents of the box and border of the box.
Border adds space between padding and margin.
Margin increases space between boxes and adjacent boxes.
41. When we use ‘box-sizing=border-box’ and height and width are 100px then all the padding
and border would be under that 100px.
42. With flex-direction: row, the primary axis runs horizontally, from left to right. When we flip
to flex-direction: column, the primary axis runs vertically, from top to bottom.
43. We can change how children are distributed along the primary axis using the justify-
content property, For the cross axis, things are a bit different. We use the align-
items property.
44. The fundamental difference between the primary/cross axis. When we're talking about
alignment in the cross axis, each item can do whatever it wants. In the primary axis, though,
we can only think about how to distribute the group. That's why there's no justify-self.
45. In a Flex row, flex-basis does the same thing as width. In a Flex column, flex-basis does the
same thing as height.
46. flex-grow controls how the extra space is distributed when the items are smaller than their
container.
47. flex-shrink controls how space is removed when the items are bigger than their container.
48. By setting min-width: 0px directly on the Flex child, we tell the Flexbox algorithm to
overwrite the “built-in” minimum width. Because we've set it to 0px, the element can shrink
as much as necessary. This will prevent the content from overflowing from the box on
shrinking.
49. ‘gap’ allows us to create space in-between each Flex child.

You might also like