Code Spark – Telegram

Code Spark

@Muju_man_coding

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

About

Blog

Apps

Platform

8.11K subscribers

1.25K views05:19

👨‍💻 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

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

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

Final Results

👍2

61 voters1.51K views06:51

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

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

Next week we will start css

be ready 💻

❤3

1.21K views20:19

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

❤1

1.11K views07:53

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

💥Why use CSS

We use Cascading Style Sheets (CSS) to control the presentation of web pages written in HTML. Think of HTML as the structure and content of a house – the walls, doors, and furniture. CSS is like the interior designer. It tells the browser how that content should look:

Styling: CSS allows us to define the visual appearance of elements, such as colors, fonts, sizes, spacing, and layout. Instead of writing styling information directly into each HTML element, we can centralize it in CSS rules. This makes our code cleaner and easier to manage.

Separation of Concerns: CSS separates the presentation (how things look) from the structure and content (what things are). This separation makes websites easier to develop, maintain, and update. If you want to change the look of your entire website, you only need to modify the CSS files, not touch the HTML.

Consistency: By using CSS, we can ensure a consistent look and feel across all the pages of a website. This creates a better user experience and strengthens brand identity.

Responsiveness: CSS enables us to create websites that adapt to different screen sizes and devices (desktops, tablets, phones). Techniques like media queries allow us to apply different styles based on the device's characteristics.

Efficiency: External CSS files are cached by the browser, meaning that once a user visits one page of your website, their browser won't have to download the same styling information again for other pages. This makes websites load faster.

Accessibility: Well-structured CSS can contribute to better website accessibility by ensuring that content is presented in a clear and understandable way for all users, including those with disabilities.

💥Cssን ለምንድነው ምንጠቀመው

ካስኬዲንግ ስታይል ሺትስ (CSS) በኤችቲኤምኤል (HTML) የተጻፉ የድረ-ገጾችን አቀራረብ ለመቆጣጠር እንጠቀምበታለን። ኤችቲኤምኤልን እንደ ቤት አወቃቀር እና ይዘት – ግድግዳዎች፣ በሮች እና የቤት እቃዎች – ብለው ያስቡት። ሲኤስኤስ ደግሞ እንደ የውስጥ ዲዛይነር ነው። ይዘቱ በአሳሹ እንዴት መታየት እንዳለበት ይነግረናል፡-

ማስዋብ (Styling ): ሲኤስኤስ እንደ ቀለሞች፣ ቅርጸ-ቁምፊዎች (fonts)፣ መጠኖች፣ ክፍተቶች እና አቀማመጥ ያሉ የንጥረ ነገሮችን (elements) የእይታ ገጽታ እንድንገልጽ ያስችለናል። የማስዋቢያ መረጃን በቀጥታ በእያንዳንዱ የኤችቲኤምኤል ኤለመንት ውስጥ ከመጻፍ ይልቅ በሲኤስኤስ ህጎች ውስጥ እናማክላለን (centralize). ይህ ኮዳችንን ንጹህ እና ለማስተዳደር ቀላል ያደርገዋል።

የሃላፊነት መለያየት (Separation of concern ): ሲኤስኤስ አቀራረብን (ነገሮች እንዴት እንደሚታዩ) ከአወቃቀር እና ይዘት (ነገሮች ምን እንደሆኑ) ይለያል። ይህ መለያየት ድረ-ገጾችን ለማዳበር፣ ለመጠገን እና ለማዘመን ቀላል ያደርገዋል። የጠቅላላ ድር ጣቢያዎን ገጽታ ለመለወጥ ከፈለጉ የሲኤስኤስ ፋይሎችን ብቻ ማስተካከል ያስፈልግዎታል፣ ኤችቲኤምኤልን ሳይነኩ።

ተጣጣፊነት (consistency ): ሲኤስኤስን በመጠቀም በሁሉም የድር ጣቢያው ገጾች ላይ ወጥ የሆነ መልክ እና ስሜት ማረጋገጥ እንችላለን። ይህ የተሻለ የተጠቃሚ ተሞክሮ ይፈጥራል እና የምርት ማንነትን ያጠናክራል።

