Types of web development 🔶🔶


Web development በሁለት ይከፈላል✌️✌️

1.Front end development and
2.Back end development

Front end development is everything users see and interact with.

ተጠቃሚው ሊያየው የሚችለው የዌብሳይት ክፍል ነው👀

Examples፦buttons,text,image,navigation menu,form,table etc...

Back end development is everything users cannot see.ይሄኛው ክፍል ደሞ ተጠቃሚው ማየት አይችልም process ሱ በውስጥ(በserveru) ነው ሚካሄደው👌👌

Examples፦recieve request,process information,connect to db,check username and password etc...


እስኪ ሁለቱን type በ analogy ላስረዳችሁ

🍽️ Restaurant(ምግብ ቤት) እንደ example እንውሰድ

ምግብ ቤት ስትገቡ ምን ምን ይታያችኋል ?🤔
ወንበሩ,አስተናጋጅ,የምግብ ሜኑ,ምግቡ😍 customer ብቻ ምን ልበላቹ ፊት ለፊት የሚታያችሁ ነገር ልክ እንደ frontend አስቡት

በአንጻሩ ደግሞ chiefun(ምግብ ሰሪዎች),ingredients የሚቀመጡበት ቦታ,ድስቱ 😂, ብቻ ምን ልበላቹ ከበስተጀርባ ያሉት በሙሉ ልክ እንደ backend አስቧቸው
ገባችሁ አይደል🙌 ጎበዞች እንቀጥል🕺💃


ስለዚህ እነዚህን ሁለቱን አንድ ላይ የተማረ ሰው full stack developer መሆን ይችላል።
ደሞ በአብዛኛው ቦታ ላይ የመቀጠር እድል ያለው full stack developer የሆነው ነው🙌


በቀጣይ part ደግሞ front end and back end development roadmap አብረን እናያለን

የተለመደችዋን❤❤

Front end developmentn መጀመሪያ ተምረን ወደ back end የምንሄድ ይሆናል

ስለዚህ ቀጣይ ሳምንት እንጀምራለን ባልነው መሰረት ነጌ ከfront end course basic የሆነውን html እንጀምራለን 🙌🙌

ሙሉ የ frontend roadmap ከላይ ካያያዝኩላችሁ ምስሉ ላይ ታገኙታላችሁ


frame work ,vision control የሚሉት concept ግር እንዳይላችሁ አብረን ወደፊት እናየዋለን 👌👌




ደሞ ምንድነው መቀዝቀዝ share አድርጉታ ሁሉ ነገር free ነው በዛላይ ደግሞ postun የሚያየው እና reaction የሚሰጠው ሰው😭😭አታስከፉኛ

ለማንኛውም ነገ እንጀምራለን እስከ ዛ ድረስ መልካም ጊዜ😍😍😍😍



Any question ካላቹ comment ላይ መጠየቅ ይቻላል 🙌🙌

@AbWebDeveloper

ሰላም ቤተሰቦች!  በባለፈው ፖስታችን ላይ ስለ  Full Stack Developer  ካወራን በኋላ፣ ብዙዎቻችሁ "ኮምፒውተር የለኝም፣ በስልክ መማር እችላለሁ?" ብላችሁ ልጠይቁ ትችላላችሁ።
መልሱ፡ አዎ፣ 100% ትችላላችሁ! ዋናው ነገር የእናንተ ፍላጎት ነው ። በዚህ 3 ወር ውስጥ ከዜሮ ተነስተን ለመጀመር የሚያስፈልጉንን መሳሪያዎች ለሁለታችሁም ከፋፍለን እንያቸው፦
💻 1. በኮምፒውተር (PC) ለምትማሩ፡
ኮምፒውተር ላይ ኮድ ለመጻፍ እና ውጤቱን ለማየት 2 ቀላል ነገሮች  ፦
VS Code (Visual Studio Code)፦ ይሄ ኮድ የምንጽፍበት ዋናው  (Code Editor) ነው። በጣም ቀላል፣ ነፃ እና በአለም ላይ ያሉ ትልልቅ ዴቨሎፐሮች እና እኔም የምጠቀምበት ምርጥ ሶፍትዌር ነው።
Google Chrome Browser፦ የጻፍነውን ኮድ ወደ ዌብሳይት ቀይሮ ውጤቱን የሚያሳየን ነው።
እነዚ ለመጀመር በቂ ሲሆኑ እየጨመርን የምንሄድ ይሆናል::

📱 2. በስልክ (Mobile) ለምትማሩ፦
በ ስልክ ብቻ  ልክ እንደ ኮምፒውተር  ኮድ መጻፍ እና የሰራችሁትን ዌብሳይት ማየት የሚያስችሏችሁ   አፕሊኬሽኖች (Play Store ወይም App Store ላይ አሉ)፦

Acode (Recommend.)፦ ልክ እንደ ፒሲው VS Code በጣም ዘመናዊ የሆነ እና የጻፋችሁትን HTML ኮድ እዛው ስልካችሁ ላይ ዌብሳይት አድርጎ የሚያሳያችሁ ምርጥ አፕ ነው።
  Trebedit፦ ይሄም ለጀማሪዎች በጣም ቀላል እና ምቹ የሆነ ሌላኛው የHTML/CSS መጻፊያ አፕ ነው።
