Week 1 - Study Notes

HTML

HTML Basics
HTML (Hyper Text Markup Language) is the standard markup language for websites. HTML elements are building blocks of HTML pages, and are represented by < > tags.
These are some examples of basic HTML elements.
- The <!DOCTYPE html> declaration defines that this document is an HTML5 document.
- The <html> element is the root element of an HTML page.
- The <head> element contains meta information about the HTML page.
- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
- The <body> element defines the document's body, and is a container for all the visible contents, such as headings,paragraphs, images, hyperlinks, tables, lists, etc.
- The <h1> element defines a large heading
- The <p> element defines a paragraph
All websites should have at least the following elements: !DOCTYPE html declaration, html, head, title, body.
In VS Code, any HTML file types can have the basics populated by typing in ! and pressing enter.
Semantic Elements
A semantic element clearly declares its purpose to the developer, reader and browser. Semantic web allows data to be shared and reused across applications, enterprises and communities. There is no restricting on nesting semantic elements, so article can be nested inside section and vice versa.
Examples of semantic elements include:
- <article> - independent, self-contained content, like a blog post or newspaper article
- <aside> - content aside from page content
- <details> - additional details that user can show or hide
- <figcaption> - caption for figure
- <figure> - self-contained content like photos, diagrams, code listings, etc
- <footer> - footer typically contains authorship, copyright, contact, sitemap, back to top, etc. You can have multiple footers
- <header> - container for introductory content or set of navigational links. Cannot be placed in footer, address or header
- <main> - main content
- <mark> - marked/highlighted text
- <nav> - navigation links
- <section> - thematic grouping of contenting, typically with a heading
- <summary> - visible heading for details element
- <time> - time
- <table>
- <form>
Non-semantic elements, to compare, are things like:
- <div>
- <span>
Helpful Links
1. HTML Cheat Sheet website
2. HTML5 Mega Cheat Sheet

CSS

CSS Basics
- Syntax of CSS:
  selector {property: value; property: value;}
  
  h1 {
  color: blue;
  font-size: 24px;
  }
- Order of css matters (within stylesheet) - latter CSS overwrites earlier CSS
- Similarly, order of css stylesheets matters too - latter CSS stylesheets overwrites earlier CSS stylesheets
- Browsers often come with some default values for many css elements. Use a reset "primer" to wipe out those default values. (Link to reset.css)
Types of CSS Selectors
1. CSS Element Selector
  
  p {
  text-align: center;
  color: red;
  }
2. CSS id Selector
  
  #first {
  text-align: center;
  color: red;
  }
3. CSS class Selector
  
  .center {
  text-align: center;
  }
4. CSS Universal Selector
  
  * {
  text-align: center;
  }
5. CSS Grouping Selector
  
  h1, h2, p {
  text-align: center;
  }
Applying CSS to HTML
To apply CSS to HTML, the first important aspect is to include in <head>:
1. link to the stylesheet (preferred)
  <link rel="stylesheet" href="./assets/css/style.css">
  or
2. <style> tag with css directly
  <head>
     <style>
       p {
         color: red;
       }
     </style>
  </head>
The next important step is to declare classes and IDs:
1. Classes:
  
  Classes applied in HTML (with stylesheet link in head):
  <p class="red">Hello World</p>
  
  Classes declared in CSS (style.css):
  .red {
  color: red;
  }
  
  Result:
  
  Hello World
2. IDs:
  
  IDs applied in HTML (with stylesheet link in head):
  <p id="first">Hello World</p>
  
  IDs declared in CSS (style.css):
  #first {
  color: blue;
  }
  
  Result:
  
  Hello World
Block elements vs Inline elements
Block-level Element
Block elements always start on a new line and take up the full available width.
Examples of block-level elements:
- <div>
- <h1>-<h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline Element
Inline elements don't start on a new line and only takes up the necessary width.
Examples of inline lements:
- <span>
- <a>
- <img>
Utilizing style libraries like Bootstrap/Materialize

Bootstrap and Materialize are examples of style libraries that have prebuilt css for ease of use. They allow for easier implementation of layouts and site components, with a simple link to their css stylesheet/js.

Boostrap can be implemented by including:

CSS

in <head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

JS

at bottom of <body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

Materialize can be implemented by including:

CSS

in <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

JS

at bottom of <body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
Grid System

Bootstrap and Materialize both use very similar grid systems to build layouts.

Bootstrap uses a 12-column grid system, that can be implemented by containing 'col' class inside 'row' class inside 'container' class.

<div class="container">
<div class="row">
  <div class="col">
   Column
& nbsp; </div>
  <div class="col">
   Column
  </div>
  <div class="col">
   Column
  </div>
</div>
</div>

Materialize uses a very similar 12-column grid system, that can be implemented similarly.

<div class="container">
<div class="row">
  <div class="col s4">
   Column
  </div>
  <div class="col s4">
   Column
  </div>
  <div class="col s4">
   Column
  </div>
</div>
</div>
Pseudo-classes/Pseudo-elements

Pseudo-classes are used to define a special state of an element, such as when a cursor hovers over the elmeent, element has been visited vs unvisited, when an element is in focus, etc.

Syntax is:
selector:pseudo-class {property: value;}

Pseudo-elements are used to style specific parts of an element, such as the first letter or first line of an element.

Syntax is:
selector:pseudo-element {property: value;}
Helpful Links
1. Beginner's CSS Cheat Sheet
2. CSS3 Mega Cheat Sheet

Git

Git Setup

Git config commands

set username	git config --global user.name "Your Name
set email	git config --global user.email "youremail@gmail.com"

Git Commands

Basic Git Commands to be used through git bash or terminal strong>

create empty Git repo	git init <directory>
clone repo to local machine	git clone <repo>
stage changes for next commit	git add <directory/file>
Commit staged snapshot with message	git commit -m <message>
check status of files	git status
Fetch files from remote copy into local copy	git pull <remote>
Push commits to repo	git push <remote> <branch>

Git Collaboration

Git enables multiple people to work on a repository, through the use of branches and rebase to resolve merge conflicts. (Relevant link)

1. Clone an existing repository to your local machine	git clone <repo>
2. Create a new branch	git checkout -b <branch>
3. Make sure you're added as a collaborator	Repo owner will need to invite you
4. Add/commit/pull as usual	git add <directory/file> git commit -m <message> git push <origin> <branch>
If push fails, pull	git pull <remote> <branch>
5. When ready, make a pull request	Resolve any merge conflicts and then make a new pull request via the link on Github website.
If the repo owner approves, the branch gets merged into main

Git Cheat Sheet

HTML, GIT & CSS

Week 1 Topic on Front-End Coding

Topics covered this week:

HTML

CSS

Git

HTML

CSS

Block-level Element

Inline Element

CSS

JS

CSS

JS

Git

Topics covered this week:

code

HTML

format_color_fill

CSS

Git

HTML

CSS

Block-level Element

Inline Element

CSS

JS

CSS

JS

Git