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/mfiocco
My Codepen: https://codepen.io/mfiocco

Technologies & Applications:

Git (Version Control System)
Github (Free Cloud Source Code Storage and Git-based Version Control System)
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 Typography

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a paragraph. This is bold text. This is italic text. This is an inline text link. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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: Graphical User Interface

Helpful CLI Commands:


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