Notes from here
Git Branch
$git branch -> to show branches
$git branch feature -> to create feature branch
$git checkout feature -> switch branch to feature
git checkout master -> switch back to master
$git merge feature -> merge with feature branch
if pushing to github:
$git push –set-upstream origin feature
Remotes
$git pull -> merge with updates on repo
Forks
pull requests: request to merge with master branch or other branch, used for collab
Responsive Design
In order to interact with the screen size, the following must be included in head: <meta name="viewport" content="width=device-width, initial-scale=1.0"
viewportis the visible area on which the screen is being displayed.contentrefers to the entire webpage thewidthof which is being set todevice-width.
@media is a media query, which means the following CSS will be applied only in certain situations, namely, when the webpage is being printed. .screen-only is a class selector which identifies what content we want to be print only
@media (min-width: 500px) {
body {
background-color: red;
}
}
@media (max-width: 499px) {
body {
background-color: yellow;
}
}Bootstrap
- Bootstrap is a CSS library written to help make clean, responsive, and nice-looking websites without having to remember the gritty details about flexboxes or grids everytime a layout needs to be set up.
- The only thing needed to use Bootstrap is by adding a single line which links Bootstrap’s CSS stylesheet:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">. - Bootstrap’s CSS will make everything look a little cleaner and more modern, but its real power comes with its layout system. Bootstrap uses a column-based model where every row in a website is divided into 12 individual columns, and different elements can be alloted a different number of columns to fill.
- Bootstrap’s columns and rows are referenced in HTML with
class="row"andclass="col-3"attributes, where the number aftercol-is the number of columns the element should use.- Elements can take up a different number of columns based on the size of the screen with attributes like
class="col-lg-3 col-sm-6. On a small screen, 6 columns will be used, but in a large screen, 3 columns will be used. If another row has to be added, Bootstrap will do so automatically. This is a much easier alternative to something like flexbox (Bootstrap does so behind the scenes).
- Elements can take up a different number of columns based on the size of the screen with attributes like
- Bootstrap has a whole host of other pretty components which can easily be applied by simply adding the appropriate
classattribute to an element. See Bootstrap’s documentation for an extensive list.
Stuff I Have Learnt 