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

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

😊😢 enjoy the process.

who relates with this ?

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! 👇

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

Why Programming ?

Quiz:

Can you solve this equation in less than 20 seconds?

1 + 4 = 5
2 + 5 = 12
3 + 6 = 21
8 + 11 = ?

Start small, Keep Going!

#Friday_Motivtion

English will be the Best Coding Language!

.

.

#mark_this.

What operating system are you currently using? 😂😂

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

5 Best CSS Generators 🎨

🔸Blob maker
🔗- blobmaker .app
🔹Glass Morphism
🔗- glassgenerator .netlify .app
🔸Fancy Border Radius
🔗- https://9elements.github .io/fancy-border-radius
🔹 Get Waves
🔗 getwaves .io
🔸Neumorphism
🔗- neumorphism. io

Data Modeling Mastery 📊

🗺 Plan your schema carefully
🚀 Optimize for performance
🔒 Ensure data integrity
🔍 Normalize data effectively
📈 Scale your database smartly
🔄 Use data indexing

Good data models are crucial for efficient databases.

What is your opinion? 👇

@EmmersiveLearning

Don't let bugs or setbacks discourage you - every mistake is an opportunity to learn and improve!

Keep coding, and keep growing!

Only 1 day is left for the beginning of 2024 G.C.

we can use this new year to
👉 change our selves,
👉 to start learning something,
👉 to start building something worth.


የሆነ ነገር ለመጀመር ስናስብ ፤ ቀጣይ አመት ፤ ቀጣይ ወር ፤ ቀጣይ ሳምንት ፤ ሰኞ ፤ ጁምዓ ፤ መስከረም በማለት የምታወቅ አይደለን፤ እስኪ ይሄንን ለበጎ እንጠቀመው።

ነገ እሁድ በቀጣዩ አመት በ 2024 ምን ልትሰሩ እንዳሰባችሁ ጎል፤ እቅድ፤ ፕላን ስታወጡ ዋሉ።

ከነገ በስተያ፤ ሰኞ ፣ በቀን 1/1/2024 የምትጀመሩበት ቀን ይሁን። ቀጣይ አመት በዚህ ሰዓት በ አንድ አመት (365 ቀን) ምን ላይ እንደደረሳችሁ የምናወራበት ይሆናል።

ግሩፑ ላይ ዲስከስ ማድረግ እንችላለን

ምን ላቅድ እና ልሰራ እችላለሁ ?

ይሄ እንደ ሰው ይለያያል። ነገር ግን እንደ ፍሬምወርክ

1. ትምህርት( ግዴታ የሆነ ተቁም ውስጥ መግባት አይጠበቅባችሁም ጊዜ መድባችሁ የሆነን ስኪል ቁጭ ብላችሁ ከቤታችሁ መማር ትችላላችሁ)

2. ፕሮጀክቶችን ፤ ስታርታፖችን እና ቢዝነሶችን መፍጠር እና መገንባት ፡

if you are a techie you can build Digital Startups:
✦ SaaS
✦ Databases
✦ Web/Mobile app
✦ Extentions/Plugins

3. ማንበብ እና የ ፐርሰናል ግንባታ ማድረግ(ካስፈለገም መሰልጠን እንዴ ፍላጎታችሁ )

ሃሳብ ጨምሩበት ፡ 👇

if you lack creativity, Picasso has a quote for you.

“Good artists copy. Great artists steal.”

To “steal” simply means taking multiple great ideas, and combining them in new ways.

When you combine existing ideas in your own way, you create something new.

That’s creativity.

There are 4 macronutrients of business:

📌 Brand
📌 Content
📌 Product
📌 Marketing

which extension you are going to use for your next project ??