Notes

Web Design and Frontend Dev-related Resources

Introduction

This page contains my notes taken while studying web design and front-end web development.

My Personal Links:

My Github: https://github.com/hannashibata
My Codepen: https://codepen.com/hannashibata

Technologies & Applications:

Git (Version Control System)
Github (Free Cloud Source Code Storage)
Github pages (Free Static Site Hosting)
VS Code (Code Editor)

Getting Setup

Basic Website Folder Structure


sitename/
├──index.html
├──css/
│  ├──style.css

Blank HTML Document

Example index.html file:

Blank CSS Document

Example style.css file with a CSS Table of Contents:

Base Styles

CSS Global Reset

CSS Global Colors

CSS Global Structures

CSS GLobal Typography

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a pragraph. Ths is bold text. This is italic text. This is an inline text link. This is English. そしてこれは日本語。

This is an Unordered List Item
This is an Unordered List Item
This is an Unordered List Item

This is an Ordered List Item
This is an Ordered List Item
This is an Ordered List Item

This is a Link

Glossary:

Common Terms & Definitions:

HTML: Hypertext Markup Language
CSS: Cascading Style Sheets
JS: JavaScript
CLI: Command Line Interface
GUI: Graphic User Interface

Helpful CLI Commands:


$ pwd (or simply "cd" on a Windows) // returns path to current directory
            
$ ls (or "dir" on a Windows) // returns list of contents inside the current directory
            
$ cd ..// move up one level into the parent directory
                        
$ git clone https://github.com/hannashibata/studentsite // copies a remote repo to your local computer

Grid:

Grid System

Basic semantic grid system using percentage. Suggested minimum value for gutters: 2%, happy medium: 4%.

Local Typography:

Blockquote

Simple styling for blockquotes using quotation marks.

\201C //left double quotation mark

\201D //right double quotation mark

\2018 //left single quotation mark

\2019 //right single quotation mark