Code Spark

❤3

1.12K views16:06

🌙 Ramadan Mubarak, Ethio Coders Family!

Alhamdulillah, we are blessed to see Ramadan, a month of fasting, prayer, and kindness.

This is a time to purify our hearts, seek forgiveness, and increase our good deeds. May Allah accept our fasts, prayers, and all our efforts.

Let us use this month to be patient, help others, and get closer to Allah.

May He fill our hearts with peace, guide us to the right path, and bless us with success in this life and the Hereafter.

May this Ramadan bring mercy, happiness, and barakah to you and your loved ones. Ramadan Kareem! 🤲

❤7👏2👍1

1.14K views19:18

Code Spark

RAMADAN KEREEM
👇👇👇👇👇👇👇👇
https://vm.tiktok.com/ZMB1kUMwD/

969 viewsedited 05:28

Code Spark

Uses of Web Development

Web development is used to create and maintain websites and web applications. It helps in:
Business & E-commerce – Companies sell products and services online.

Social Networking – Platforms like Facebook, Twitter, and LinkedIn connect people.

Education – Online learning platforms like Udemy and Coursera provide courses.

Entertainment – Websites like YouTube, Netflix, and Spotify offer media content.

Government & Services – Websites provide online services like bill payments and registrations.

Healthcare – Hospitals and clinics use websites for appointments and health records.

How to Make a Profit from Web Development

Freelancing – Work on platforms like Fiverr, Upwork, and Freelancer.
Building & Selling Websites – Create websites and sell them to businesses.

Web Hosting & Maintenance – Offer hosting services and website management.

Creating & Selling Web Templates – Design website themes and sell them on platforms like ThemeForest.

Affiliate Marketing – Create a website and earn by promoting products.

Ads & Monetization – Run a blog or a web app and earn from Google AdSense.

Web Development Jobs – Get hired as a web developer for companies.
E-commerce Store – Sell products or services through your own website.

Teaching Web Development – Create online courses or tutorials on YouTube.

If you want to start web development, you can learn HTML, CSS, JavaScript, and frameworks like React or Vue.js.

1.24K views17:40

Code Spark

https://vm.tiktok.com/ZMBevMtJF/

993 views10:01

Code Spark

HTML FORM
-------------------------------------

HTML Form (የHTML ፎርም) ምንድን ነው? 📝✨
የHTML ፎርም ተጠቃሚዎች መረጃዎችን እንዲያስገቡና ወደ ሰርቨር እንዲልኩ የሚያስችል የHTML አካል ነው። ለምሳሌ፣ የይለፍ ቃል፣ የተጠቃሚ ስም፣ ኢሜይል አድራሻ፣ አስተያየት፣ ወዘተ. ማስገባት እንችላለን። 🤩🚀

የHTML ፎርም መሰረታዊ አካላት (Basic Components of HTML Form)
<form> Tag (የ<form> መለያ) 📦🔒

ይህ መለያ የፎርሙን መጀመሪያና መጨረሻ ያመለክታል። (Defines the beginning and end of a form)

