Node is the environment for running Javascript outside the browser. To put it in simple terms.
Using the terminal:
Search bar (command + space), search terminal to open
Navigating the terminal:
~ is the symbol for the entry point to our computer file system
ls: list files, shows you what files and folders are in the current directory.
cd: change directory, moves your deeper into your folder structure. With ohmyZSH, you can auto complete the folder names by starting to type it and hit tab.
pwd: print working directory, it gives you the absolute path to the directory you are currently in.
command + k will clear your terminal content to clean it up
mkdir: creates an empty directory in the current directory. Remember to navigate into it after its created with cd.
touch: creates a file in the current directory. By convention, html files would be called “index.html” and a good default name for css file would be “styles.css”. The touch command can create multiple files in one line.
code . Will open every file in the current directory in VS Code.
Using VS Code:
boiler plate code: default amount of code needed to get started. VS Code can do this for html files by typing a ! In a blank file and hitting tab.
ES Lint and Prettier are extensions to help with the formatting of your code.
A basic rule of good “code handwriting” is to keep your children elements indented, makes it easier to analyze and read the code better.
<link> tag is used in the <head> in order to connect an outside css file to your html file.
Remember the computer does not give partial credit! Ensure that your naming conventions and spelling are correct.
To open a terminal window inside VS Code, ctrl + shift + ~
To start a local server on your computer to show you the html document in your folder, “npx serve”. Visiting the corresponding localhost address, you can see your file.
<main> elements are useful for separating sections on your page.
<header> and <nav> elements are useful for designating a part of your navbar.
<a> elements have many different options when working with things like telephone numbers and emails. The default <a> will be for internet addresses. The target attribute for <a> elements with “_blank” will have the links open in a new tab, preserving your current tab to be navigated back to at your leisure.
display:flex as a css style, will align elements in a row. Remember, the property is applied to the parent element and will effect all of its children.
justify-content is a property that can be used when a display: flex is applied to an element. This will allow you to do different sets of spacing for the elements inside the flex box.
Using the developer tools is an essential tool for front-end web development. Right click ~> inspect to bring it up on chrome, command + option + i as a shortcut.
Margins push out, padding pushes in. You can use the box model in the developer tools to further examine the sizes.
box-sizing: border-box is a useful attribute for working with these.
Css size measurements:
pixels - px - specific sizing based off pixels
percentages - % - sized based on a % of the size of the parent div
em - corresponds to the root font size.
rem - relational sizing correlating to the current text size of a page.
https://www.w3schools.com/cssref/css_units.asp
Trouble Shooting code that’s not working:
Check VS Code for any indication of syntax error, underlined code for example.
You can use the developer tools to test code before adding to the file.
Remember to reload your page to see the changes in your files!
max-width property for limiting how wide a particular element will be on the screen
Margin with a single value will apply the margin of the specified size all around the element. 2 numbers will apply the margin to “top/bottom” and “left/right” I.e margin: 16px 24px. 4 values will adjust the Top Right Bottom Left, TRBL. I.e. margin: 16px 16px 24px 24px. The same is true for padding.
Remember, elements will have default css styles applied to them based on what they are, like <h1> and <p>. Also known as user agent stylesheet.
To target an html element with an id, in your css file, add a # before the name of the id as it appears in the id attribute of your element.
border css property can take 3 inputs : size of border, style and color. I.e. border: 1px solid black
<section> is useful for separating areas of your page.
When targeting specific elements using CSS, you can target specific elements inside of other elements by using syntax like this
section div.
By placing the space between the elements, you specifically target only the divs in side of a section element. Remember this will target all the divs!
border-radius css property will let you round corners in your elements by using specific sizes. You can specify each corner individually.
To target an html element with a class, in your css file, add a . before the name of the class as it appears in the class attribute of your elements.
absolute and relative position properties work together. Whenever you choose to position something absolutely, you need to specific which parent element it will be positioned to relatively. Otherwise, the absolute position will adhere to the outermost element, usually the <body>.
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
font-family property will allow you to adjust the font of text in whatever specific element you like. Visit https://fonts.google.com/ for more fonts to play with! The instructions to add the font from the site are located on there, its using the <link> tag in the <head> like when we add the css files.
White space os not counted in the text editor, thus it will not be reflected on the browser. There are special characters to add non breaking lines.
There will often times be multiple options to accomplish a specific task, such as adjusting some kind of font style. It is usually best to do the CSS option to achieve the task at hand.
The ability to google the correct terms is very useful for finding the answers to many of the questions you will have when figuring out how to do a specific task when coding.
VSCode (the terminal itself actually) can have multiple tabs open in order to multitask, I.e run localhost and do hit commands.
git init - this command initializes the current directory to become a repository for uploading its contents to GitHub. Notice the additional UI features provided by ohmyZSH to identify the branch you are in.
git status - shows what work has been changed in comparison to the current git repository it is connected too. Red means the files are not tracked, green means its tracked and ready to be committed.
git add . - this adds all the current changed files to to be tracked and readied for committing.
git commit -m “message here” - will commit the added/tracked files and will let you leave a message detailing the commit. Always add -m and its message when committing!
You can use the UI on VSCode to identify changes in the code and what has been tracked or committed
git stash - removes all non committed work.
To create a new repository on GitHub, click the new button and follow the prompts. Add you name and description, no readme usually.
git remote add origin “url” - replacing the url with the address of where your repository is located on GitHub.
git remote -v - this will identify where the current remote is connected to, to push and pull files from.
git push -u origin master - this will push all the committed code to the master branch on the remote repository that was created and linked for the current directories project.
Github pages option in the settings of a repository will allow you to serve that repo to share with others and will provide a url.
Creating a new branch on Github:
git checkout -b "your-branch-name" - this will create a new branch with the name you specify and switch you over to that new branch, no spaces!
Once your work is complete, you can follow the git add, commit, push process to upload the local code on your computer to the branch you created. Now you can use the UI on the GitHub website to create a pull request, which can be reviewed by your chosen individual, which will then approve or send back the code you worked on.
To switch back to another branch:
Run git status in order to ensure that everything is up to date before switching back.
git checkout "branch name" will move you back to your selected branch, i.e. git checkout master, to move back to the master branch.
To check if there are any updates, run git fetch. To pull the current updated code on the repository, from the current branch, run the command git pull
dnaqvi
commented
4 years ago
July 27, 2020 Monday Notes
What is Node?
Node is the environment for running Javascript outside the browser. To put it in simple terms.
Using the terminal: Search bar (command + space), search terminal to open
Navigating the terminal: ~ is the symbol for the entry point to our computer file system
ls: list files, shows you what files and folders are in the current directory.cd: change directory, moves your deeper into your folder structure. With ohmyZSH, you can auto complete the folder names by starting to type it and hit tab.pwd: print working directory, it gives you the absolute path to the directory you are currently in.command + k will clear your terminal content to clean it up
mkdir: creates an empty directory in the current directory. Remember to navigate into it after its created with cd.touch: creates a file in the current directory. By convention, html files would be called “index.html” and a good default name for css file would be “styles.css”. The touch command can create multiple files in one line.code .Will open every file in the current directory in VS Code.Using VS Code:
boiler plate code: default amount of code needed to get started. VS Code can do this for html files by typing a ! In a blank file and hitting tab.
ES Lint and Prettier are extensions to help with the formatting of your code.
A basic rule of good “code handwriting” is to keep your children elements indented, makes it easier to analyze and read the code better.
<link>tag is used in the<head>in order to connect an outside css file to your html file.Remember the computer does not give partial credit! Ensure that your naming conventions and spelling are correct.
To open a terminal window inside VS Code, ctrl + shift + ~
To start a local server on your computer to show you the html document in your folder, “npx serve”. Visiting the corresponding localhost address, you can see your file.
<main>elements are useful for separating sections on your page.<header>and<nav>elements are useful for designating a part of your navbar.<a>elements have many different options when working with things like telephone numbers and emails. The default<a>will be for internet addresses. The target attribute for<a>elements with “_blank” will have the links open in a new tab, preserving your current tab to be navigated back to at your leisure.display:flexas a css style, will align elements in a row. Remember, the property is applied to the parent element and will effect all of its children.justify-contentis a property that can be used when a display: flex is applied to an element. This will allow you to do different sets of spacing for the elements inside the flex box.Using the developer tools is an essential tool for front-end web development. Right click ~> inspect to bring it up on chrome, command + option + i as a shortcut.
Margins push out, padding pushes in. You can use the box model in the developer tools to further examine the sizes. box-sizing: border-box is a useful attribute for working with these.
Css size measurements: pixels - px - specific sizing based off pixels percentages - % - sized based on a % of the size of the parent div em - corresponds to the root font size. rem - relational sizing correlating to the current text size of a page. https://www.w3schools.com/cssref/css_units.asp
Trouble Shooting code that’s not working: Check VS Code for any indication of syntax error, underlined code for example. You can use the developer tools to test code before adding to the file. Remember to reload your page to see the changes in your files!
max-widthproperty for limiting how wide a particular element will be on the screenMargin with a single value will apply the margin of the specified size all around the element. 2 numbers will apply the margin to “top/bottom” and “left/right” I.e
margin: 16px 24px. 4 values will adjust the Top Right Bottom Left, TRBL. I.e.margin: 16px 16px 24px 24px. The same is true for padding.Remember, elements will have default css styles applied to them based on what they are, like
<h1>and<p>. Also known as user agent stylesheet.To target an html element with an id, in your css file, add a # before the name of the id as it appears in the id attribute of your element.
border css property can take 3 inputs : size of border, style and color. I.e.
border: 1px solid black<section>is useful for separating areas of your page.When targeting specific elements using CSS, you can target specific elements inside of other elements by using syntax like this
section div. By placing the space between the elements, you specifically target only the divs in side of a section element. Remember this will target all the divs!border-radius css property will let you round corners in your elements by using specific sizes. You can specify each corner individually.
To target an html element with a class, in your css file, add a . before the name of the class as it appears in the class attribute of your elements.
absolute and relative position properties work together. Whenever you choose to position something absolutely, you need to specific which parent element it will be positioned to relatively. Otherwise, the absolute position will adhere to the outermost element, usually the
<body>. https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/font-family property will allow you to adjust the font of text in whatever specific element you like. Visit https://fonts.google.com/ for more fonts to play with! The instructions to add the font from the site are located on there, its using the
<link>tag in the<head>like when we add the css files.Sans serif vs serif - https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/serif-vs-sans-for-text-in-print
White space os not counted in the text editor, thus it will not be reflected on the browser. There are special characters to add non breaking lines.
There will often times be multiple options to accomplish a specific task, such as adjusting some kind of font style. It is usually best to do the CSS option to achieve the task at hand.
box-shadow is a css property to add that effect to an element, helps give that 3d look! https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
Using the developer tools, you can use the “toggle device toolbar” option to view your page on varying sizes of smaller screens.
Media queries will let you conditionally add or remove css properties based on the current size of the browser based on the device that is being used to view it. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
The ability to google the correct terms is very useful for finding the answers to many of the questions you will have when figuring out how to do a specific task when coding.
Injecting line breaks in your headers using pseudo elements: https://css-tricks.com/injecting-line-break/
Sticky header:
position: sticky-> this will tell it to stay in placetop:0-> this tells it where to stick to https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioningz-index property governs the how the elements stack on top of each other, the higher the number the higher priority the element will have on the page. https://www.w3schools.com/cssref/pr_pos_z-index.asp
Pseudo classes are used to add effects to elements. :hover will add whatever you specify when the mouse cursor hovers over the element specified. https://www.w3schools.com/css/css_pseudo_classes.asp
Transform and transition properties are often used together to make smooth and simple animations using only CSS. https://www.w3schools.com/css/css3_transitions.asp
Emojis are fun characters to work with. It is good practice to wrap your emojis in the following html element:
<span role="img" aria-label="waving-hand">👋 </span>This helps with screen readers and accessibility and will let the emoji be worked with easier using html and css. No naked emojis!
Useful CSS resources: https://css-tricks.com/ https://codepen.io/
Github
VSCode (the terminal itself actually) can have multiple tabs open in order to multitask, I.e run localhost and do hit commands.
git init- this command initializes the current directory to become a repository for uploading its contents to GitHub. Notice the additional UI features provided by ohmyZSH to identify the branch you are in.git status- shows what work has been changed in comparison to the current git repository it is connected too. Red means the files are not tracked, green means its tracked and ready to be committed.git add .- this adds all the current changed files to to be tracked and readied for committing.git commit -m “message here”- will commit the added/tracked files and will let you leave a message detailing the commit. Always add -m and its message when committing!You can use the UI on VSCode to identify changes in the code and what has been tracked or committed
git stash- removes all non committed work.To create a new repository on GitHub, click the new button and follow the prompts. Add you name and description, no readme usually.
git remote add origin “url”- replacing the url with the address of where your repository is located on GitHub.git remote -v- this will identify where the current remote is connected to, to push and pull files from.git push -u origin master- this will push all the committed code to the master branch on the remote repository that was created and linked for the current directories project.Github pages option in the settings of a repository will allow you to serve that repo to share with others and will provide a url.
Creating a new branch on Github:
git checkout -b "your-branch-name"- this will create a new branch with the name you specify and switch you over to that new branch, no spaces!Once your work is complete, you can follow the git add, commit, push process to upload the local code on your computer to the branch you created. Now you can use the UI on the GitHub website to create a pull request, which can be reviewed by your chosen individual, which will then approve or send back the code you worked on.
To switch back to another branch: Run
git statusin order to ensure that everything is up to date before switching back. git checkout "branch name" will move you back to your selected branch, i.e. git checkout master, to move back to the master branch.To check if there are any updates, run
git fetch. To pull the current updated code on the repository, from the current branch, run the commandgit pull