Table of Contents
I follow these steps by steps to become self taught web developer.
Learn Git from 0 experience to professional level in 3 courses.
| Course | Description |
|---|---|
| Lesson 1 | What is git?, ... , Extra Feature 3: How to Remove Git |
| Lesson 2 | Command: git push, ... , Using Our SSH Key |
| Lesson 3 | Git Branching and Merging |
Learn how to build websites with HTML and CSS
Personal Notes in Closed issues
Table of Contents
- HTML Basics
- CSS Basics
- Hovers, Transitions, Shadows
- Chrome DevTools & CSS Box Model
- Text Styles
- The HTML Structure
- Images and Text Boxes
- CSS Display Property
- The div Element
- Nested Layouts Technique
- CSS Grid
- Flexbox
- Nested Flexbox
- CSS Position
- Position Absolute and Relative
- Finish the Project
- More CSS Features
Learn More about CSS and a tool for transforming CSS to increase code readability.
| Course | Description |
|---|---|
| Lesson 1 | PostCSS Crash Course |
| Lesson 2 | Conquering Responsive Layout |
CRL Contents
-
Challenge 01
- Percentages vs Fixed widths
- Percentages on the child
- CSS em and rem explained
- Why it's a good idea to avoid heights
-
Challenge 02
- Getting familiar with relative units
- CSS em and rem explained
- Why you shouldn't set font-sizes using em
-
Challenge 03
- CSS Units - vh, vw, vmin, vmax
-
Challenge 04
- box-sizing - border-box explained
- Why I use the BEM naming convention for my CSS
- Flex-intro
- Adding-space
-
Challenge 05
- Reducing the amount of HTML needed
- Adding a hero image
- Column widths and flexbox
- Ensuring the image is responsive
-
Challenge 06
- A deeper dive into flexbox
- Fancier up our navigation with flexbox
- More improvements to the navigation
- Centering things the easy way
-
Challenge 07
- min(), max(), and clamp() are CSS magic!
- Media query basics
- Adding one to our layout
- How do decide what breakpoints to use
- meta-viewport
- CSS Variables - An introduction to CSS custom properties
- Writing mobile-first CSS
- A look at min-height
-
Challenge 08
- Responsive Navigation
- Last Challenge
Personal Notes in Closed issues.
Working on real-life projects, will develop a more comprehensive understanding of programming concepts, improve skills, and gain a competitive edge in the job market.
| Fronted Projects | Description |
|---|---|
| - | - |
| - | - |
Learn how to program the behavior of web pages.
| Lesson | Description |
|---|---|
| 1 - JavaScript Basics | // JavaScript is giving instructions to a computer; Wrote JavaScript code; Run our code using the Console; Syntax; Go to file: JavaScript-basic.js readme.md |
| 2 - Numbers and Math | // Numbers and Math; Order of Operations, and Brackets (...); Calculated the numbers in final project; Calculations using floats can be inaccurate; Math.round(); How to search for code on our own; Go to file: numbers-and-math.js readme.md |
| 3 - Strings | // String = text; Use strings and numbers together; Three ways to create strings: '...' or "..." or ` ... ` (template strings); Escape characters: \ ' and \n ; Interpolation, multi-line strings; Go to file: string.js readme.md |
| 4 - HTML CSS Review, console.log | // Reviewed basics of HTML and CSS; Set up VSCode; Load JavaScript inside an HTML file; <script>, onclick=""; Comments; console.log(); Go to file: website.html readme.md |
| 5 - Variables | // Variables = a way to save values; Re-assign a variable; Created the Cart Quantity feature; Shortcuts for re-assigning a variable; Naming conventions and best practices; 3 ways to create a variable: let, const, var; Go to file: cart-quantity.html variables.html readme.md |
| 6 - Booleans and If-Statements | // Boolean values (true, false); If-statements; Comparison Operators (>, <, >=, <=, ===, !==) and Logical Operators (&&, | |, !); Algorithms, and created Rock Paper Scissors; Truthy and Falsy values; Shortcuts for if-statements (ternary, guard, default); Go to file: boolean.html rock-paper-scissor.html readme.md |
| 7 - Functions | // Functions = let us reuse code; Return = get a value out of a function; Parameters = put values into a function; Improved the code for Rock, Paper, Scissors; Go to file: functions.html readme.md |
| 8 - Objects | // Objects = group related values together; Added a score to Rock Paper Scissors; Built-in objects (JSON, localStorage); More details (null, auto-boxing, references); Shortcuts (destructuring, shorthand property, shorthand method); Go to file: objects.html readme.md |
| 9 - Document Object Model (DOM) | // Document Object Model (DOM); document.querySelector(...); .innerHTML; 3 projects using the DOM; onkeydown="..."; More details about strings + window object; Go to file: dom.html readme.md |
| 10 - HTML, CSS, and JavaScript Together | // Reviewed CSS, and added CSS to projects; .classList(); Finished Rock Paper Scissors; Organize JavaScript and CSS code into separate files; Go to file: lesson-10 readme.md |
| 11 - Arrays and Loops | // Arrays = list of values; Loops (while loop, for loop); Accumulator Pattern; Created a Todo List project; Arrays are references, destructuring; More features of loops: break, continue, loops inside a function; Go to file: arrays-and-loops.html readme.md |
| 12 - Advanced Functions | // Functions are values; setTimeout(), setInterval(); .forEach(() => {}); Arrow functions, .addEventListener(); filter(), .map(); Closure; Go to file: advanced-function.html readme.md |
| Beginning of JavaScript Amazon Project | |
| 13 - Intro to Amazon Project & git | // Started the final Amazon project; Intro to git; Learn the main idea of JavaScript (i. save the data, ii. generate the html, iii. make it interactive); Created list of products; Made the 'add to cart' button interactive (also added the message, use case of setTimeout() ); made the cart quantity interactive; Go to file: lesson-13 readme.md |
| 14 - Modules | Go to commit: Lesson // use module and re-organize; Generating checkout html (with de-duplicating technique); Fixed price formatting with utils; Fixed radio selector; Delete product from the cart and update the page; Save to localStorage; Go to commit: Exercise // add updateCartQuantity() to header text; Organize cart with calculateCartQuantity() & reuse it; Add update and save cart quantity; add validation to check new quantity; Allow updating by pressing 'Enter'; Go to file: lesson-14 readme.md |
| 15 - External libraries, MVC | Go to commit: Lesson // save data & generate html for delivery options; Make delivery options interactive; Regenerating delivery option html when data is changed; move orderSummary into its own file; Save data & generate html for payment summary; Make payment summary interactive - mvc practical example; Go to commit: Exercise // Pre challenge exercise; Update quantity items at header & payment summary using MVC; Adjust delivery date with isWeekend and use MVC in the rest of code Go to file: lesson-15 readme.md |
| 16 - Testing | Go to commit: Lesson // create automated tests for formatCurrency; add jasmine testing framework; create automated tests for addToCart; Integration test - how the page looks; integration test - how the page behaves; remove duplicate code with hooks: beforeEach() Go to commit: Exercise // pre challenge exercise; Test suite: removeFromCart(); Test suite: UpdateDeliveryOption() Go to file: lesson-16 readme.md |
| 17 - Object Oriented Programming (OOP) | Go to commit: Lesson // create oop version of cart.js; create class version of cart.js; make localStorageKey and loadFromStorage() private; convert products into classes; use inheritance & polymorphism to add 'size chart' link; learn more details about classes & 'this' Go to commit: Exercise // pre challenge exercise; add instructionLink and warrantyLink in Appliance Class; add test suite for Product, Clothing, Appliance class; use cart class instead of cart array & update all import Go to file: lesson-17 readme.md |
Personal Notes in Closed issues.
- [v] Initialize with git
- [v] Write HTML/CSS
- [v] Supercharge CSS
- [L] Build Things
- [L] Add interactivity with JavaScript
Fun Fact: There are notes in Closed issues.
Distributed under the MIT License. Visit here for more information.
Here are some of the people -yes, they are also self-taught developers- I have had the pleasure of learning from:
This is the year I started to care about learning to code; you were the most significant reason my attitude changed. I’ll never forget all of you. Thank you!