ምላሽ ሰጪነት (Responsive ): ሲኤስኤስ ከተለያዩ የስክሪን መጠኖች እና መሳሪያዎች (ዴስክቶፕ፣ ታብሌቶች፣ ስልኮች) ጋር የሚጣጣሙ ድረ-ገጾችን እንድንፈጥር ያስችለናል። እንደ ሚዲያ መጠይቆች (media queries) ያሉ ቴክኒኮች በመሳሪያው ባህሪያት ላይ በመመስረት የተለያዩ ቅጦችን እንድንተገብር ያስችሉናል።

ውጤታማነት (Efficiency ): ውጫዊ የሲኤስኤስ ፋይሎች በአሳሹ ይቀመጣሉ (cached)፣ ይህም ማለት አንድ ተጠቃሚ የድር ጣቢያዎን አንድ ገጽ ከጎበኘ በኋላ አሳሹ ለሌሎች ገጾች ተመሳሳይ የማስዋቢያ መረጃን እንደገና ማውረድ አይኖርበትም። ይህ የድር ጣቢያዎችን የመጫኛ ፍጥነት ያሻሽላል።

ተደራሽነት (accessibility ): በደንብ የተዋቀረ ሲኤስኤስ የአካል ጉዳተኞችን ጨምሮ ለሁሉም ተጠቃሚዎች ይዘቱ ግልጽ እና ለመረዳት በሚያስችል መንገድ እንዲቀርብ በማድረግ የተሻለ የድር ጣቢያ ተደራሽነትን ለማረጋገጥ አስተዋፅኦ ያደርጋል።

👍3🥰2❤1

1.22K viewsedited 02:02

ኢድ ሙባረክ ለethio coders ድንቅ አባላት በሙሉ! ይህ የደስታ በዓል ለሁላችሁም ደስታን፣ ሰላምን እና ስፍር ቁጥር የሌላቸውን በረከቶች ያምጣላችሁ። በሙቀት እና በአንድነት የተሞላ የተባረከ ኢድ እመኛለሁ። تقبل الله منا ومنكم (ተቀበለላሁ ሚና ወሚንኩም) - አላህ ከእኛም ከእናንተም ጾምና መልካም ስራዎችን ይቀበልልን።

👍2❤1

1.1K viewsedited 17:40

https://vm.tiktok.com/ZMB5R7YST/

EID MUBARAK

TikTok · Code Spark

32 likes, 4 comments. “#eid Mubarak”

1.08K views06:54

🎉 Big News, Ethio Coders! 🎉

Alhamdulillah! We’ve reached 3,000 subscribers! 🚀✨

A huge THANK YOU to every member of this amazing community. Your support, engagement, and passion for coding have made this possible! 🙌💻

This is just the beginning—more tutorials, projects, and coding resources are coming soon! Let’s continue growing and learning together.

Keep supporting Ethio Coders and invite your friends to join! 💡🔥

#EthioCoders #3KSubscribers #KeepCoding

👏3❤1👍1😁1

1.02K viewsedited 20:20

TEYPS OF CSS

CSS (Cascading Style Sheets) has three main types:

1. Inline CSS
Used inside an HTML tag.
Good for quick styling but not recommended for large projects.
Example:

<p style="color: red; font-size: 20px;">This is an inline CSS example.</p>

2. Internal CSS
Written inside the <style> tag in the HTML file.
Good for single-page styling but not reusable.

Example:

<html> <head> <style> p { color: blue; font-size: 25px; } </style> </head> <body> <p>This is an internal CSS example.</p> </body> </html>

3. External CSS
Written in a separate .css file and linked to the HTML file.
Best for large projects and reusable styles.

Example:

CSS file (style.css):
p { color: green; font-size: 30px; }

HTML file:

<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p>This is an external CSS example.</p> </body> </html>

Which One to Use?
Use external CSS for big projects.
Use internal CSS for a single-page website.
Use inline CSS only for quick fixes.

1.09K views13:32

TEYPS OF CSS CSS (Cascading Style Sheets) has three main types: 1. Inline CSS Used inside an HTML tag. Good for quick styling but not recommended for large projects. Example: <p style="color: red; font-size: 20px;">This is an inline CSS example.</p> 2.…

