Emmersive Learning
4.83K subscribers
2.11K photos
71 videos
10 files
933 links
Learn Fullstack Development | Coding.

Youtube : https://www.youtube.com/@EmmersiveLearning/?sub_confirmation=1

Contact Admin : @MehammedTeshome
Download Telegram
Practice code Everywhere you go:

- In the park while enjoying nature
- At a coffee shop over a cup of coffee
- On a train during your commute
- At home, in the comfort of your living room
- Donโ€™t wait for โ€œthe perfect place"

Code is portable,

and so is your learning! ๐Ÿš€

@EmmersiveLearning
๐Ÿ‘3
C O D I N G ยปยปยปยปยปยปยปยปยป
๐Ÿ˜ฑ2
Forwarded from Muhammed Teshome
แŠ แ‹ณแ‹ฒแˆต แˆƒแˆณแ‰ฅ แˆˆแˆ›แแˆˆแ‰… แ‹ซแˆแ‰ฐแАแ‰ƒแ‰ฃแ‰ธแ‹ แก
โ€”โ€”โ€”โ€”โ€”

๐Ÿšถ แˆตแˆแŠญ แˆณแ‰ตแ‹ญแ‹ แ‹ˆแŠญ แŠ แ‹ตแˆญแŒ

๐Ÿ‹๏ธแˆตแ–แˆญแ‰ต แ‹จแˆแ‰ตแˆ„แ‹ต แŠจแˆ†แА แ‹ซแˆˆ แˆแŠ•แˆ แ‹ตแˆแ…(แˆ™แ‹šแ‰ƒ/แАแˆบแ‹ณ ) แ‰ แ‰ฃแ‹ถแ‹ แˆ‚แ‹ตแŠ“ แˆตแˆซ แข

๐Ÿฅ แˆแŒแ‰ฅ แŠฅแ‹จแˆฐแˆซแˆ… แŠจแˆ†แА แˆแŠ•แˆ แАแŒˆแˆญ แŠ แ‰ตแŠญแˆแ‰ต ( แ‰ฒแ‰ช แค แ‰ฒแŠญแ‰ถแŠญ แค แ‹ฎแ‰ฑแ‰ฅ ) แˆแŠ•แˆ แАแŒˆแˆญ แŠ แ‰ตแŠญแˆแ‰ต แข แ‹แˆ แ‹ซแˆˆ แ‹ญแˆแŠ•แข

