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

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

በቀላል አማርኛ ላስረዳህ፤ የ CSS ኮመንት ማለት በ CSS ኮድህ ውስጥ የምትጽፈው ማስታወሻ/ማብራሪያ ማለት ነው።

ይሄ ማስታወሻ/comment በድረ ገጹ ላይ አይታይም፤ የድረ ገጹን ገጽታም ምንም አይቀይርም።

ለምን እንጠቀመዋለን ካልከኝ፡-
👉ኮዱ ምን እንደሚሰራ ለማስረዳት
👉ለራስህ ወይም ለሌሎች ማስታወሻ ለመተው

እንዴት እንጽፋለን ካልከኝ ደግሞ፡-
💥በ /* ምልክት ትጀምራለህ በ */ ምልክት ደግሞ ትጨርሳለህ።

ምሳሌ ፡-

/* ይሄ ኮመንት ነው */
body {
  background-color: lightblue; 

/* ይሄ background color/ቀለም ያስቀምጣል */
}

💥ዋናው ነገር ይሄ ነው፤ ኮመንት በኮድህ ውስጥ የምትጽፈው ነገር ሲሆን የድረ ገጹን አሰራር ምንም አይነካም። በአንተና በሌሎች ኮዱን በሚያዩ ሰዎች መካከል እንደ መግባቢያ እንጠቀመዋለን።

💥ድረ ገጹ /websitu ኮዱን በሚያነብ

👍3

1.46K viewsedited 02:49

ስለ coding የሰገረሙኝ ነገሮች

Watch by pressing the following link👇👇👇

https://t.me/+1F-gkmYE38w0OTA0

Betelay jemari kehonachu 👆👆👆👆

👍2

1.32K viewsedited 20:30

Forwarded from Coding Era

To be successful person

You can be successful. Just don’t give up.

Work a little every day.

Believe in yourself.

Learn from your mistakes.

Stay strong, even when life is hard.

Keep dreaming big.

Be kind and honest.

Never stop learning.

Step by step, you will reach your goal. Success takes time, but you can do it!

Join:https://t.me/+1F-gkmYE38w0OTA0

👍5🔥1

1.52K views00:13

Introduction to JavaScript (JS)

What is JavaScript?

JavaScript (JS) is a programming language used to make websites interactive.

It works with HTML and CSS.

JavaScript runs in the browser (like Chrome, Firefox).

Why Use JavaScript?

Read More👇

👍10👏3❤2

1.59K viewsedited 10:22

Main Uses of JavaScript

1. Web Development (Frontend)

JS makes websites interactive and dynamic.

Show/hide elements

Validate forms

Handle user actions (click, scroll, etc.)

Change content without reloading the page

Example: Clicking a button to display a message

2. Web Development (Backend)

With Node.js, JS can also run on the server:

Handle requests and responses

Connect to databases

Build APIs

Power full-stack apps

Example: Chat applications like WhatsApp Web

3. Mobile App Development

JS is used to build mobile apps using:
Read More 👇

❤2🔥2👍1

1.78K viewsedited 17:41

Forwarded from Birhan Nega

ቀላል ትምህርት የትኛው ነው ብላችሁ አትማሩ። በቀላሉ ወደ ስራ የሚያስገባን ብላችሁም አታስቡ። if you want to succeeded, get ready for the challenge, you have to pay what it takes to achieve the goal.

ብዙ ተማሪዎች ኢንጀነሪንግ መማር እፈልጋለሁ ግን Mathematics ከባድ ነው ስለዚህ ሶሻል መግባት አለብኝ ሲሉ ይሰማል።

ታግሎ ጥብስ መብላት እየተቻለ ድካምሽምን ለመሸሽ ራስን በበሶ መሸንገል ተገቢ አይደለም።

1.34K views03:10

1.27K views07:24

What is CSS Color?

In CSS, color is used to set the color of text, backgrounds, borders, and more.
It makes websites look beautiful and easy to read.

Where Do We Use Color?
💥Text color
💥Background color
💥Border color

Example:

p { color: blue; /* text will be blue */ } 

div { background-color: yellow; /* background will be yellow */ }

How Can We Write Colors in CSS?
There are different ways to write colors:

1.Color names

Simple English names.

Example: red, blue, green, yellow.