የ CSS አይነቶች

CSS (ካስኬዲንግ ስታይል ሺትስ) ሶስት ዋና ዋና አይነቶች አሉት።

በውስጥ መስመር CSS (Inline CSS)

💥በHTML መለያ ውስጥ የሚጻፍ ነው።
💥ለአፋጣኝ ቅጦች ጥሩ ነው፣ ግን ለትላልቅ ፕሮጀክቶች አይመከርም።

ምሳሌ፡

<p style="color: red; font-size: 20px;">ይህ የውስጥ መስመር CSS ምሳሌ ነው።</p>

ውስጣዊ CSS (Internal CSS)

💥በHTML ፋይል ውስጥ ባለው <style> መለያ ውስጥ የሚጻፍ ነው።

💥ለአንድ ገጽ ብቻ ጥሩ ነው፣ ግን እንደገና መጠቀም አይቻልም።

ምሳሌ፡

     <html>
<head>
<style>
p {
  color: blue;
  font-size: 25px;
}
</style>
</head>
<body>
<p>ይህ የውስጣዊ CSS ምሳሌ ነው።</p>
</body>
</html>

ውጫዊ CSS (External CSS)

💥በተለየ .css ፋይል ውስጥ የሚጻፍ እና ከHTML ፋይል ጋር የሚገናኝ ነው።

💥ለትላልቅ ፕሮጀክቶች እና እንደገና ጥቅም ላይ ለሚውሉ ቅጦች በጣም ጥሩ ነው።

ምሳሌ፡

የ CSS ፋይል (style.css):

p {
  color: green;
  font-size: 30px;
}

የ HTML ፋይል:

<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>ይህ የውጫዊ CSS ምሳሌ ነው።</p>
</body>
</html>

የትኛውን መጠቀም አለብን?

💥ለትላልቅ ፕሮጀክቶች ውጫዊ CSS ን ይጠቀሙ።
💥አንድ ገጽ ላለው ድር ጣቢያ ውስጣዊ CSS ን ይጠቀሙ።
💥በውስጥ መስመር CSS ን ለአፋጣኝ ለውጦች ብቻ ይጠቀሙ።

1.43K viewsedited 13:41

Css Syntax

CSS (Cascading Style Sheets) is used to style web pages.
👉ሲኤስኤስ (Cascading Style Sheets) የድረ-ገጾችን ገጽታ ለመቀየር ይጠቅማል።

The CSS syntax consists of three main parts:
👉የሲኤስኤስ አገባብ ሶስት ዋና ዋና ክፍሎች አሉት፡-

💥Selector → The HTML element you want to style.
👉መራጭ → ማስዋብ የምትፈልጉት የኤችቲኤምኤል ኤለመንት።

💥Property → The type of style you want to apply (e.g., color, font size).
👉ባህሪ → የምትጠቀሙበት የቅጥ አይነት (ለምሳሌ ቀለም፣ የፊደል መጠን)።

💥Value → The specific setting for the property.
👉እሴት → ለባህሪው የተወሰነው መቼት።
Example:-

p { color: red; font-size: 20px; }

Explanation:
ማብራሪያ፡-
💥p → Selector (targets all <p> tags in HTML).
👉p → መራጭ (በኤችቲኤምኤል ውስጥ ያሉትን ሁሉንም <p> ታጎች ያነጣጠራል።)

💥color → Property (sets the text color).
👉color → ባህሪ (የጽሑፉን ቀለም ይወስናል።)

💥red → Value (text color will be red).
👉red → እሴት (የጽሑፉ ቀለም ቀይ ይሆናል።)

💥font-size → Property (sets the size of the text).
👉font-size → ባህሪ (የጽሑፉን መጠን ይወስናል።)

💥20px → Value (text size will be 20 pixels).
👉20px → እሴት (የጽሑፉ መጠን 20 ፒክስል ይሆናል።)

💥Each style rule is written inside curly braces {}, and every property-value pair ends with a semicolon ;.

