Code Spark

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

Watch by pressing the following link👇👇👇

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

Betelay jemari kehonachu 👆👆👆👆

👍2

1.32K viewsedited 20:30

Code Spark

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

Code Spark

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

Code Spark

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

Code Spark

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

Code Spark

1.27K views07:24

Code Spark

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

Code Spark

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..

Coding Era

👍4

1.85K views09:32

Code Spark

👍3❤2

1.73K viewsedited 18:26

Code Spark

🎉 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

Code Spark

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

Code Spark

1. What does CSS stand for?

Anonymous Quiz

15%

Creative Style Sheets

59%

Cascading Style Sheets

18%

Computer Style Syntax

Colorful Style System

116 voters1.44K views07:17

Code Spark

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

Anonymous Quiz

13%

Styling (colors, fonts)

17%

Layout management (Flexbox, Grid)

60%

Database connectivity

11%

Responsiveness (adapting to screen sizes)

103 voters1.52K views07:20

Code Spark

3. What is the main purpose of CSS?

Anonymous Quiz

14%

To define the structure of a webpage

63%

To style and design web pages

15%

To add interactivity to websites

To store user data

100 voters1.53K views07:23

Code Spark

4. Which type of CSS is best suited for large projects?

Anonymous Quiz

111 voters1.57K views07:25

Code Spark

5. What is the correct syntax for a CSS rule?

Anonymous Quiz

39%

selector { property: value; }

26%

selector (property = value)

21%

property { selector: value; }

13%

value { selector: property; }

👍3

112 voters1.49K views07:28

Code Spark

Title: "Mr. HTML and the CSS Fashion Show"

One day, Mr. HTML woke up and looked in the mirror.

He said, “Oh no! I look so ugly! Just plain text, no color, no style!”
He went outside and saw his friend Mr. CSS,
who was very cool
wearing sunglasses and colorful clothes.

Mr. HTML said, “Bro, help me! I look like a potato!”

Mr. CSS laughed and said, “Don’t worry, I’ll style you up!”

So Mr. CSS took out his magic pen and wrote:

h1 { color: red; 
font-size: 40px; 
background-color: yellow;
text-align: center; 
border: 2px dashed green;
 }

Suddenly, Mr. HTML turned into a fashion model! He had red letters, yellow background, green border — even the birds said, “Wow!”
He walked around showing off, saying, “Call me Mr. Stylish now!”

But then his little brother, JavaScript, came and clicked a button...
Poof!
Mr. HTML’s style was gone!

He shouted, “Hey! Bring back my CSS clothes!”
JavaScript said, “Oops, my bad! I pressed the wrong button!”

From that day, Mr. HTML always said:
"Without CSS, I am just a naked tag!"

👏2🤩2👍1

1.58K viewsedited 23:16

Code Spark

Responsive header

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  
    
    <style>
       *{
margin: 0;
padding: 0;
}

nav{
background: #E9E6DE;
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo{
font-size: 30px;
font-weight: bold;
}
.nav-link a{
margin-left: 30px;
font-size: 20px;
font-weight: bold;
text-decoration: none;
color: #524E4E;
}
.show-btn ,.hide-btn{
display: none;
font-size: 40px;
}
.hide-btn{
color: #FFFFFF;
position: absolute;
top: 0;
left: 6px;

}

@media (max-width: 800px) {
.show-btn ,.hide-btn{
display: block;
}
nav {
  padding: 15px;
  
  
}
.nav-link{
  display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: -200px;
padding: 40px;
background: #392C2C;
height: 100vh;
text-align: left;
transition: 1s;

}
.nav-link a{
  color: #FFFFFF;
  margin-bottom: 40px;
  text-align: left;
  
}
} 
        
    </style>
    
    
    
    
    
</head>
<body>
<section class="header">
    <nav>
        <div class="logo">
            Ethio<span style="color: red;">Coder</span>
        </div>
        
        <div class="nav-link" >
            <div class="hide-btn" onclick="hide_btn()">&times;</div>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Service</a>
            <a href="#">Contact</a>
        </div>
        <div class="show-btn" onclick="show_btn()">&#9776</div>
    </nav>
</section>
    
  <script>
      let nav_link=document.querySelector('.nav-link');
      
      
      function show_btn(){
          nav_link.style.right='0px';
      }
      function hide_btn() {
    nav_link.style.right = '-200px';
}
  </script>  
</body>
</html>

👍4👏2

2.16K viewsedited 20:13

Code Spark

👍5❤1👏1

2.03K views11:58

Code Spark

🎉 Big News, Ethio Coders! 🎉

Alhamdulillah! We’ve reached 6k 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! 👇💡🔥

https://t.me/Muju_man_coding

#EthioCoders #6KSubscribers #KeepCoding

👍6💯1

1.94K viewsedited 03:13

Code Spark

✨ Hey everyone! ✨

Do you have any suggestions or questions about Ethio Coders? Drop them in the comments below! 👇 or https://t.me/muju_man

We’d love to hear your thoughts, ideas, or feedback. Let’s grow together! 🚀

Code Spark Group

Website for about us
https://mujuman.github.io/Ethio-coders/

❤1👍1

2.19K views20:35

About

Blog

Apps

Platform