├── README.md ├── frontend-101 ├── 01-html-basics │ └── README.md ├── 02-block-and-inline │ └── README.md ├── 03-css-grids │ ├── ASSIGNMENT.md │ └── README.md ├── 04-resume │ └── ASSIGNMENT.md └── 05-bootstrap │ ├── ASSIGNMENT.md │ └── README.md ├── git-masterclass ├── 01-introduction │ └── README.md ├── 02-basic-commands │ └── README.md ├── 03-branches │ └── README.md └── 04-practical-uses │ └── README.md └── linux-masterclass ├── 01-setup └── README.md ├── 02-introduction ├── README.md └── notes.pdf ├── 03-streams-and-files ├── README.md └── notes.pdf ├── 04-users-and-permissions ├── README.md └── notes.pdf ├── 05-processes ├── README.md └── notes.pdf ├── 06-partitions ├── README.md └── notes.pdf ├── 07-kernel ├── README.md └── notes.pdf └── 08-resource-utilization ├── README.md └── notes.pdf /README.md: -------------------------------------------------------------------------------- 1 | # Virtual Tech Notes 📖 2 | 3 | ![virtual-tech-notes](https://socialify.git.ci/virtual-tech-school/virtual-tech-notes/image?description=1&descriptionEditable=This%20community-maintained%20repository%20consists%20of%20notes%20for%20our%20Bootcamp.%20Feel%20the%20need%20to%20improve%3F%20Contribute%20now!&font=Inter&language=1&owner=1&pattern=Charlie%20Brown&theme=Dark) 4 | 5 | These notes are based on our videos [here](https://youtube.com/c/ApoorvGoyalMain). In order to contribute, please take note of the following - 6 | 7 | 1. All the notes should be added/modified in the relevant README.md files. This is specifically because our website will look for the README.md files to display them. 8 | 2. Please refrain from adding any images into the project directory for displaying them in the README file. Keep everything text-based to keep the size of this repository in check. 9 | 3. If you, however, feel the need to add images of diagrams, please host them elsewhere, and add their links into the README files to display them. 10 | 4. You're free to add PDFs of handwritten notes for the relevant topics/videos, however the naming convention for that PDF should be "notes.pdf" so that our website can identify it. Also, do make sure that the PDF does not exceed the size of 1MB. 11 | 5. When making a PR, if a markdown or PDF version for that topic already exists, please tell us what improvements did you make in the PR. 12 | 13 | ## Connect with our mentor 14 | 15 | 16 |   17 | 18 | 19 |   20 | 21 | 22 |   23 | 24 | 25 |   26 | 27 | 28 |   29 | 30 | 31 | 32 | 33 | 34 | ## Join Virtual Tech School 35 | 36 | 37 |   38 | 39 | 40 |   41 | 42 | 43 | 44 | 45 | ## Our Contributors 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /frontend-101/01-html-basics/README.md: -------------------------------------------------------------------------------- 1 | Contribute notes based on [this](https://www.youtube.com/watch?v=JLKy8apeLac&list=PL2kSRH_DmWVbKFpYn3drI8Qf66ZpvZ_3L&index=2) video now! 2 | # **HTML** # 3 | HTML stands for Hyper Text Markup Language.
4 | ! = For Emmet Abbreviations(also this brings in the boiler plate in VScode).
5 |
6 | 7 | ## **Tags in HTML** ## 8 | HTML has different tags to do different things. 9 |

Types of tags:

10 | 14 | Tags are not case sensitive (good practice to do all in smallcase) 15 |
16 | 17 | ## **Understanding boilerplate of HTML** ## 18 | 1. <!DOCTYPE html> tells the browser that this is an HTML document.
19 | 2. <html lang="en"> the root tag of a HTML document.
20 | It contains two main tags 21 |
    22 |
  1. <head> - contains metadata/information about the document like title, description, charset, link etc.
    2. 23 |
  2. <body> - the body of the document which gets displayed on the web page.
    3. 24 |
25 | 3. <meta charset="UTF-8"> displays all content in ASCII text.
26 | 4. <meta http-equiv="X-UA-Compatible" content="IE=edge"> helps to load in internet explorer.
27 | 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> to make your site responsive.
28 | 6. <title>Document</title> title of your web page (name of the tab).
29 | 7. <body> ... </body> content that you see on your webpage.
30 | Anything from the opening tag to the closing tag is known as HTML element. All HTML tags have attributes.
31 | Attributes are way to provide additional information about the tags. It is always defined in opening tag.
32 | Attributes always come in name="value" pairs. 33 |
34 |

Some Common HTML tags

35 | 1. Heading : h1 to h6 , h1 is largest in size and most important whereas h6 is smallest in size and least important.
36 | 2. Paragraph : to write paragraph texts.
37 | 3.Links : <a> ... </a> tag (anchor tag) used to add links to web page . Has an attribute "href" that specifies the link that you want to redirect to.
38 | (target="_blank" opens link new tab)
39 | 4.Images : img tag for images. 40 |
41 |

It has following attributes:

42 | 1. "src" to add link of the image.
43 | 2. "alt" - alternative text that will appear when image fails to load.
44 | 3. "width" & "height" - value default in pixels.
45 |

Types of urls(Uniform Resource Locator):

46 | 1. absolute url : Links that are hosted on other website.
47 | 2. relative url : Links that are hosted within website.
48 | "title" attribute : if you hover over the content this title comes. 49 |
50 |

Style attributes

51 | In HTML, style attribute comes in pair.
52 | For eg:
53 | <tag style="color: black; background-color: blue" ></tag> 54 |

Some common css style properties

55 | 65 |

Color representation

66 | 75 | 1.hue : degree on color wheel (value 0 to 360) 0 is red, 120 is green, 240 is blue.
76 | 2.saturation : % value to give a shade of grey ( 0% max shade of grey, 100% no shade of grey).
77 | 3.lightness : % value where 0 is black and 100% is white.
78 |
79 | 80 |

CSS (cascading style sheet)

81 | CSS is used to format layout of a web page.It is very helpful as it helps setting layout for multiple pages at once.
82 | Cascading means whatever you apply to parent tag gets applied to children tag as well.
83 |

CSS can be added to HTML in 3 ways:

84 | 1. Inline CSS : using style attribute.
85 | 2. Internal CSS : if we add a <style>..</style> tag inside head tag.
86 | 3. External CSS : adds style in different file and add a link in HTML file.
87 | 88 |

Linking css style sheet:

89 | <link rel = "stylesheet" href="style.css">
90 | 91 |

Comments in HTML

92 | <!--...-->
93 | Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code. 94 |
95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /frontend-101/02-block-and-inline/README.md: -------------------------------------------------------------------------------- 1 | Contribute notes based on [this](https://www.youtube.com/watch?v=ZYbajSqMrN4&list=PL2kSRH_DmWVbKFpYn3drI8Qf66ZpvZ_3L&index=3) video now! 2 | 3 | # Block and Inline Elements 4 | 5 | Every HTML element has a default display value, depending on what type of element it is. 6 | 7 | ## There are 2 display values- 8 | 9 | 1. Block level elements 10 | 2. Inline elements 11 | 12 |
13 | 14 | ## Block Level Elements 15 | 16 | A block level element always starts on a new line, and the browser automatically adds some space (a margin) on top and bottom of it. 17 | 18 | A block level element also would always take full width available to it. 19 | 20 | ### Some block level elements are - 21 | 22 | ``````html 23 | 24 | 25 | 1.
26 | 27 | 2.
28 | 29 | 3.