John Doe

Notes

Web Design and Frontend Dev-related

Introduction

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

Technologies & Applications:

  • Git (Version Control System)
  • Github (Free Cloud Source Code Storage and Git-based Version Control System)
  • Github Pages (Free Static Site Hosting)
  • Netlify (Free Static Site Hosting, Production Ready & Fully Featured with CDN)
  • VS Code (Code Editor)

Getting Setup

Project-based Folder Structure


projectname/
├── index.html
├── css/
│   ├── style.css
└── js/
    ├── scripts.js

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
  1. This is an Ordered List Item
  2. This is an Ordered List Item
  3. This is an Ordered List Item

This is a link.

UI Elements

Buttons

Button 
<a class=“button”>Button</a>
          
.button {
  display: inline-block;
  padding: 1em;
  background-color: rgba(0, 51, 103, 1);
  color: rgba(255, 255, 255, 1);
}

Helpful CLI Commands:


pwd 

ls 

cd Desktop

git clone https://github.com/username/reponame

Glossary of Terms:

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