C O D I N G »»»»»»»»»

አዳዲስ ሃሳብ ለማፍለቅ ያልተነቃባቸው ፡
—————

🚶 ስልክ ሳትይዝ ወክ አድርግ

🏋️ስፖርት የምትሄድ ከሆነ ያለ ምንም ድምፅ(ሙዚቃ/ነሺዳ ) በባዶው ሂድና ስራ ።

🥁 ምግብ እየሰራህ ከሆነ ምንም ነገር አትክፈት ( ቲቪ ፤ ቲክቶክ ፤ ዮቱብ ) ምንም ነገር አትክፈት ። ዝም ያለ ይሁን።

👉አዕምሮህ ባዶ እንዲሆን ፍቀዲለት እስኪ (ምንም አታሳየው፤ አታስዳምጠው፤ ዝም ብለህ ዝም በለው።

👉ሃሳቦች ሲግተለተሉ ታያለህ ያኔ

🔥ይሄ እራሱ እራት እየሰራሁ የመጣ ሃሳብ ነው 😊

ሞክሩት ወዳጆች🫶

when you use AI. it's like this.

Love to share this.

watch it. just a 4 minute video.

https://www.youtube.com/watch?v=RIVVQkZtnAU

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!


እንደምን አደራችሁ! ቤተሰብ!

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