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

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

Contact Admin : @MehammedTeshome
Download Telegram
i have a giveaway.

ቻናላችንን በ ቻናሉ ወይም በ ሌሎች ግሩፕ ላይ ተደራሽ እንዲሆን ለሚያደርጉ ጥቂት ሰዎች ከነዚህ ጋይዶች የፈለገውን 1 እንሸልማለን!

የምትፈልጉ @MehammedTeshome ላይ
9👍4👌1
CSS in 2 min.

🔹 CSS Basics

➡️ CSS stands for Cascading Style Sheets
➡️ Used to style HTML elements
➡️ Three ways to apply CSS: Inline, Internal, External
➡️ External CSS uses a .css file linked via <link>
➡️ CSS rules have selectors and declaration blocks
➡️ Declaration blocks contain properties and values

🔹 CSS Syntax

➡️ Selector targets the HTML element
➡️ Declaration block is enclosed in {}
➡️ Each declaration has a property: value; pair
➡️ Multiple declarations are separated by semicolons

🔹 CSS Selectors

➡️ * selects all elements
➡️ element targets specific elements like p, div
➡️ .class selects elements with a specific class
➡️ #id selects a specific ID
➡️ element, element targets multiple elements
➡️ element element selects descendants
➡️ element > element selects direct children
➡️ element + element selects adjacent siblings
➡️ element ~ element selects general siblings
➡️ [attribute] targets by attribute

🔹 Text and Font Styling

➡️ color sets the text color
➡️ font-family sets the font
➡️ font-size sets the text size
➡️ font-weight makes text bold or light
➡️ font-style sets italic or normal
➡️ text-align aligns text (left, center, right, justify)
➡️ text-decoration adds underline, overline, or line-through
➡️ line-height controls spacing between lines
➡️ letter-spacing adjusts space between letters
➡️ text-transform changes text case (uppercase, lowercase, capitalize)

🔹 Box Model

➡️ Every element is a box: content → padding → border → margin
➡️ width and height control content size
➡️ padding controls space inside the element
➡️ border defines the edge
➡️ margin controls space outside the element
➡️ box-sizing: border-box includes padding and border in width/height

🔹 Backgrounds

➡️ background-color sets background color
➡️ background-image sets background image
➡️ background-repeat controls repetition
➡️ background-size defines scaling (cover, contain)
➡️ background-position sets image position
➡️ background-attachment: fixed makes background stay during scroll

🔹 Borders

➡️ border sets width, style, and color
➡️ border-radius creates rounded corners
➡️ border-top, border-right, etc., for individual sides

🔹 Margins and Padding

➡️ margin adds space outside the element
➡️ padding adds space inside the element
➡️ You can set them individually: top, right, bottom, left
➡️ Shorthand: margin: 10px 20px; for vertical/horizontal spacing

🔹 Display and Positioning

➡️ display defines how elements are rendered: block, inline, inline-block, flex, grid, none
➡️ visibility: hidden hides the element but retains space
➡️ position:
➡️ static (default)
➡️ relative (moves relative to its position)
➡️ absolute (relative to nearest positioned ancestor)
➡️ fixed (relative to viewport)
➡️ sticky (sticks during scroll)
➡️ top, right, bottom, left work with positioning

🔹 Flexbox

➡️ display: flex activates flex container
➡️ flex-direction sets direction (row, column)
➡️ justify-content aligns items horizontally
➡️ align-items aligns items vertically
➡️ flex-wrap controls wrapping
➡️ align-self overrides alignment for a single item
➡️ gap sets spacing between items

🔹 CSS Grid

➡️ display: grid activates grid layout
➡️ grid-template-columns and grid-template-rows define structure
➡️ gap sets spacing
➡️ grid-column and grid-row span items
➡️ justify-items and align-items align content

🔹 Colors and Units

