Thanks to visit codestin.com
Credit goes to github.com

Skip to content

HamadSMA/fullstack-notes

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
README.md
README.md
 
 
template.txt
template.txt
 
 
tools.md
tools.md
 
 

Repository files navigation

TOP - FullStack JavaScript

General

🔗 Introduction to Web Development 🔗 Motivation and Mindset

⭐ Key Concepts:

  • Growth mindset
  • Persistence and grit
  • Focused learning and diffused learning

📚 Learning Resources:

🔗 How Does the Web Work? 🔗 Text Editors

⭐ Key Concepts:

  • What is the Internet
  • Packets and how they transfer data
  • What is a client and what is a server
  • IP addresses and DNS servers

📚 Learning Resources:

🔗 Inspecting HTML and CSS

⭐ Key Concepts:

  • Inspecting elements on the page
  • Access CSS overview

📚 Learning Resources:

🔗 Emmet

⭐Key Concepts:

  • Using emmet
  • create custom emmet binding in VSCode

🔗 SVG

⭐Key Concepts:

  • What SVGs, Vector Graphics, and XML are
  • How to create simple SVGs and add them to your websites
  • When to use SVGs, and when a different image format would be more appropriate

🔗 Borwser Compatibility

⭐ Key Concepts:

  • The browser war
  • Broweser engines
  • How to check for browser support

📚 Learning Resources:

Git and CLI

🔗 Command Line Basics 🔗 Setting up Git 🔗 Git Basics 🔗 Commit Messages 🔗 Branching

⭐ Key Concepts:

  • CLI completion with tab
  • Set VSCode to open files with 'code'
  • Git basic workflow (add, commit, status, log, push, ...etc)
  • Creating branches
  • Writing good commit messages

📚 Learning Resources:

HTML

🔗 Links and Images

⭐ Key Concepts:

  • Opening links in a new tab has a security concern
  • alt attribute for images
  • Define image size attribute from HTML

📚 Learning Resources:

🔗 Tables

⭐ Key Concepts:

  • Create advanced HTML tables.
  • Table accessibility
  • UX friendly trables

📚 Learning Resources:

🔗 Form Basics

⭐ Key Concepts:

  • Form controls
  • Input elements
  • Styling forms and for elements

📚 Learning Resources:

🔗 Form Validation

⭐ Key Concepts:

  • Client-side form validation
  • Pattern attribute and regExp
  • Styling forms based on state
  • Form UX

📚 Learning Resources:

CSS

🔗 Intro to CSS 🔗 The Cascade

⭐ Key Concepts:

  • Selectors and how to combine them
  • Specificity of selectors
  • How inheritance affect certain properties

📚 Learning Resources:

🔗 Block and Inline

⭐ Key Concepts:

  • Normal flow
  • Box-sizing
  • Block and inline elements

🔗 Introduction to Flexbox

⭐ Key Concepts:

  • Alignment
  • Flexible items
  • Growing and shrinking

📚 Learning Resources:

🔗 Default Styles

⭐ Key Concepts:

  • Browser's default styles
  • style reset and normalizing

📚 Learning Resources:

🔗 CSS Units

⭐ Key Concepts:

  • CSS value types
  • Relative vs absolute values
  • em unit can be useful for padding and margins
  • ch unit useful for limiting the paragraph length

📚 Learning Resources:

🔗 More Text Styles

⭐ Key Concepts:

  • Text styling
  • Using custom fonts
  • Font stack
  • Font optimization and best practices
  • Responsive font

📚 Learning Resources:

🔗 More CSS Properties

⭐ Key Concepts:

  • background property
  • border property
  • overflow property
  • opacity property

📚 Learning Resources:

🔗 Advanced Selectors

⭐ Key Concepts:

  • Combinator selectors
  • Pseudo-classes
  • Pseudo-elements
  • Attribute selectors

📚 Learning Resources:

🔗 Positioning