የፈለጋችሁትን መጠቀም ትችላላቹ!

በ ስልክ የምትጠቀሙ  ልጆች አፖቹን አውርዳችሁ "እንዴት ነው ስልክ ላይ ኮድ የሚጻፈው?" ብላችሁ ግራ እንዳይገባችሁ! በቀጣይ ፖስት በፒሲም ሆነ በስልክ መጀመሪያ የምትጽፋትን የመጀመሪያዋን ኮድ  ደረጃ በደረጃ በተግባር አሳያችኋለሁ።

ሁላችሁም እንደየምርጫችሁ (VS Code ወይም Acode)  አውርዳችሁ ዝግጁ ሁኑ፡፡

አብረን እንማር፣ አብረን እንደግ !🔥


@AbWebDeveloper

ይሄ ከላይ ያለው የ app ተጠቃሚዎችን የሚመለከት ነው በ pc ሊሰራላችሁ ምትፈልጉ ከሆነ comment ላይ እንፈልጋለን ብላቹ ጻፉ



ከተመቻቹ የተለመደችዋን ❤❤

@AbWebDeveloper

ከጨረሳቹ comment lay screenshot አስከምጡልኝ ከዛ እንቀጥላለን




Good day🙌

@AbWebDeveloper

Day 1 ☝️☝️☝️

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Website</title>
</head>
<body>

<h1>Web Development Courses</h1>

  <h2>About Me</h2>
  <p>My name is Amare Sad,and I am learning html and css.</p>

  <h2>My Skills</h2>
  <h3>HTML</h3>
  <p>Now, I am learning this course.</p>
  <h3>CSS</h3>
  <p>For future,I will learn this course.</p>
</body>
</html>

የመጣላችሁን output comment ላይ አስቀምጡልኝ explanation ከታች ታገኛላችሁ ግር ካላችሁም comment ላይ ጠይቁን

@AbWebDeveloper

Example Explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document

The <html> element is the root element of an HTML page

The <head> element contains meta information about the HTML page

The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

The meta view part tells the browser size of the page display correctly on different screen size💻 🤳 .

The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

The <h1> to <h6> element defines a heading from large to small

<h1> is the largest heading
<h6> is the smallest heading

The <p> element defines a paragraph

💻 Day 2: HTML Basics ✌️✌️


👋 Hello everyone! Welcome back to Day 2 of our HTML journey.

First let's define what HTML is?

HTML stands for Hyper Text Markup Language.

Hyper= means a link that used to connect one website to another website.

Text =means as u know it's any text that display on the screen.

Markup Language =means a language that tells to understand the browser this is title,img,heading and etc..

💡 Think about this: HTML is like the skeleton of a human body. It gives structure to a website.

#HTML Element

HTML Element is everything from opening tag(<) to closing tag(>), including the content between them.

Structure of an HTML Element is👇

<tagname>Content </tagname>

👉Most HTML Elements have opening and closing tag.

👉Some HTML Elements are Empty(void). ✌️They don't have content.
such as👇👇
<br>,<hr>,<img>,<input>,<meta>,<link> etc...

Nested Elements👉👉Elements can contain other html element.
Example:

<p> I like to learn🥰 <strong>HTML</strong></p>

Another Example

         <h1>Welcome </h1>
         <p>Hello Everyone🖐</p>
    </div>

Welcome
Hello Everyone🖐
💡 Remember: A website is built by putting HTML elements inside other elements.

Types of HTML Elements

➀ Block Elements

👉 starts on a new line and takes the full available width.
Examples 👇👇

<div>, <p>, <h1> to <h6>, <section>, <article>, <header>, <footer>, <nav>, <main>, <form>, etc...

📌For now just know the names only for future we'll see them one by one.

➁ Inline Elements

👉 stay on the same line.
👉Don't start on a new line.
Examples👇👇

<strong>, <span>, <a>, <img>, <label>, <input>, <em> etc..

➂ Semantic Elements

👉👉 describe the meaning of their content, making page easier to understand for developers, browsers, and search engines.
Examples👇👇

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer> etc...

⓸ Non-Semantic Elements

👉👉 They don't describe what they contains.
👉They are useful for layout and styling, but do not tell u the purpose of the content.
Examples 👇👇

<div>, <span>


Important Note ⭐

HTML Elements are not case sensitive.

<H1> Content </H1> and <h1> content </h1> are the same, but Most professional developers 👩‍💻👨‍💻 always use lowercase.
Why?

Because lowercase makes code cleaner and follows professional coding standards.

🎯 Day 2 Practice
Before moving to Day 3, answer these questions :
1️⃣ What is an HTML Element?
2️⃣ What is the difference between Block and Inline elements?
3️⃣ Give 3 examples of Semantic Elements.
4️⃣ Is <br> a void element or not?
Write your answers in the comments ❤️

Next day we'll see HTML Attributes 🚀

If you like it, give this a reaction. ❤️

@AbWebDeveloper