EMAN.COR

Notes

Web Design and Frontend Dev-related Resources

Introduction

This page contains my notes taken while studying web design and 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)
  • VS Code (Code Editor)

Getting Setup

Basic Website Folder Structure


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

Blank HTML Document

Example index.html file:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<!-- VIEWPORT FOR MOBILE -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- MAIN CSS FILE -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
view raw blank-index.html hosted with ❤ by GitHub

Blank CSS Document

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

/* CSS TABLE OF CONTENTS
#GLOBAL STYLES
#GLOBAL RESETS
#GLOBAL COLORS
#GLOBAL TYPOGRAPHY
#UI ELEMENTS
#BUTTONS
#MEDIA
#IMAGES
#HELPERS
#LAYOUT
#CONTAINER
#GRID
#STRUCTURAL STYLES
#PAGE-SPECIFIC STYLES
*/
view raw css-toc.css hosted with ❤ by GitHub

Base Styles

CSS Global Reset

* { box-sizing: border-box; }
body { margin: 0; }
view raw css-global-reset.css hosted with ❤ by GitHub

CSS Global Colors

body {
background-color: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 0.8);
}
a { color: rgba(0, 51, 102, .9);}
a:hover { color: rgba(0, 51, 102, 1);}
view raw css-global-colors-light.css hosted with ❤ by GitHub

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.

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<p>This is a paragraph. This is <strong>bold text</strong>.
This is <em>italic text</em>.
This is an <a href="#">inline text link</a>.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
<ul>
<li>This is an Unordered List Item</li>
<li>This is an Unordered List Item</li>
<li>This is an Unordered List Item</li>
</ul>
<ol>
<li>This is an Ordered List Item</li>
<li>This is an Ordered List Item</li>
<li>This is an Ordered List Item</li>
</ol>
<p>This is a <a href="#">link</a>.</p>
view raw base-typography.html hosted with ❤ by GitHub
/* GLOBAL TYPOGRAPHY */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 88.75%; /* 14px */
line-height: 1.4;
}
/* HEADINGS */
h1, h2, h3 {
font-weight: normal;
margin: .5em 0;
}
h1 {font-size: 3em;}
/* PARAGRAPHS */
p { max-width: 30em; }
/* LINKS */
a { text-decoration: none; }
/* LISTS */
ul, ol {
padding-left: 1.5em;
}
li {
overflow-wrap: break-word;
}
view raw base-typography.css hosted with ❤ by GitHub

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