KOZI KAMILI YA WEB DEVELOPMENT TUTORIAL 1
LEVEL 1: Vitu vya muhimu kabisa
Somo 1: Website ni nini?
Website ni mkusanyiko wa kurasa zinazofunguliwa kwenye browser kama Chrome.
Mfano:
https://faulink.com
Website hutengenezwa kwa vitu vikuu 3:
HTML — hujenga mwili wa website
CSS — huifanya website iwe nzuri
JavaScript — huifanya website iwe na vitendo/interactivity
Baadaye tutajifunza:
PHP — backend/server side
MySQL — database
Laravel — framework ya PHP
LEVEL 2: Programu za Kufunga
Funga hizi kwenye computer yako:
VS Code — kuandika code
Google Chrome — kuangalia website
XAMPP — kutumia PHP na MySQL
Git — kuhifadhi history ya code
LEVEL 3: HTML — Mwanzo
Somo 2: HTML ni nini?
HTML maana yake ni HyperText Markup Language.
HTML hutumika kuweka:
Maandishi
Picha
Link
Button
Form
Table
Video
Somo 3: Tengeneza file la kwanza
Tengeneza folder kwenye Desktop:
web-course
Ndani yake tengeneza file:
index.html
Andika code hii:
<!DOCTYPE html>
<html>
<head>
<title>Website Yangu ya Kwanza</title>
</head>
<body>
<h1>Karibu kwenye Website Yangu</h1>
<p>Ninajifunza Web Development kuanzia mwanzo.</p>
</body>
</html>
Kisha fungua file hilo kwa browser.
Maelezo ya Code
<!DOCTYPE html>
Hii inaambia browser kuwa tunatumia HTML5.
<html>
Hapa ndipo website yote inaanzia.
<head>
Hapa tunaweka taarifa za website kama title.
<title>
Hii huonekana juu kwenye browser tab.
<body>
Hapa ndipo vitu vinavyoonekana kwenye website vinawekwa.
<h1>
Hii ni heading kubwa.
<p>
Hii ni paragraph.
LEVEL 4: HTML Muhimu
Somo 4: Headings
HTML ina headings kuanzia h1 mpaka h6.
<h1>Heading Kubwa Sana</h1>
<h2>Heading Kubwa</h2>
<h3>Heading ya Kati</h3>
<h4>Heading Ndogo</h4>
<h5>Heading Ndogo Zaidi</h5>
<h6>Heading Ndogo Sana</h6>
Somo 5: Paragraph na Line Break
<p>Hii ni paragraph ya kwanza.</p>
<p>Hii ni paragraph ya pili.</p>
<p>Jina langu ni Faustine.<br>Ninajifunza Web Development.</p>
<br> huvunja mstari.
Somo 6: Links
<a href="https://faulink.com">Tembelea Faulink</a>
Link kufunguka tab mpya:
<a href="https://faulink.com" target="_blank">Fungua Faulink</a>
Somo 7: Images
Weka picha ndani ya folder lako, mfano:
logo.png
Kisha andika:
<img src="logo.png" alt="Logo ya website" width="200">
Somo 8: Lists
Ordered list
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Unordered list
<ul>
<li>PHP</li>
<li>MySQL</li>
<li>Laravel</li>
</ul>
Somo 9: Tables
<table border="1">
<tr>
<th>Jina</th>
<th>Somo</th>
<th>Alama</th>
</tr>
<tr>
<td>Juma</td>
<td>HTML</td>
<td>90</td>
</tr>
</table>
Somo 10: Forms
<form>
<label>Jina:</label><br>
<input type="text" name="jina"><br><br>
<label>Email:</label><br>
<input type="email" name="email"><br><br>
<label>Password:</label><br>
<input type="password" name="password"><br><br>
<button type="submit">Tuma</button>
</form>
PROJECT 1: Tengeneza Personal Website
Tengeneza file index.html, kisha weka code hii:
<!DOCTYPE html>
<html>
<head>
<title>Personal Website</title>
</head>
<body>
<h1>Karibu kwenye Website Yangu</h1>
<h2>Kuhusu Mimi</h2>
<p>Mimi ni mwanafunzi wa Web Development. Ninajifunza HTML, CSS, JavaScript, PHP na MySQL.</p>
<h2>Ujuzi Ninaojifunza</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>MySQL</li>
</ul>
<h2>Website Ninayoipenda</h2>
<a href="https://faulink.com" target="_blank">Tembelea Faulink</a>
<h2>Wasiliana Nami</h2>
<form>
<label>Jina:</label><br>
<input type="text"><br><br>
<label>Ujumbe:</label><br>
<textarea></textarea><br><br>
<button type="submit">Tuma Ujumbe</button>
</form>
</body>
</html>
Ratiba ya Kozi
Week 1: HTML
Utasoma:
Structure ya HTML
Text
Links
Images
Lists
Tables
Forms
Week 2: CSS
Utasoma:
Colors
Fonts
Margin
Padding
Borders
Flexbox
Responsive Design
Week 3: Bootstrap
Utasoma:
Navbar
Cards
Buttons
Forms
Tables
Footer
Week 4–6: JavaScript
Utasoma:
Variables
If statement
Loops
Functions
DOM
Events
Form validation
Week 7–10: PHP
Utasoma:
Variables
Forms
Sessions
Login system
CRUD
Week 11–13: MySQL
Utasoma:
Database
Tables
Insert
Select
Update
Delete
Joins
Week 14–18: PHP + MySQL Project
Utatengeneza:
Student Management System
Blog System
Login System
Week 19–24: Laravel
Utasoma:
MVC
Routes
Controllers
Models
Blade
Authentication
Database migrations
Kazi yako ya leo
Fanya haya leo:
Install VS Code
Tengeneza folder web-course
Tengeneza file index.html
Andika Project 1 hapo juu
Fungua kwenye browser
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.