Download the desktop app for VSCode here: https://code.visualstudio.com/download
Documentation on getting started: https://code.visualstudio.com/docs
- In an empty
.htmlfile, you can type an exclamation mark (!) and select the option that comes to automatically generate the barebones template! - Get the Live Server extension (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) so that you can open up and refresh HTML files with ease!
<!DOCTYPE html>
<html>
<head>
<!--Metadata (ex.: Styles, Scripts importing libraries like Bootstrap, etc.) goes here-->
</head>
<body>
<!--Main content goes here-->
</body>
</html>
| Tag | Description | Renders as | ||
|---|---|---|---|---|
<tag>[TEXT]</tag> |
This is a paragraph | [TEXT] |
||
<h1>[Text]</h1> |
This is the largest heading size | |||
<h2>[Text]</h2> |
This is the second-largest heading size | |||
<h3>[Text]</h3> |
This is the third-largest heading size | |||
<h4>[Text]</h4> |
This is the fourth-largest heading size | |||
<h5>[Text]</h5> |
This is the fifth-largest heading size | |||
<h6>[Text]</h6> |
This is the sixth-largest heading size | |||
<a href=”[URL]”>[Text]</a> |
Link to specific URL | [Text] | ||
<div>[content]</div> |
Divider | [content] |
||
<!-- Comment --> |
Adding comments | doesn't appear | ||
<img src= "[URL or local file path]"> |
Adding images |  |
||
<table><tr><th>[Content]</th><td>[Content]</td></tr></table> |
Adding a Table |
|
||
<ul><li>[Content]</li></ul></code> |
Unordered List |
|
||
<ol><li>[Content]</li></ol> |
Ordered List |
|
||
<u>[Text]</u> |
Underline | [Text] | ||
<em>[Text]</em> |
Italics | [Text] | ||
<strong>[Text]</strong> |
Bold | [Text] | ||
<header>[Content]</header> |
Header | [Content] | ||
<nav>[Content]</nav> |
Navigation | [Content] | ||
<main>[Content]</main> |
Main body | [Content] | ||
<section>[Content]</section> |
Section | |||
<article>[Content]</article> |
Article | [Content] | ||
<footer>[Content]</footer> |
Footer | [Content] |
More tags on W3Schools: https://www.w3schools.com/html/default.asp
You need to do the following to link an external Stylesheet to your project:
- Create a
.cssfile with a choice of your name. For example,style.css. - Then, navigate to your
.htmlfile and add the following to the<head>section of thehtmldocument:<link rel="stylesheet" href="<name>.css">. Make sure to replace<name>with the name of your css file. - That's it! You have successfully linked an external stylesheet to your html document.
<tag> {
[property]: [value];
}
In HTML:
<element class="<Class name>"> </element>
Replace <Class name> with your preferred class name.
In CSS:
.<Class name> {
[property]: [value];
}
Classes are not unique. You may have the same class for multiple elements.
In HTML:
<element id="<ID name>"> </element>
Replace <ID name> with your preferred ID name.
In CSS:
#<ID name> {
[property]: [value];
}
IDs are unique. You may only have ONE element with a particular id.
| Selector | Description |
|---|---|
<tag1>, <tag2>, ..., <tagN> {...} |
Selects all tags mentioned |
<parentTag><childTag> {...} |
Selects child tags inside a parent tag |
<parentTag> > <childTag> {...} |
Selects child tags inside a direct parent tag |
<tag>::before {...} |
::before - add content before a tag |
<tag>::after {...} |
::after - add content after a tag |
<tag>:hover {...} |
Style a tag in a specific way when you hover your mouse over it |
List of CSS properties: https://www.w3schools.com/w3css/default.asp
Setup: https://getbootstrap.com/docs/5.2/getting-started/introduction/
On the Bootstrap website, use the left-hand sidebar to find Bootstrap components that you want. This is a very self-guided topic!
You need to do the following to link an external JavaScript file to your project:
- Create a
.jsfile with a choice of your name. For example,script.js. - Then, navigate to your
.htmlfile and add the following to the<head>section of thehtmldocument:<script src="<name>.js">. Make sure to replace<name>with the name of your css file. - That's it! You have successfully linked an external JS file to your html document.
| Command | Description |
|---|---|
console.log([thing to be outputted]) |
Prints something to the console |
let var = ...; |
Declare a variable |
const var = ...; |
Declare an immutable (non-changeable) variable |
if (condition) { ... } else { ... } |
If-else statement; if condition if met, run code in the if-branch; otherwise, run the else-branch |
for (let i = start; i < end; i++) { ... } |
Repeat a certain block of code a certain number of times |
while (condition) { ... } |
Repeat a certain block of code as long as a certain condition is met |
function function_name(param1, param2, ...) { ... } |
Create a reusable block of code |
More stuff on JavaScript: https://www.w3schools.com/js/default.asp
Clones a repo onto your local machine.
Syntax: git clone {repo link}
Example:
git clone git@github.com:AnthonySLuong/Testing.git
Returns the status of all working files. Will list all untracked files.
Syntax: git status
Adds untracked files to staging area.
Syntax: git add (file1) (file2)
Adding all untracked files: git add .
Commit all tracked file in staging area to repo.
Syntax: git commit -m “(commit message)”
Message should be a quick note about the changes made.
Example:
git commit -m “First Commit”
Checks out a commit (Versions) at any point of time.
Syntax: git checkout (Branch name)
Example:
git checkout TestBranch
Pull any new changes made from remote repo.
Syntax: git pull
Push any new changes from local repo to remote repo.
Syntax: git push
Usually you use the commands in these orders when working on any project Make sure to always pull before push:
git status # Check untracked file
git pull --rebase # To make sure you are update with the remote repo
git add . # add file to staging area
git commit -m "(Message)" # Make the commit
git push # Push changes to remote repo