⭐ Key Concepts:

  • Relative positioning
  • Absolute positioning
  • Fixed positioning
  • Sticky positioning

📚 Learning Resources:

🔗 CSS Functions

⭐ Key Concepts:

  • calc()
  • min()
  • max()
  • clamp()

📚 Learning Resources:

🔗 Custome Properties

⭐ Key Concepts:

  • Custome properties
  • Scope and root selectro
  • Dark/light theme
  • Default OS theme

📚 Learning Resources:

🔗 Creating a Grid
🔗 Positioning Grid Elements

⭐ Key Concepts:

  • How to crate a grid container
  • specifying rows and columns
  • implicit rows or columns
  • Grid terminology (Lines, gutters, tracks, areas)
  • Positioning grid items using css grid properties

📚 Learning Resources:

🔗 Advanced Grid Properties

⭐ Key Concepts:

  • Using repeate function and fr units
  • CSS grid minmax function
  • combining auto-fit and auto-fill with min, max minmax, and repeat

📚 Learning Resources:

JavaScript

🔗 Installing Node.js 🔗 Data Types and Conditionals

⭐ Key Concepts:

  • Installing Node.js with nvm
  • Regular expressions

📚 Learning Resources:

🔗 JavaScript Developer Tools 🔗 Function Basics

⭐ Key Concepts:

  • Debug JavaScript in the browser
  • Use of breakpoints in debugging
  • Function expression and arrow functions
  • The call stack

📚 Learning Resources:

🔗 Problem Solving

⭐ Key Concepts:

  • Planning the project
  • Pseudocode
  • Breaking a complex problem into smaller chunks

📚 Learning Resources:

🔗 Clean Code

⭐ Key Concepts:

  • Naming variables and functions
  • Writing good comments

📚 Learning Resources:

🔗 Arrays and Loops

⭐ Key Concepts:

  • Arrays and array methods
  • Loops

📚 Learning Resources:

🔗 DOM Manipulation and Events

⭐ Key Concepts:

  • What is the DOM
  • Node vs element
  • Nodelist vs array
  • Altering the DOM
  • Event listeners
  • Event bubbling and capturing

📚 Learning Resources:

🔗 Object Basics

⭐ Key Concepts:

  • Creating objects
  • Accessing object properties
  • Using multiple object operators
  • Understanding the differences between object and primitive data types
  • Using the map, filter and reduce array methods

📚 Learning Resources:

🔗 Objects and Object Constructors

⭐ Key Concepts:

  • Objects and contructor functions
  • Prototypes and prototypal inheritance
  • The this keyword

📚 Learning Resources:

🔗 Factory Functions and the Module Pattern

⭐ Key Concepts:

  • Factory functions
  • Closures
  • The object shorthand notation
  • Object destructuring
  • Private variables and functions
  • Prototypal inheritance with factories
  • The module pattern: IIFEs

📚 Learning Resources:

🔗 Classes

⭐ Key Concepts:

  • Class syntax
  • Extending classes
  • Getters and setters
  • Private properties
  • Static fields and methods

📚 Learning Resources:

🔗 ES6 Modules

⭐ Key Concepts:

  • Import, export
  • Defult export
  • ESM vs CommonJS
  • Entry point
  • type="moduel" attribute

📚 Learning Resources:

🔗 npm

⭐ Key Concepts:

  • package.json
  • Dependencies and devDependencies

📚 Learning Resources:

🔗 Webpack

⭐ Key Concepts:

  • Javascript bundlers
  • Plugins and loaders
  • Dependency graphs
  • Configuring Webpack

📚 Learning Resources:

🔗 Revisiting Webpack

⭐ Key Concepts:

  • npm scripts
  • Webpack modes: development and production
  • Template repositories
  • Automate webpack modes

📚 Learning Resources:

🔗 OOP Principles

⭐ Key Concepts:

  • OOP
  • Tightly coupled vs loosely coupled modules
  • SOLID principles
  • Composition vs OOP
  • PubSub

📚 Learning Resources:

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published