Code Spark
8.11K subscribers
205 photos
11 videos
68 files
138 links
Code Spark โ€“ helps you learn coding through collaboration in an easy and fun way. Work together, start small, practice step by step, and turn ideas into real projects. Spark your mind, share your knowledge, build skills as a team, and become great program
Download Telegram
๐ŸŽ‰ Congratulations, Ethio Coders Family! ๐ŸŽ‰

๐Ÿš€ Weโ€™ve officially reached 2K subscribers! ๐Ÿš€

This is just the beginningโ€”letโ€™s keep learning, coding, and growing together! ๐Ÿ’ป๐Ÿ”ฅ

๐Ÿฅณ๐ŸŽŠ Thank you for being part of this amazing journey! ๐ŸŽŠ๐Ÿฅณ
๐Ÿ‘3๐Ÿ‘2
โค3
๐ŸŒ™ 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
RAMADAN KEREEM
๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡
https://vm.tiktok.com/ZMB1kUMwD/
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.
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
    <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
Examples of html form
๐Ÿ“Œ 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
Examples of semantic tag
๐Ÿ‘จโ€๐Ÿ’ป 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
แŠ แˆฐแˆ‹แˆ™ แŠฃแˆˆแ‹ญแŠฉแˆ แ‹ˆแˆซแˆ…แˆ˜แ‰ฑแˆ‹แˆ‚ แ‹ˆแ‰ แˆซแŠซแ‰ฑแˆ… แŠฅแŠ•แ‹ดแ‰ต แАแ‰น

html แŒจแˆญแˆฐแŠ“แˆ แ‰€แŒฃแ‹ญ แˆแŠ• แŠฅแŠ•แŒ€แˆแˆญ
Final Results
48%
Css
20%
JavaScript
10%
Python
20%
C++
3%
Or other
๐Ÿ‘2
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