What we're learning
1. VSCode
2. HTML
3. CSS
4. JS
5. DOM
6. Assignments
1. Tags
2. Attributes
3. Inline styles (bg color, fonts ...)
4. JS Basics, data types, loops, fns...
1. External styles, classes and ids
2. Flexbox
3. Connecting JS to HTML
(selectors, DOM)
4. Chrome Dev tools
(HTML Only)
(HTML + CSS)
JS
Create a portfolio returns calculator
What are browsers? How do they render websites?
What purpose do HTML/CSS/JS serve
How much of this do we actually use in the industry -
1. html => very minimal
2. css => minimal
3. js - heavy
VSCode
Vim
WebStorm
Defines the structure of your website
2 jargon we need to know of -
1. Tags
2. Attributes
They let you add styles to your website (colors, font sizes, background colors ...)
Used for positioning things on the page
color
background
border-radius
border
padding / margin
box-shadow
divs always take up all the space available horizontally
spans only take up as much space as needed
Can you make divs take only the space they need?
float property
on parent
makes all div siblings reside
in the same line
It is a scripting language
It can be used to solve algorithmic problems/do ML/do backend development
Specifically for websites, it is useful to add functionality to your website (for example, a returns calculator)
We're going to practise on repl.it first
1. Count from 1 to 1000
2. Is Palindrome?
3. Find the name of the oldest person in a group
Take home assignment -
Find the age of k oldest people in the group
https://leetcode.com/problem-list/top-interview-questions/?topicSlugs=string&page=1&difficulty=EASY
https://leetcode.com/problem-list/top-interview-questions/?topicSlugs=array&page=1&difficulty=EASY
First let's write a function that takes 3 inputs
1. numberOfYears
2. base
3. yearlyGains
and returns net portfolio value