➡️ Colors:
➡️ Named (e.g. red)
➡️ Hex (#ff0000)
➡️ RGB (rgb(255,0,0))
➡️ RGBA (with transparency)
➡️ Units:
➡️ px, em, rem, %, vh, vw

📘 For a complete practical guide with full CSS examples, properties, tricks, and styled use cases, grab the CSS ebook here:

https://news.1rj.ru/str/EmmersiveLearning/3778
👍51
Level Up Your HTML, CSS, and JavaScript Skills with These Projects

TicTacToe
🔟 Calculator
Quiz App
📝 To-Do List
Alarm Clock
🐍 Snake Game
📁 File Explorer
🎵 Music Player
🌐 Web Crawler
🔗 URL Shortener
🔒 Password Generator
🧩 Puzzle Game
🚅 Speed Typing Test
📊 Data Visualizer
📅 Event Calendar
🔤 Files Rename Tool
🤖 Web Automator
🗂 Document Organizer
🛒 E-commerce Store
🗳 Poll/Voting App
📷 Image Gallery
🎮 Memory Card Game
📚 Book Library
🔍 Search Engine
📦 Inventory Manager
🗺 Interactive Map
💬 Chat Application
🏆 Leaderboard
🧾 Invoice Generator
🔥 Weather Dashboard
👥 User Authentication System
📑 Resume Builder
🧮 Unit Converter
👍3
The Full-stack Roadmap for 2024 🗺👇

1. HTML + CSS
2. JavaScript
3. Git
4. React/Vue
5. Tailwind
6. Python / Node
7. Postgres / Mongo
8. APIs
9. Build projects

💸 Apply for your dream job!

Learn Full-stack Development at @EmmersiveLearning

https://news.1rj.ru/str/EmmersiveLearning

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

Your go to channel to learn fullstack develepment
👍31👎1
Fullstack Roadmap

HTML + CSS + JS
React (Frontend)
Node + Express (Backend)
MongoDB (Database)
Git + GitHub
Deploy (Netlify, Vercel, Render)
👍106
Forwarded from Muhammed Teshome
ግሩፕ ላይ Scam የምትልኩ ረፖርት፤ ዲሊት እና ባን አደርጋለሁ!

ተው እባካችሁ እረፉ!
2
Top 20 Free APIs You Should Know as a Developer:

1. JSONPlaceholder – Fake online REST API for testing and prototyping
2. OpenWeather – Provides weather data for any location
3. NewsAPI – Fetch the latest news headlines and articles
4. REST Countries – Get information about countries like population, flags, etc.
5. Cat Facts API – Returns random cat facts
6. JokeAPI – Access programming, general, or dark jokes
7. Advice Slip API – Get random advice quotes
8. CoinGecko – Get real-time cryptocurrency data
9. PokeAPI – Access Pokémon data and details
10. SpaceX API – Get info on launches, rockets, and missions
11. Open Library API – Search books and authors from the Open Library
12. Bored API – Get random activity suggestions
13. Genderize API – Predict gender from a first name
14. Agify API – Predict age based on a name
15. IPify – Get your public IP address
16. Fake Store API – Dummy e-commerce product data
17. Animechan – Get random anime quotes
18. Public APIs – Search thousands of public APIs
19. Google Books API – Search books using Google Books
20. Giphy API – Get trending or random GIFs
5👍2
JavaScript in 5 min👇

🔹 JavaScript Basics

➡️ JavaScript is a noscripting language for web development
➡️ Runs in the browser or server (via Node.js)
➡️ Case-sensitive and dynamic (no fixed data types)
➡️ Statements end with ; (optional but recommended)
➡️ Use // for single-line comments and /* */ for multi-line comments

🔹 Variables

➡️ Use let and const for block-scoped variables
➡️ Use var (function-scoped; avoid in modern code)
➡️ const is used for constants (cannot be reassigned)
➡️ Variable names must start with a letter, _, or $

🔹 Data Types

➡️ Primitive Types: string, number, boolean, null, undefined, symbol, bigint
➡️ Reference Types: object, array, function
➡️ Use typeof to check type

🔹 Operators

➡️ Arithmetic: +, -, *, /, %, **
➡️ Assignment: =, +=, -=, *=, /=, etc.
➡️ Comparison: ==, ===, !=, !==, >, <, >=, <=
➡️ Logical: &&, ||, !
➡️ Ternary: condition ? true : false
➡️ Nullish Coalescing: ??

🔹 Control Flow

➡️ if, else if, else for conditionals
➡️ switch for multiple conditions
➡️ for, while, do...while for loops
➡️ break exits a loop, continue skips an iteration

🔹 Functions

➡️ Declare with function keyword
➡️ Arrow functions: const name = () => {}
➡️ Parameters are listed in ()
➡️ Functions can return values using return
➡️ Can be assigned to variables or passed as arguments

🔹 Arrays

➡️ Arrays are list-like objects
➡️ Use [] to declare
➡️ Common Methods:
➡️ push(), pop(), shift(), unshift()
➡️ slice(), splice(), concat(), join()
➡️ map(), filter(), reduce(), forEach()
➡️ Use length to get array size
➡️ Index starts at 0

🔹 Objects

➡️ Objects store key-value pairs
➡️ Declare using { key: value }
➡️ Access with dot . or bracket [] notation
➡️ Use Object.keys(), Object.values(), Object.entries()
➡️ Use delete to remove a property

🔹 Strings

➡️ Strings can use single or double quotes
➡️ Template literals use backticks `, and ${} for variables
➡️ Common Methods:
➡️ length, toUpperCase(), toLowerCase()
➡️ includes(), indexOf(), slice(), substring()
➡️ replace(), split(), trim()

🔹 Math & Numbers

➡️ Use Math object:
➡️ Math.round(), Math.floor(), Math.ceil()
➡️ Math.random(), Math.max(), Math.min()
➡️ Use parseInt(), parseFloat() to convert strings
➡️ Use Number() to convert any type to number

🔹 Date and Time

➡️ Use new Date() to create date objects
➡️ Methods:
➡️ getFullYear(), getMonth(), getDate()
➡️ getHours(), getMinutes(), getSeconds()
➡️ Use set...() to change date/time values

🔹 Events

➡️ Events are actions like click, hover, etc.
➡️ Use addEventListener() to handle events
➡️ Common Events: click, submit, input, keydown, load
➡️ The event object contains details about the event

🔹 DOM Manipulation

➡️ DOM = Document Object Model
➡️ Select Elements:
➡️ getElementById(), getElementsByClassName()
➡️ querySelector(), querySelectorAll()
➡️ Modify Content:
➡️ textContent, innerText, innerHTML
➡️ Modify Styles:
➡️ http://element.style.property = value
➡️ Modify Classes:
➡️ classList.add(), remove(), toggle()
➡️ Create/Remove Elements:
➡️ createElement(), appendChild(), removeChild()

🔹 ES6+ Features

➡️ let and const for modern variable declarations
➡️ Arrow functions for concise syntax
➡️ Template literals with ${}
➡️ Destructuring objects and arrays
➡️ Spread (...) and Rest (...) operators
➡️ Default parameters in functions
➡️ Modules using export and import
➡️ Promises and async/await for handling async code

🔹 Control & Error Handling

➡️ Use try, catch, finally to handle errors
➡️ Use throw to create custom errors
➡️ Use console.log(), console.error(), console.warn() for debugging

🔹 Loops with Arrays

➡️ forEach() iterates over items
➡️ map() returns a new array
➡️ filter() returns items that match condition
➡️ reduce() reduces to a single value
➡️ some() and every() return booleans

📘 For a full hands-on JavaScript guide with examples, challenges, and deep-dive sections, get the ebook here: https://news.1rj.ru/str/EmmersiveLearning/3783

Video Course : https://www.youtube.com/watch?v=jF5oxeeuu6E
👍32
Forwarded from Muhammed Teshome
Prompting is a Great skill.

Master it.
👍8
Forwarded from Immersive Ai
This is a very smart move by the United Arab Emirates.

Providing free access to OpenAI’s ChatGPT for their ~11 million residents & citizens may cost around $3 billion annually, but even a 1% AI-boost in productivity could double that in GDP gains, excellent return on investment!
4
10 Must-Know Graph Algorithms for Coding Interviews:

1. Depth First Search (DFS)
2. Breadth First Search (BFS)
3. Topological Sort
4. Union Find
5. Cycle Detection
6. Connected Components
7. Bipartite Graphs
8. Flood Fill
9. Minimum Spanning Tree
10. Shortest Path
5
HOW TO STRUCTURE YOUR Fullstack Development PROJECT (MEAN Stack)⬇️

📁 mean-project/
├── 📁 client/ (Frontend - Angular)
│ ├── 📁 src/
│ │ ├── 📁 app/
│ │ │ ├── 📁 components/
│ │ │ │ ├── 📁 ui/
│ │ │ │ │ ├── 📄 button.component.ts
│ │ │ │ │ ├── 📄 card.component.ts
│ │ │ │ │ └── 📄 modal.component.ts
│ │ │ │ ├── 📁 forms/
│ │ │ │ │ ├── 📄 login-form.component.ts
│ │ │ │ │ └── 📄 register-form.component.ts
│ │ │ │ └── 📁 layout/
│ │ │ │ ├── 📄 header.component.ts
│ │ │ │ └── 📄 footer.component.ts
│ │ │ ├── 📁 pages/
│ │ │ │ ├── 📄 home.component.ts
│ │ │ │ ├── 📄 dashboard.component.ts
│ │ │ │ └── 📄 profile.component.ts
│ │ │ ├── 📁 services/
│ │ │ │ ├── 📄 auth.service.ts
│ │ │ │ └── 📄 api.service.ts
│ │ │ ├── 📁 models/
│ │ │ │ ├── 📄 user.model.ts
│ │ │ │ └── 📄 post.model.ts
│ │ │ ├── 📁 guards/
│ │ │ │ ├── 📄 auth.guard.ts
│ │ │ │ └── 📄 admin.guard.ts
│ │ │ ├── 📁 pipes/
│ │ │ │ └── 📄 format-date.pipe.ts
│ │ │ ├── 📄 app.module.ts
│ │ │ ├── 📄 app-routing.module.ts
│ │ │ └── 📄 app.component.ts
│ │ ├── 📁 assets/
│ │ │ ├── 📁 images/
│ │ │ │ └── 📄 logo.png
│ │ │ ├── 📁 styles/
│ │ │ │ ├── 📄 theme.scss
│ │ │ │ └── 📄 globals.scss
│ │ │ └── 📁 icons/
│ │ │ └── 📄 menu.noscript
│ │ ├── 📄 environments/
│ │ │ ├── environment.ts
│ │ │ └── http://environment.prod.ts
│ │ ├── 📄 index.html
│ │ ├── 📄 main.ts
│ │ └── 📄 polyfills.ts
│ ├── 📄 angular.json
│ ├── 📄 package.json
│ └── 📄 .env
├── 📁 server/ (Backend - Node.js & Express)
│ ├── 📁 controllers/
│ │ ├── 📄 authController.js
│ │ └── 📄 userController.js
│ ├── 📁 models/
│ │ ├── 📄 User.js
│ │ └── 📄 Post.js
│ ├── 📁 routes/
│ │ ├── 📄 authRoutes.js
│ │ └── 📄 userRoutes.js
│ ├── 📁 middlewares/
│ │ ├── 📄 authMiddleware.js
│ │ └── 📄 errorHandler.js
│ ├── 📁 config/
│ │ ├── 📄 db.js
│ │ └── 📄 keys.js
│ ├── 📄 server.js
│ ├── 📄 package.json
│ ├── 📄 .env
│ └── 📄 .gitignore
├── 📁 docs/
│ └── 📄 http://README. md
├── 📄 LICENSE
└── 📄 .gitignore
14👍3🤪2👏1
Forwarded from Muhammed Teshome
Neverrr 🙅‍♂️
👍15🫡1
As a Developer, are you married? 😊
😁8
😊😂

HTML is a programming language
😁11🤣5
Stage 1 – HTML
Stage 2 – CSS (Grid, Flex)
Stage 3 - Git + GitHub
Stage 4 – JavaScript, DOM
Stage 5 – React VueJS Svetle || Angular
Stage 6 – REST API
Stage 7 – Node.js
Stage 8 – Mongo
Stage 9 – Build projects to gain experience

🏆 – Full Stack developer. 🙌

https://news.1rj.ru/str/EmmersiveLearning
9
Forwarded from Immersive Ai
Ai Literacy matters the most in today's rapidly evolving technological landscape.
3
Forwarded from Immersive Ai
አንዳንዱ የ Ai አፖችን chatgpt, Gemini, Grok....etc.... መጫን ብቻ Ai መጠቀም ሚመስለው አለ!

አንዱ እነዚህን ስልኩ ላይ ጭኖ ከ ሳምንት በላይ ነክቷቸው እንደማያቅ ነገረኝ
i mean...ካልተጠቀምክበት ምን ጥቅም ?... እኮ ምን ጥቅም ?!

ብሮሮሮ ... በ ሁሉም ፊልድ ፕሮፌሰሮችን ነው በ ኪስህ ይዘህ ምትዞረው!

Ask...Ask ....Ask moRE.
14👍5😁4