Name		Name	Last commit message	Last commit date
Latest commit History 52 Commits
README.md		README.md

Repository files navigation

Notes

VS Code settings.json

{
  "workbench.colorTheme": "Material Theme Palenight High Contrast",
  "workbench.iconTheme": "eq-material-theme-icons-palenight",
  "editor.fontSize": 18,
  "editor.fontFamily": "Operator Mono",
  "editor.fontLigatures": true,
  "editor.lineHeight": 2,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "html.format.enable": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "explorer.decorations.badges": false,
  "explorer.compactFolders": false,
  "explorer.confirmDragAndDrop": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.startupEditor": "none",
  "explorer.confirmDelete": false,
  "editor.linkedEditing": true,
  "editor.smoothScrolling": true,
  "editor.scrollBeyondLastLine": false,
  "liveServer.settings.donotVerifyTags": true,
  "editor.bracketPairColorization.enabled": false
}

VS Code keybindings.json

[
  {
    "key": "alt+w",
    "command": "editor.emmet.action.wrapWithAbbreviation"
  }
]

VS Code Extensions

VS Code shortcuts

Placeholder text : lorem, lorem100 (no. of words), or p*4>lorem (no. of paragraphs)
HTML5 boilerplate / skeleton : !
Insert and go to beginning of new line : ⌘ ⏎
Duplicate line below : ⌥ ⇧ ▼
Comment : ⌘ /
Open command palette : ⌘ ⇧ P
Move current line up or down : ⌥ ▼ or ▲
Wrap with abbreviation : ⌥ W (custom)

Chrome shortcuts

View Source : ⌥ ⌘ U
Developer Tools : ⌥ ⌘ I or F12
Inspect Elements : ⌥ ⌘ C
JavaScript Console : ⌥ ⌘ J

External Links

Snap Card (CodePen)

Flex Cards (CodePen)

Navigation Design (CodePen)

City Map (CodePen)

Hangman Game (CodePen)

Parallax Scroll Animation (CodePen)

Common HTML Elements & Attributes

Also :

<b>
<i>
<video>
<audio>
<abbr>
- title
<cite>

Common CSS Properties & Values/Functions

/* Comment */
color:
- rgb(); function
- rgba(); function
background-color:
opacity:
border:
inherit; value
font-family
- serif value
- sans-serif value
font-size
font-weight
- 400 or normal value
- 700 or bold value
font-style
- normal value
- italic value
text-align
- center value
- start value
- end value
width
direction
- ltr
- rtl
letter-spacing
word-spacing
line-height
- multiplier value
@import at-rule
text-shadow
margin-top
margin-left
text-transform
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

MDN

Get a Job

Genius? No.
Need:

Focus
Determination

Why Web Developer?

Work from home
Great salary (average $80k)
Work for yourself

Challenges

V. competitive, 1st job hardest to get
Fast-paced industry, keep learning (curiosity, passion)
Spend long time in front of computer (problem-solving)

Degree?

Good employers care about knowledge, not degree (competence)

Path

Front end or back end
Not full stack until one yr of exp

Front End Path

Skills

HTML, CSS and JS (3m)
React (2m)
Git (2w)
Sass (2w)*
TypeScript (1m)*

Optional

Time

Daily 3-5 hrs studying/coding
Spend 30% studying, 70% practicing
After HTML, CSS, JS, React & Git (6m) apply for junior front end dev jobs
Stand out: learn Sass & TypeScript

Different Path?

Learn Python
Spend 2 hours a day coding
After 2-3 months be fairly comfortable writing basic programs
Then specialize for 3-6 months in web, mobile or data science
So spend 6-12 months studying and practicing to become job ready
First job: junior software developer