๐Ÿ‘‰แŠ แ‹•แˆแˆฎแˆ… แ‰ฃแ‹ถ แŠฅแŠ•แ‹ฒแˆ†แŠ• แแ‰€แ‹ฒแˆˆแ‰ต แŠฅแˆตแŠช (แˆแŠ•แˆ แŠ แ‰ณแˆณแ‹จแ‹แค แŠ แ‰ณแˆตแ‹ณแˆแŒ แ‹แค แ‹แˆ แ‰ฅแˆˆแˆ… แ‹แˆ แ‰ แˆˆแ‹แข

๐Ÿ‘‰แˆƒแˆณแ‰ฆแ‰ฝ แˆฒแŒแ‰ฐแˆˆแ‰ฐแˆ‰ แ‰ณแ‹ซแˆˆแˆ… แ‹ซแŠ”

๐Ÿ”ฅแ‹ญแˆ„ แŠฅแˆซแˆฑ แŠฅแˆซแ‰ต แŠฅแ‹จแˆฐแˆซแˆ แ‹จแˆ˜แŒฃ แˆƒแˆณแ‰ฅ แАแ‹ ๐Ÿ˜Š

แˆžแŠญแˆฉแ‰ต แ‹ˆแ‹ณแŒ†แ‰ฝ๐Ÿซถ
โค6๐Ÿ‘4๐Ÿซก1
๐Ÿ˜Š๐Ÿ˜Š๐Ÿ˜‚๐Ÿ˜‚๐Ÿ˜‚
๐Ÿ˜2
๐Ÿ˜Š๐Ÿ˜‚๐Ÿ˜‚
๐Ÿ˜4
when you use AI. it's like this.
๐Ÿ‘3
How to get started with web development.

โ€“ Roll up your sleeves
โ€“ Open your laptop
โ€“ Open browser then YouTube
โ€“ Search HTML crash course
โ€“ Follow it
โ€“ Write code simultaneously
โ€“ Take short notes
โ€“ Congrats๐ŸŽ‰ This is the way

Self exploration is the key!


แŠฅแŠ•แ‹ฐแˆแŠ• แŠ แ‹ฐแˆซแ‰ฝแˆ! แ‰คแ‰ฐแˆฐแ‰ฅ!
๐Ÿ‘5โค1
10 Top Learning Sites To Help You Become Extremely Skilled:

1. IT & Software - edX
2. Designer - Coursera
3. Data Science - Kaggle
4. Product Manager - Udacity
5. Cybersecurity - TryHackMe
6. Developer - FreeCodeCamp
7. Cloud Engineering - A Cloud Guru
8. Digital Marketing - Google Skillshop
9. Finance Professional - Khan Academy
10. Business & Management - LinkedIn Learning
โค6
6 Tips for writing better JavaScript code:

1. Declare and initialize variables upfront
2. Create modular, specialized functions
3. Eliminate duplicate code
4. Be efficient with DOM manipulations
5. Minimize global variables
6. Embrace shorthand notation (Object Literals)

@EmmersiveLearning
โค2๐Ÿฅฐ1
Best way to master CSS,๐Ÿ”ฅ

The CSS tree ๐Ÿ‘‡
|
|โ”€โ”€ Text Styles
| |โ”€โ”€ color
| |โ”€โ”€ font
| | โ”œโ”€โ”€ font-family
| | โ”œโ”€โ”€ font-size
| | โ””โ”€โ”€ font-weight
| |โ”€โ”€ text-align
| |โ”€โ”€ text-decoration
| | โ”œโ”€โ”€ underline
| | โ””โ”€โ”€ line-through
| |โ”€โ”€ line-height
| โ””-โ”€ letter-spacing
|
|โ”€โ”€ Box Model
| |โ”€โ”€ width
| |โ”€โ”€ height
| |โ”€โ”€ margin
| | โ”œโ”€โ”€ margin-top
| | โ”œโ”€โ”€ margin-right
| | โ”œโ”€โ”€ margin-bottom
| | โ””โ”€โ”€ margin-left
| |
| |โ”€โ”€ padding
| | โ”œโ”€โ”€ padding-top
| | โ”œโ”€โ”€ padding-right
| | โ”œโ”€โ”€ padding-bottom
| | โ””โ”€โ”€ padding-left
| |
| โ””-โ”€ border
| |โ”€โ”€ border-width
| | |โ”€โ”€ border-top-width
| | |โ”€โ”€ border-right-width
| | |โ”€โ”€ border-bottom-width
| | โ””โ”€โ”€ border-left-width
| |โ”€โ”€ border-color
| | โ”œโ”€โ”€ border-top-color
| | โ”œโ”€โ”€ border-right-color
| | โ”œโ”€โ”€ border-bottom-color
| | โ””โ”€โ”€ border-left-color
| โ””โ”€โ”€ border-radius
| โ”œโ”€โ”€ border-top-left-radius
| โ”œโ”€โ”€ border-top-right-radius
| โ”œโ”€โ”€ border-bottom-left-radius
| โ””โ”€โ”€ border-bottom-right-radius
|
|โ”€โ”€ Positioning
| โ”œโ”€โ”€ position
| โ”œโ”€โ”€ top
| โ”œโ”€โ”€ right
| โ”œโ”€โ”€ bottom
| โ””โ”€โ”€ left
|
|โ”€โ”€ Layout
| โ”œโ”€โ”€ display
| โ”œโ”€โ”€ visibility
| โ”œโ”€โ”€ float
| โ””โ”€โ”€ clear
|
|โ”€โ”€ Flexbox
| โ”œโ”€โ”€ flex
| โ”œโ”€โ”€ flex-direction
| โ”œโ”€โ”€ flex-wrap
| โ”œโ”€โ”€ justify-content
| โ””โ”€โ”€ align-items
|
|โ”€โ”€ Grid Layout
| โ”œโ”€โ”€ grid-template-columns
| โ”œโ”€โ”€ grid-template-rows
| โ”œโ”€โ”€ grid-column
| โ”œโ”€โ”€ grid-row
| โ”œโ”€โ”€ grid-column-gap
| โ””โ”€โ”€ grid-row-gap
|
|โ”€โ”€ Colors and Background
| โ”œโ”€โ”€ background-color
| โ”œโ”€โ”€ background-image
| โ”œโ”€โ”€ background-repeat
| โ”œโ”€โ”€ background-position
| โ”œโ”€โ”€ background-size
| โ”œโ”€โ”€ color
| โ””โ”€โ”€ opacity
|
|โ”€โ”€ Transitions and Animations
| |โ”€โ”€ transition
| | โ”œโ”€โ”€ transition-property
| | โ”œโ”€โ”€ transition-duration
| | โ”œโ”€โ”€ transition-timing-function
| | โ””โ”€โ”€ transition-delay
| โ””โ”€โ”€ animation
| โ”œโ”€โ”€ animation-name
| โ”œโ”€โ”€ animation-duration
| โ”œโ”€โ”€ animation-timing-function
| โ”œโ”€โ”€ animation-delay
| โ”œโ”€โ”€ animation-iteration-count
| โ”œโ”€โ”€ animation-direction
| โ”œโ”€โ”€ animation-fill-mode
| โ””โ”€โ”€ animation-play-state
|
|___ Others
|โ”€โ”€ z-index
|โ”€โ”€ box-sizing
|โ”€โ”€ overflow
| โ”œโ”€โ”€ overflow-x
| โ””โ”€โ”€ overflow-y
|โ”€โ”€ cursor
โ””โ”€โ”€ box-shadow

-------------------- END --------------------

Some good resources to learn CSS๐Ÿ‘‡

1.MDN
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
2.W3Schools
https://w3schools.com/css/
3.freeCodeCamp
https://freecodecamp.org/learn/
4.CSS-Tricks
https://css-tricks.com
5.Flexbox Froggy:
https://flexboxfroggy.com
6.Grid Garden
https://cssgridgarden.com

@EmmersiveLearning
๐Ÿ‘3
๐Ÿ˜Š๐Ÿ˜ข enjoy the process.

who relates with this ?
๐Ÿ˜7
Boost your coding game with these 10 essential VS Code extensions! ๐Ÿš€

โœจ Prettier
โœจ ESLint
โœจ IntelliSense for CSS
โœจ Debugger for Chrome
โœจ Code Spell Checker
โœจ Auto Rename Tag
โœจ Polacode
โœจ REST Client
โœจ Peacock
โœจ Docker

Share your top picks! ๐Ÿ‘‡
๐Ÿ˜2
Master JavaScript:

The JavaScript Tree ๐Ÿ‘‡
|
|โ”€โ”€ Variables
| โ”œโ”€โ”€ var
| โ”œโ”€โ”€ let
| โ””โ”€โ”€ const
|
|โ”€โ”€ Data Types
| โ”œโ”€โ”€ String
| โ”œโ”€โ”€ Number
| โ”œโ”€โ”€ Boolean
| โ”œโ”€โ”€ Object
| โ”œโ”€โ”€ Array
| โ”œโ”€โ”€ Null
| โ””โ”€โ”€ Undefined
|
|โ”€โ”€ Operators
| โ”œโ”€โ”€ Arithmetic
| โ”œโ”€โ”€ Assignment
| โ”œโ”€โ”€ Comparison
| โ”œโ”€โ”€ Logical
| โ”œโ”€โ”€ Unary
| โ””โ”€โ”€ Ternary (Conditional)
|
|โ”€โ”€ Control Flow
| โ”œโ”€โ”€ if statement
| โ”œโ”€โ”€ else statement
| โ”œโ”€โ”€ else if statement
| โ”œโ”€โ”€ switch statement
| โ”œโ”€โ”€ for loop
| โ”œโ”€โ”€ while loop
| โ””โ”€โ”€ do-while loop
|
|โ”€โ”€ Functions
| โ”œโ”€โ”€ Function declaration
| โ”œโ”€โ”€ Function expression
| โ”œโ”€โ”€ Arrow function
| โ””โ”€โ”€ IIFE (Immediately Invoked Function Expression)
|
|โ”€โ”€ Scope
| โ”œโ”€โ”€ Global scope
| โ”œโ”€โ”€ Local scope
| โ”œโ”€โ”€ Block scope
| โ””โ”€โ”€ Lexical scope
|
|โ”€โ”€ Arrays
| โ”œโ”€โ”€ Array methods
| | โ”œโ”€โ”€ push()
| | โ”œโ”€โ”€ pop()
| | โ”œโ”€โ”€ shift()
| | โ”œโ”€โ”€ unshift()
| | โ”œโ”€โ”€ splice()
| | โ”œโ”€โ”€ slice()
| | โ””โ”€โ”€ concat()
| โ””โ”€โ”€ Array iteration
| โ”œโ”€โ”€ forEach()
| โ”œโ”€โ”€ map()
| โ”œโ”€โ”€ filter()
| โ””โ”€โ”€ reduce()
|
|โ”€โ”€ Objects
| โ”œโ”€โ”€ Object properties
| | โ”œโ”€โ”€ Dot notation
| | โ””โ”€โ”€ Bracket notation
| โ”œโ”€โ”€ Object methods
| | โ”œโ”€โ”€ Object.keys()
| | โ”œโ”€โ”€ Object.values()
| | โ””โ”€โ”€ Object.entries()
| โ””โ”€โ”€ Object destructuring
|
|โ”€โ”€ Promises
| โ”œโ”€โ”€ Promise states
| | โ”œโ”€โ”€ Pending
| | โ”œโ”€โ”€ Fulfilled
| | โ””โ”€โ”€ Rejected
| โ”œโ”€โ”€ Promise methods
| | โ”œโ”€โ”€ then()
| | โ”œโ”€โ”€ catch()
| | โ””โ”€โ”€ finally()
| โ””โ”€โ”€ Promise.all()
|
|โ”€โ”€ Asynchronous JavaScript
| โ”œโ”€โ”€ Callbacks
| โ”œโ”€โ”€ Promises
| โ””โ”€โ”€ Async/Await
|
|โ”€โ”€ Error Handling
| โ”œโ”€โ”€ try...catch statement
| โ””โ”€โ”€ throw statement
|
|โ”€โ”€ JSON (JavaScript Object Notation)
|
|โ”€โ”€ Modules
| โ”œโ”€โ”€ import
| โ””โ”€โ”€ export
|
|โ”€โ”€ DOM Manipulation
| โ”œโ”€โ”€ Selecting elements
| โ”œโ”€โ”€ Modifying elements
| โ””โ”€โ”€ Creating elements
|
|โ”€โ”€ Events
| โ”œโ”€โ”€ Event listeners
| โ”œโ”€โ”€ Event propagation
| โ””โ”€โ”€ Event delegation
|
|โ”€โ”€ AJAX (Asynchronous JavaScript and XML)
|
|โ”€โ”€ Fetch API
|
|โ”€โ”€ ES6+ Features
| โ”œโ”€โ”€ Template literals
| โ”œโ”€โ”€ Destructuring assignment
| โ”œโ”€โ”€ Spread/rest operator
| โ”œโ”€โ”€ Arrow functions
| โ”œโ”€โ”€ Classes
| โ”œโ”€โ”€ let and const
| โ”œโ”€โ”€ Default parameters
| โ”œโ”€โ”€ Modules
| โ””โ”€โ”€ Promises
|
|โ”€โ”€ Web APIs
| โ”œโ”€โ”€ Local Storage
| โ”œโ”€โ”€ Session Storage
| โ””โ”€โ”€ Web Storage API
|
|โ”€โ”€ Libraries and Frameworks
| โ”œโ”€โ”€ React
| โ”œโ”€โ”€ Angular
| โ””โ”€โ”€ Vue.js
|
|โ”€โ”€ Debugging
| โ”œโ”€โ”€ Console.log()
| โ”œโ”€โ”€ Breakpoints
| โ””โ”€โ”€ DevTools
|
|โ”€โ”€ Others
| โ”œโ”€โ”€ Closures
| โ”œโ”€โ”€ Callbacks
| โ”œโ”€โ”€ Prototypes
| โ”œโ”€โ”€ this keyword
| โ”œโ”€โ”€ Hoisting
| โ””โ”€โ”€ Strict mode
|
|____________ END __________________


https://www.youtube.com/watch?v=jF5oxeeuu6E
โค4
Why Programming ?
โค6
Quiz:

Can you solve this equation in less than 20 seconds?

1 + 4 = 5
2 + 5 = 12
3 + 6 = 21
8 + 11 = ?
๐Ÿ‘3๐Ÿ‘1
List of Ai tools to use :

chatGPT : https://chat.openai.com/

Bard Ai :
https://bard.google.com/

Copilot :
https://copilot.microsoft.com/


if you master this . you will be unstoppable!

there is a video on how to use all of this.
@EmmersiveLearning แ‹ฉแ‰ฑแ‰ฅ แ‰ปแŠ“แˆ แˆ‹แ‹ญ แข

แ‹ฉแ‰ฑแ‰ฅ แก
https://www.youtube.com/@EmmersiveLearning/
โค4๐Ÿ‘3
Start small, Keep Going!

#Friday_Motivtion
โค4
English will be the Best Coding Language!

.

.

#mark_this.
โค4
What operating system are you currently using? ๐Ÿ˜‚๐Ÿ˜‚
๐Ÿ‘3
Start your web development journey with HTML.

Here is how to Master HTML:

The HTML Tree ๐Ÿ‘‡
|
|โ”€โ”€ Document Structure
| โ”œโ”€โ”€ <!DOCTYPE html>
| โ”œโ”€โ”€ <html>
| | โ”œโ”€โ”€ <head>
| | | โ”œโ”€โ”€ <title>
| | | โ””โ”€โ”€ <meta>
| | โ””โ”€โ”€ <body>
| | โ”œโ”€โ”€ <header>
| | โ”œโ”€โ”€ <nav>
| | โ”œโ”€โ”€ <main>
| | โ”œโ”€โ”€ <section>
| | โ”œโ”€โ”€ <article>
| | โ”œโ”€โ”€ <aside>
| | โ”œโ”€โ”€ <footer>
| | โ””โ”€โ”€ <script>
|
|โ”€โ”€ Elements
| โ”œโ”€โ”€ Headings (<h1> to <h6>)
| โ”œโ”€โ”€ Paragraph (<p>)
| โ”œโ”€โ”€ Links (<a>)
| โ”œโ”€โ”€ Images (<img>)
| โ”œโ”€โ”€ Lists
| | โ”œโ”€โ”€ Ordered (<ol>)
| | โ””โ”€โ”€ Unordered (<ul>)
| | โ””โ”€โ”€ List item (<li>)
| โ”œโ”€โ”€ Forms
| | โ”œโ”€โ”€ Form (<form>)
| | โ”œโ”€โ”€ Input (<input>)
| | โ”œโ”€โ”€ Textarea (<textarea>)
| | โ”œโ”€โ”€ Select (<select>)
| | | โ””โ”€โ”€ Option (<option>)
| | โ””โ”€โ”€ Button (<button>)
| โ”œโ”€โ”€ Tables (<table>)
| | โ”œโ”€โ”€ Table row (<tr>)
| | | โ”œโ”€โ”€ Table heading (<th>)
| | | โ””โ”€โ”€ Table data (<td>)
| | โ””โ”€โ”€ Table header (<thead>)
| โ”œโ”€โ”€ Semantic Elements
| | โ”œโ”€โ”€ <header>
| | โ”œโ”€โ”€ <nav>
| | โ”œโ”€โ”€ <main>
| | โ”œโ”€โ”€ <section>
| | โ”œโ”€โ”€ <article>
| | โ”œโ”€โ”€ <aside>
| | โ””โ”€โ”€ <footer>
| โ”œโ”€โ”€ Comments <!-- -->
| โ””โ”€โ”€ Inline Elements
| โ”œโ”€โ”€ <span>
| โ”œโ”€โ”€ <strong>
| โ”œโ”€โ”€ <em>
| โ”œโ”€โ”€ <br>
| โ”œโ”€โ”€ <hr>
| โ””โ”€โ”€ <a> (for inline links)
|
|โ”€โ”€ Attributes
| โ”œโ”€โ”€ src (for <img>, <script>, etc.)
| โ”œโ”€โ”€ href (for <a>, <link>, etc.)
| โ”œโ”€โ”€ alt (for alternative text)
| โ”œโ”€โ”€ width/height (for sizing)
| โ”œโ”€โ”€ class (for styling)
| โ”œโ”€โ”€ id (for unique identification)
| โ””โ”€โ”€ style (for inline CSS)
|
|โ”€โ”€ Forms and Input
| โ”œโ”€โ”€ Text Input
| โ”œโ”€โ”€ Radio Buttons
| โ”œโ”€โ”€ Checkboxes
| โ”œโ”€โ”€ Dropdowns
| โ””โ”€โ”€ Submit Button
|
|โ”€โ”€ Multimedia
| โ”œโ”€โ”€ Images
| โ””โ”€โ”€ Video (<video>)
|
|โ”€โ”€ Links and Navigation
| โ”œโ”€โ”€ Relative URLs
| โ”œโ”€โ”€ Absolute URLs
| โ””โ”€โ”€ Navigation Links
|
|โ”€โ”€ Lists
| โ”œโ”€โ”€ Ordered Lists
| โ””โ”€โ”€ Unordered Lists
|
|โ”€โ”€ Tables
| โ”œโ”€โ”€ Table Structure
| โ””โ”€โ”€ Table Styling
|
|โ”€โ”€ Semantic HTML
| โ””โ”€โ”€ Using Semantic Elements
|
|โ”€โ”€ Document Metadata
| โ”œโ”€โ”€ Character Encoding
| โ””โ”€โ”€ Viewport Meta Tag
|
|โ”€โ”€ HTML5 Features
| โ”œโ”€โ”€ New Document Structure
| โ”œโ”€โ”€ Semantic Elements
| โ”œโ”€โ”€ Multimedia Elements
| โ””โ”€โ”€ Form Enhancements
|
|โ”€โ”€ HTML5 APIs
| โ”œโ”€โ”€ Local Storage
| โ”œโ”€โ”€ Session Storage
| โ””โ”€โ”€ Web Storage API
|
|โ”€โ”€ HTML Validation
|
|โ”€โ”€ Responsive Design
| โ””โ”€โ”€ Media Queries
|
|
|____________ END __________________
https://www.youtube.com/watch?v=kDE31AmaIAM
โค7