👉እያንዳንዱ የቅጥ አገዛዝ በሁለት የተጠማዘዙ ማዕቀፎች {} ውስጥ የተጻፈ ሲሆን እያንዳንዱ የባህሪ-እሴት ጥንድ በሰሚኮሎን ; ያበቃል።

❤2👍2

1.37K views04:07

Hey Ethio Coders Subscribers,

Learning HTML, CSS, and JavaScript is the key to unlocking the world of web development! 🌍 Whether you have a laptop or just a phone, you can start coding today!

✅ Laptop Users – Use VS Code or any text editor to write and test your code.
✅ Phone Users – Download the SPCK Code Editor and turn your phone into a powerful coding tool!

💡 Why Learn HTML, CSS & JS?
🔹 Create stunning websites 🌐
🔹 Build amazing user interfaces 🎨
🔹 Develop interactive and dynamic web apps ⚡
🔹 Start freelancing or get a tech job 💼

🎯 No Excuses! Start Small & Stay Consistent.
📢 "The best programmers are not the ones with expensive devices, but those with dedication and practice!"

📌 📖 Table of Content: Click here to access structured learning materials.

Join us, ask questions, and let's build amazing projects together! 🚀🔥

#EthioCoders #LearnToCode #HTML #CSS #JavaScript

👍5

1.6K views11:07

Main CSS Selectors

CSS selectors are patterns used to select and style HTML elements. Below are the main types of CSS selectors, along with their explanations and examples:

1. Universal Selector (*)

The universal selector selects all elements on a webpage.

It is used when we want to apply styles to every element.

Example:

* {
  color: red;
}

This will make all the text in the document red.

2. Element (Type) Selector

The element selector applies styles to all instances of a particular HTML tag.

It is useful when styling headings, paragraphs, or divs.

Example:

p {
  font-size: 18px;
}

This will make all <p> elements have a font size of 18px.

3. Class Selector (.)

The class selector is used to select elements with a specific class.

It allows multiple elements to share the same styles.

Example:

.highlight {
  background-color: yellow;
}

Any element with class="highlight" will have a yellow background.

4. ID Selector (#)

The ID selector targets a single, unique element with a specific ID.

Each ID should be used only once per page.

Example:

#title {
  text-align: center;
}

The element with id="title" will have centered text.

1.29K views11:25

👍7

1.5K views11:26

This media is not supported in your browser

VIEW IN TELEGRAM

Inline and internal css from Udacity

👍6

1.31K viewsedited 11:38

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up Page</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        }

        .signup-container {
            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

        .signup-container h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 28px;
        }

        .input-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .input-group label {
            display: block;
            color: #555;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .input-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .input-group input:focus {
            outline: none;
            border-color: #ff6b6b;
        }

        button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .signup-container p {
            margin-top: 20px;
            color: #555;
            font-size: 14px;
        }

        .signup-container a {
            color: #ff6b6b;
            text-decoration: none;
            font-weight: bold;
        }

        .signup-container a:hover {
            text-decoration: underline;
        }

        @media (max-width: 480px) {
            .signup-container {
                padding: 20px;
                margin: 20px;
            }
        }
        </style>
</head>
<body>
    <div class="signup-container">
        <h2  class="sin">Ethio coder</h2>
        <form>
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" required>
            </div>
            
            <div class="input-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="Enter your email" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Enter your password" required>
            </div>
            <button type="submit">Sign Up</button>
        </form>
        <p>Already have an account? <a href="#" onclick="display()">Log in</a></p>
    </div>
    
    <script >
     var sinUp=document.querySelector('.sin');
     function display(){
      alert('Please first Sign up then you can login ')
     }
    </script>
</body>
</html>

👍7❤1

1.66K viewsedited 08:27

What is a CSS comment?

A CSS comment is a note you write inside your CSS code. It is not shown on the website and does not affect how the page looks.

You use it to:

👉Explain what your code does

👉Leave reminders for yourself or others

How to write a CSS comment:

💥You start with /* and end with */.

👉Example:

/* This is a comment */ 

body {   background-color: lightblue; 

/* This sets the background color */ 
}

Important:

💥CSS comments can be on a line by themselves or next to code.

💥The browser ignores anything inside /* ... */.

1.31K views02:49