/ሙላት

Published

- 2 min read

ፕሮግራሚንግ 101 - ዌብ

ሳይንስኢንጂነሪንግፕሮግራንሚግ
img of ፕሮግራሚንግ 101 - ዌብ

/የእርስዎን ኮድ ጉዞ ለመጀመር ዝግጁ ነዎት? በ Repl.it (https://replit.com) ላይ በHTML፣ CSS እና JS ይጀምሩ

/ዲጂታል ዓለሞችን ለመፍጠር ኮድ ማድረግ 

/ይህ በ /አደስ ብሎግ ላይ የመጀመሪያው ኮንዲግ ብሎግ ውነ. 102, 103, እያልን እንቀጥላለን.

/በድረ-ገጾች አድማም ተማርከዋል? የራስዎን ዲጂታል ድንቅ ስራዎች ለመፍጠር ጓጉተዋል? ኮድ ማድደግ ይማሩ. በ HTML፣ CSS እና JavaScript ይጀምሩ. እነዚህ ሶስት ቋንቋዎች ድረ-ገጾችን ለመስራት አስፈላጊ የግንባታ ብሎኮች ናችው. እነዚህን ቋንቋዎች መማር ወደ ኮዲንግ አለም ለመግቢያ በሮች ናቸው.  Repl.it  ላይ ፕራክቲስ ያርጉ. 

/ወደ ድረ-ገጾች መስራት ዘልቆ መግባት

HTML (HyperText Markup Language)፡ የማንኛውም ድረ-ገጽ መዋቅራዊ የጀርባ አጥንት ነው. HTML ይዘቱን እና አቀማመጥን የሚገልፀው ታጎችን (html tags) በመጠቀም ነው።

/የ HTML ኮድ ምሳሌ፡-

<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>

<body>
  <h1>Welcome to My Page!</h1>
  <p>This is a paragraph of text.</p>
  <img src="image.jpg" alt="A descriptive image">
  <ul>
      <li>Item 1</li>
      <li>Item 2</li>
  </ul>
</body>

</html>

CSS (Cascading Style Sheets)፡- የድረ-ገጹን መልክ እና ስሜት የሚያስተካክል ነው. CSS ቀለሞችን፣ ቅርጸ-ቁምፊዎችን፣ ክፍተቶችን እና የነገሮችን አቀማመጥ ይቆጣጠራል።

/የሲኤስኤስ ኮድ ምሳሌ፡-

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  margin-top: 10px;
  line-height: 1.5;
}

/ጃቫስክሪፕት (JS)፡- በድረ-ገጾች ላይ ዳይናሚክ ወይም ተለዋዋጭ የሆኑ ነገሮችን ይቆጣጠራል. ጃቫ ስክሪፕት አክሽኖችን ይፈጥራል፣ ለተጠቃሚ ምላሽ ይሰጣል እና ተለዋዋጭ የይዘት ማሻሻያዎችን ያደርጋል።

/የጃቫስክሪፕት ኮድ ምሳሌ፡-

function greet() {
  alert("Hello, world!");
}
button.addEventListener("click", greet);

Repl.it፡ ኦንላይን ላይ ለመሞከር እና ለመማር የጠቀሙ. ሁሉንም ቋንቋ መማር ቢችሃልም፣ በ ዌብ ፕሮግራሚንግ መጀመር ጥሩ ይመስለና. ነጻ መለያ ይፍጠሩ፡ በ repl.it ላይ ይመዝገቡ እና ወደ ኮድ ማድረግ አለም ይግቡ።

/ለመሞከሪያ፡

አዲስ Repl ጀምር፡ አዲስ የኮድ አካባቢ ለመፍጠር “HTML፣ CSS፣ JS” ን ይምረጡ።

ኮድዎን ይፃፉ፡ በ HTML፣ CSS እና በJS በቀረቡት ውስጥ ይሞክሩ።

ውጤቶችን አሂድ እና ተመልከት፡ ወዲያውኑ የኮድህን ውጤቶች በ console (በጎን ማሳያ) ውስጥ ተመልከት።

ያካፍሉ እና ይተባበሩ፡ መልሶችዎን ለሌሎች ያካፍሉ ወይም በቅጽበት ይተባበሩ።

  1. Create a Free Account: Sign up at repl.it and dive into the world of coding.
  2. Start a New Repl: Choose “HTML, CSS, JS” to create a new coding environment.
  3. Write Your Code: Experiment with HTML, CSS, and JS in the provided editors.
  4. Run and See Results: Instantly view the results of your code in the browser preview.
  5. Share and Collaborate: Share your repls with others or collaborate in real-time.

/ከላይ የታዩትን ኮድ (HTML and CSS) ኮፒ ፔስት በማድረግ ይሞክሩት.  ጃቫስክሪፕቱን ሌላ ግዜ እንመጣመታለን.

/የመማር ጀብድን ተቀበሉ

/ስህተት ለመስራት አትፍሩ - እነሱ የመማር ሂደት አካል ናቸው። ተግዳሮቶችን ተቀበል፣ ጉጉትን ተቀበል፣ እና ከሁሉም በላይ፣ የመፍጠርን ደስታ ተቀበል። እንኳን ወደ አጓጊው የኮዲንግ ዓለም በደህና መጡ!

/ይህ ቪዲዮ Repl.it እንዴት እንደሚጀመር እና ዌብ ኮዲንግ ለመጀመር ይረዳል.