የፎርሙን ተግባርና መረጃ የሚላክበትን መንገድ ይገልጻል። (Specifies the form's action and method)

ዋና ዋናዎቹ ባህሪያት action እና method ናቸው። (Main attributes: action and method)

action: መረጃው የሚላክበትን የሰርቨር ፋይል (ለምሳሌ፣ process.php) ያመለክታል። 🚀 (Specifies the server file to which the form data is sent)

method: መረጃው የሚላክበትን መንገድ ይወስናል (ለምሳሌ፣ GET ወይም POST)። (Determines the HTTP method used to submit the form)

GET: መረጃውን በURL ውስጥ ይልካል (ለትንሽ መረጃ ተስማሚ ነው፣ ነገር ግን ደህንነቱ የተጠበቀ አይደለም)። 🧐 (Sends form data in the URL)

POST: መረጃውን በHTTP ጥያቄ ውስጥ ይልካል (ለብዙ መረጃና ለደህንነት ተስማሚ ነው)። 👍 (Sends form data in the HTTP request body)

ምሳሌ:

   <form action="process.php" method="post">
    </form>

<input> Tag (የ<input> መለያ) ⌨️🖱️
ተጠቃሚዎች መረጃዎችን እንዲያስገቡ የሚያስችል የግብዓት መስክ ይፈጥራል። (Creates input fields for user input)

የግብዓት አይነቶች በtype ባህሪ ይገለፃሉ (ለምሳሌ፣ text, password, email, checkbox, radio, submit)።
(Input types are defined by the type attribute)

type="text": የጽሑፍ ግብዓት መስክ ይፈጥራል። 📝 (Creates a text input field)

ምሳሌ:

     <label for="username">የተጠቃሚ ስም:</label><br>
<input type="text" id="username" name="username"><br>

type="password": የይለፍ ቃል ግብዓት መስክ ይፈጥራል (የተጻፈው ጽሑፍ በነጥቦች ወይም በከዋክብት ይሸፈናል)። 🔒👀 (Creates a password input field)

ምሳሌ:

     <label for="password">የይለፍ ቃል:</label><br>
<input type="password" id="password" name="password"><br>

type="email": የኢሜይል አድራሻ ግብዓት መስክ ይፈጥራል (የኢሜይል ቅርጸት ትክክል መሆኑን ያረጋግጣል)። 📧✔️ (Creates an email input field)

ምሳሌ:

     <label for="email">ኢሜይል:</label><br>
<input type="email" id="email" name="email"><br>

type="checkbox": የአማራጭ ሳጥን ይፈጥራል (ብዙ አማራጮችን መምረጥ ይቻላል)። ✅☑️ (Creates a checkbox input)

ምሳሌ:

     <label for="vehicle1">መኪና አለኝ</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Car"><br>
<label for="vehicle2">ብስክሌት አለኝ</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Bike"><br>

type="radio": የክብ አማራጭ ይፈጥራል (አንድ አማራጭ ብቻ መምረጥ ይቻላል)። 🔘⭕ (Creates a radio button input)

ምሳሌ:

     <label for="male">ወንድ</label>
<input type="radio" id="male" name="gender" value="male"><br>
<label for="female">ሴት</label>
<input type="radio" id="female" name="gender" value="female"><br>

type="submit": ፎርሙን የሚያስገባ ቁልፍ ይፈጥራል (መረጃውን ወደ ሰርቨር ይልካል)። 🚀👍 (Creates a submit button)

ምሳሌ:

     <input type="submit" value="አስገባ">

<label> Tag (የ<label> መለያ) 🏷️📝
የግብዓት መስክን መለያ ይሰጣል (ተጠቃሚዎች የትኛውን መረጃ ማስገባት እንዳለባቸው እንዲያውቁ ይረዳል)። (Provides a label for an input element)

for ባህሪው የትኛውን ግብዓት እንደሚያመለክት ይገልጻል። (The for attribute links the label to an input element)

ምሳሌ:

   <label for="username">የተጠቃሚ ስም:</label>

<textarea> Tag (የ<textarea> መለያ) 📝💬
ብዙ መስመር ያለው የጽሑፍ ግብዓት መስክ ይፈጥራል (ለአስተያየት ወይም ለረጅም ጽሑፍ ተስማሚ ነው)። (Creates a multiline text input field)

ምሳሌ:

   <label for="comment">አስተያየት:</label><br>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea><br>

<select> Tag (የ<select> መለያ) ⬇️📋
ተጠቃሚዎች ከአማራጮች ዝርዝር ውስጥ አንዱን እንዲመርጡ ያስችላል። (Creates a dropdown list)

<option> መለያዎች አማራጮችን ይገልጻሉ። (The <option> tags define the options in the list)

ምሳሌ:

   <label for="cars">መኪና ይምረጡ:</label><br>
<select id="cars" name="cars">
    <option value="volvo">ቮልቮ</option>
    <option value="saab">ሳብ</option>
    <option value="fiat">ፊያት</option>
    <option value="audi">አውዲ</option>
</select><br>

የHTML ፎርም ምሳሌ (HTML Form Example)

<form action="process.php" method="post">
    <label for="username">የተጠቃሚ ስም:</label><br>
    <input type="text" id="username" name="username"><br><br>

👍3

1.19K viewsedited 22:54

Code Spark

    <label for="password">የይለፍ ቃል:</label><br>
    <input type="password" id="password" name="password"><br><br>
    <label for="email">ኢሜይል:</label><br>
    <input type="email" id="email" name="email"><br><br>
    <label for="comment">አስተያየት:</label><br>
    <textarea id="comment" name="comment" rows="4" cols="50"></textarea><br><br>
    <input type="submit" value="አስገባ">
</form>

ይሄ መሰረታዊ የHTML ፎርም ማብራሪያ ነው። ማንኛውም ተጨማሪ ጥያቄ ካለቹ መጠየቅ ይቻላል። 😊👍🎉

❤1

1.02K views22:54

Code Spark

Examples of html form

1.16K views22:58

Code Spark

Endat memar yelgebachu sewoch
Yihann 👉 https://t.me/Muju_man_coding/336
link bemenkat step by step memar tichilalachu

Code Spark

ABOUT US
👇👇👇👇👇👇👇👇👇👇
https://mujuman.github.io/Ethio-coders/

እስካሁን የተማርናቸው title ናቸው

1. Website ለመስራት የሚያስፈልገውን ነገሮች

https://t.me/Muju_man_coding/141

2. Web development

https://t.me/Muju_man_coding/144

3. Why shoud we learn web development

ht…

1.04K views13:12

Code Spark

📌 Semantic Tags in HTML

Semantic tags are HTML elements that clearly describe the meaning of their content. They improve readability, SEO, and accessibility of a webpage.

1️⃣ <header> - Header Section 🏷️
The <header> tag represents the top section of a webpage or a section. It often contains the logo, navigation, or title.

🔹 Example:

<header> <h1>🌍 Welcome to My Website</h1> <nav> <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a> </nav> </header>

2️⃣ <nav> - Navigation Bar 🚀
The <nav> tag is used for the main navigation links of a webpage.

🔹 Example:

<nav> <ul> <li>🏠 <a href="index.html">Home</a></li> <li>ℹ️ <a href="about.html">About</a></li> <li>📞 <a href="contact.html">Contact</a></li> </ul> </nav>

3️⃣ <section> - Grouped Content 📌
The <section> tag divides a webpage into meaningful parts.

🔹 Example:

<section> <h2>💡 Our Services</h2> <p>We provide web development, SEO, and UI/UX design.</p> </section>

4️⃣ <article> - Independent Content 📰
The <article> tag is used for self-contained content, such as blogs or news articles.

🔹 Example:

<article> <h2>🖥️ The Future of AI</h2> <p>Artificial Intelligence is transforming the world...</p> </article>

5️⃣ <aside> - Sidebar Content 🎯
The <aside> tag contains extra information such as ads, related links, or side content.

🔹 Example:

<aside> <h3>🔗 Related Posts</h3> <ul> <li>✔️ HTML Basics</li> <li>✔️ CSS Grid & Flexbox</li> </ul> </aside>

6️⃣ <footer> - Bottom Section 🔚
The <footer> tag represents the bottom of a webpage, usually containing copyright or contact details.

🔹 Example:

<footer> <p>© 2025 My Website. All rights reserved. ✅</p> </footer>

🌟 Conclusion
Semantic tags organize and structure your webpage, making it more meaningful and accessible.

This is the last class of the basic of html

👍2❤1

1.21K viewsedited 04:54

Code Spark

Examples of semantic tag

1.22K views05:16

Code Spark

1.25K views05:19

Code Spark

👨‍💻 My Web Development Journey 👨‍💻

I'm excited to share my personal portfolio website! 🎉 It's a reflection of my skills, creativity, and passion for web development.

💡 What’s Inside?
✔️ About Me
✔️ My Services
✔️ Contact Information

I’d love to hear your thoughts! Let’s connect and collaborate. 🚀

👉 Check it out: My portfolio website

👍2👏2🔥1🥰1

1.24K viewsedited 07:12

Code Spark

አሰላሙ ኣለይኩም ወራህመቱላሂ ወበራካቱህ እንዴት ነቹ

html ጨርሰናል ቀጣይ ምን እንጀምር

Final Results

👍2

61 voters1.51K views06:51

Code Spark

አሰላሙ ኣለይኩም ወራህመቱላሂ ወበራካቱህ እንዴት ነቹ

html ጨርሰናል ቀጣይ ምን እንጀምር

Next week we will start css

be ready 💻

❤3

1.21K views20:19

Code Spark

Dear Ethio Coders members,
Learning CSS is an important step in becoming a great web developer.

To help more people improve their skills, we invite you to share this Telegram link 👉 https://t.me/Muju_man_coding with anyone who wants to learn CSS.
By sharing, you are helping others grow and become better at coding.

Let's support each other and build a strong coding community.

May Allah accept your Ramadan and bless you with knowledge and success.

Together, we learn. Together, we grow!

👍1👏1

1.35K views14:00

Code Spark

❤1

1.11K views07:53

Code Spark

INTRODUCTION TO CSS

What is Css?

💥CSS (Cascading Style Sheets) is a language used to style and design web pages. It controls the layout, colors, fonts, spacing, and overall appearance of a webpage.

CSS works alongside HTML to make websites visually appealing and responsive.

✨Key Features of CSS:

Styling: Controls colors, fonts, and backgrounds.
Layout: Arranges elements using Flexbox, Grid, and other techniques.
Responsiveness: Adapts websites for different screen sizes.
Efficiency: Allows applying styles to multiple pages using external stylesheets.

💥CSS (Cascading Style Sheets) የድረ-ገጾችን ገጽታ ለመንደፍ እና ለማስዋብ የሚያገለግል ቋንቋ ነው።

የድረ-ገጽን አቀማመጥ፣ ቀለሞች፣ ቅርጸ-ቁምፊዎች፣ ክፍተቶች እና አጠቃላይ ገጽታ ይቆጣጠራል። CSS ድረ-ገጾችን ማራኪ እና ለተለያዩ መሳሪያዎች ምቹ ለማድረግ ከ HTML ጋር አብሮ ይሰራል::

✨የ CSS ዋና ዋና ባህሪያት፡-

ማስዋብ (Styling): ቀለሞችን፣ ቅርጸ-ቁምፊዎችን እና ዳራዎችን ይቆጣጠራል::

አቀማመጥ (Layout): ንጥረ ነገሮችን በFlexbox፣ Grid እና ሌሎች ቴክኒኮችን በመጠቀም ያደራጃል::

ምላሽ ሰጪነት (Responsiveness): ድረ-ገጾች ለተለያዩ የስክሪን መጠኖች እንዲመጥኑ ያደርጋል::

ቅልጥፍና (Efficiency): ውጫዊ የስታይል ሉሆችን (stylesheets) በመጠቀም ቅጦችን ለብዙ ገጾች እንዲተገበሩ ያስችላል::

🥰3

1.3K views07:53

About

Blog

Apps

Platform