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

Next week we will start css

be ready 💻

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!

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) በመጠቀም ቅጦችን ለብዙ ገጾች እንዲተገበሩ ያስችላል::

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

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

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


EID MUBARAK

🎉 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

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.

የ 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 ን ለአፋጣኝ ለውጦች ብቻ ይጠቀሙ።

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

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

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

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.

Inline and internal css from Udacity