h1 { color: red; }

2.Hex codes

A special code that starts with #.

Example: #ff0000 (red), #00ff00 (green).

h1 { color: #ff0000; }

3.RGB (Red, Green, Blue)

You write how much red, green, and blue you want (0 to 255).

Example:

h1 { color: rgb(255, 0, 0); /* red */ }

4.RGBA (RGB + Alpha)

Same as RGB, but you can add opacity (transparency).
Example:

h1 { color: rgba(255, 0, 0, 0.5); /* half transparent red */ }

Summary:
👉Color names are easy to remember.

👉Hex codes and RGB give you more control.

👉RGBA adds transparency.

If you want Amharic voice explanation

Here is the link👉https://t.me/besmart123go/23

❤4👍1

2.11K viewsedited 08:53

A 21-day project plan to help you build your web development skills using HTML and CSS.

These projects will gradually increase in complexity, helping you gain hands-on experience. Remember, practice is key to becoming a proficient web developer.

Week 1 - Basic Projects:

Day 1 - Personal W....Read More..

A 21-day project plan to help you build your web development skills using HTML and CSS.

These projects will gradually increase in complexity, helping you gain hands-on experience. Remember, practice is key to becoming a proficient web developer.

Week 1…

👍4

1.85K views09:32

Css Tutorials

1.Introduction to css

https://t.me/Muju_man_coding/639

2. Why use css

https://t.me/Muju_man_coding/651

3. Types of css

https://t.me/Muju_man_coding/664

4. Css syntax

https://t.me/Muju_man_coding/683

5. The main css selectors

https://t.me/Muju_man_coding/699

6. Udacity video

https://t.me/Muju_man_coding/708

7. Login page(example)

https://t.me/Muju_man_coding/711

8. What is Css comment

https://t.me/Muju_man_coding/711

9. What is css color

https://t.me/Muju_man_coding/767

10.CSS Background

https://t.me/Muju_man_coding/810

👍3❤2

1.73K viewsedited 18:26

🎉 Big News, Ethio Coders! 🎉

Alhamdulillah! We’ve reached 5k 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 #5KSubscribers #KeepCoding

👏3❤1

1.45K viewsedited 06:26

1. What is CSS Background?

The CSS background properties are used to style the background of an HTML element.

This includes:-
💥Background color
💥Background image
💥Image repeat behavior
💥Positioning and size
💥Attachment behavior

You can use each background property separately

2. CSS Background Properties

A. background-color

Sets the color behind the content of an element.

Accepts color names, hex codes, rgb/rgba, or hsl/hsla.

Example:

div { 
background-color: #f0f0f0; 
}

B. background-image
Sets an image as the background.

Use url("path-to-image") to load the image.

If the image is smaller than the element, it repeats by default.

Example:

body { background-image: url("bg.jpg"); 
}

C. background-repeat

Controls how a background image is repeated.

Values:
repeat (default) — repeats in both directions

no-repeat — shows once

repeat-x — repeats horizontally

repeat-y — repeats vertically

Example:

div {
background-image: url("bg.png"); background-repeat: no-repeat; 
}

D. background-position

Sets the starting position of the background image.

You can use:

Keywords: left, center, right, top, bottom

Percentages or pixels: 50% 20px

Example:

div { 
background-position: center top; 
}

E. background-size
Defines the size of the background image.

Values:
cover: fills the element, image may be cropped

contain: fits entire image, keeps aspect ratio

auto: default size

width height: e.g., 100px 200px

Example:

div { background-size: cover; 
}

F. background-attachment

Determines whether the background image scrolls with the content or stays fixed.

Values:
scroll (default) — image moves with content

fixed — image stays in place when scrolling

local — scrolls with the element’s content

Example:

body { background-attachment: fixed; 
}

👍3❤1

1.6K views18:11

1. What does CSS stand for?

Anonymous Quiz

Creative Style Sheets

Cascading Style Sheets

Computer Style Syntax

Colorful Style System

116 voters1.44K views07:17

2. Which of the following is NOT a key feature of CSS?

Anonymous Quiz

Styling (colors, fonts)

Layout management (Flexbox, Grid)

Database connectivity

Responsiveness (adapting to screen sizes)

103 voters1.52K views07:20