Foundation class for 100xdevs cohort
What we're learning
1. VSCode
2. HTML
3. CSS
4. JS
5. DOM
6. Assignments
Small boi stuff
1. Tags
2. Attributes
3. Inline styles (bg color, fonts ...)
4. JS Basics, data types, loops, fns...
Big boi stuff
1. External styles, classes and ids
2. Flexbox
3. Connecting JS to HTML
(selectors, DOM)
4. Chrome Dev tools
What we'll learn practically
What we're building
Stage 1
(HTML Only)
Stage 2
(HTML + CSS)
Stage 3
JS
Create a portfolio returns calculator
Before we start
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
IDE
VSCode
Vim
WebStorm
HTML
Defines the structure of your website
2 jargon we need to know of -
1. Tags
2. Attributes
HTML Tags
- <html>
- <head>
- <title>
- <body>
- <div> / <span>
- <h1> .. <h6>
- <p>
- <img>
- <a>
- input
- <button>
- <b> / <i>
- <center>
Attributes
- <input id="username">
Css
They let you add styles to your website (colors, font sizes, background colors ...)
Used for positioning things on the page
How to add styles?
How to add styles?
Common styling attributes
color
background
border-radius
border
padding / margin
box-shadow
How to position?
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?
Title Text
How to position?
Dumb way
float property
Flex box
Right way
display: flex
on parent
makes all div siblings reside
in the same line
Flex box
Javascript
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
For JS (or any language), you need to know
- variables
- Simple Data types (strings, numbers, boolean)
- Complex Data types (arrays and objects)
- Control statements and operators
- Loops
- Functions
Problems to understand these
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
Connecting JS to returns tracking app
First let's write a function that takes 3 inputs
1. numberOfYears
2. base
3. yearlyGains
and returns net portfolio value
Assignment
Foundation class for 100xdevs cohort What we're learning 1. VSCode 2. HTML 3. CSS 4. JS 5. DOM 6. Assignments
deck
By Harkirat Singh
deck
- 15,351
