Special thread for Javascript programmers and learner's

Kwa offline documentation unaweza kutumia DevDocs.
Hii ina a lot of programming languages documentations na inahifadhi directly ktk localstorage ya device yako i.e. aidha simu or pc.
Huhitaji kuwa na connection kila mda unaotaka kupitia documentation.
 
Kwanini usiformat code zako vizuri?

Kuna option ya kuweka code ama unaweza kuandika neno code ndani ya [] kisha uka weka code zako na kumalizia neno hilo likiwa na [/code]

Ili kuondoa uvivu wa kusoma
 
Hapo umepata 40%
 
Unaweza pita hapa ukaona namna ya kuformat code

Na utaweza download project hapo niliupload

 
KWANZA
Usione ugumu kujifunza na kutafuta mibadala labda kama udeveloper sio passion yako na unajifunza kama hobby tu.
PILI
Ndio kuna uwezekano lakini what if you want to extend your app, au ukimuuzia mtu au shirika halafu wakakwambia wanataka uongeze feature flani kwenye hiyo script na wakati ulikimbia umande, huoni kuwa umepoteza hela na mteja pia?

MWANA KULITAKA MWANA KULIONA, HAYA BASI NENDA KAJARIBU HII SYSTEM BUILDER INAITWA AppGini kama hautaielewa lipia hii course hapa Customizing AppGini web applications UKISHINDWA KUI-RIDE, JIPE OPTION MWENYEWE.


Ushauri wangu unaposoma, kama njia unayotumia ni

Up and Running(Ukipataka hapa, mzee hakikisha tayari una msingi wa lugha inayofanana na hiyo unayo up and run la sivyo utakuwa unakalili syntax na msululu wa code kama vile organic chemistry ya A level)
Read, note, and run(Pana wafaa wote wasio na ujuzi wowote na walio nao pia juu ya lugha husika)

Usipende sana hili swali mwanzoni HOW bali penda WHY na WHAT Hicho ndo kinachoweza kukusaidia.


Achana na Altenative, ebu pata kidogo hii

Web design
Hapa jaribu kujifunza misingi ya Graphic design itakusaidia sana, hii kwangu huwa nasema ni lazima. Ukishamaliza basi jifunze nini maana website na tofauti yake na web apps kisha angalia nini kinaitajika ili kuunda hivyo vitu, kifupi website au web apps zote zina vitu vifuatavyo.

HEADER(UNAWEZA WEKA NAVIGATION, BANNER(JUMBOTRON)), MAIN CONTENT(UNAWEZA ZIVUNJA KWENYE VIJISEHEMU VIDOGO VIDOGO), FOOTER(MWISHO WA PAGE, UNAWEZA WEKA CONTENT ZA KUFIKIA KWA HARAKA)

Kwa hiyo ukishaelewa muundo wa website na web apps basi njoo kwenye web design hapa utakuwa unajua kabisa kulingana na mahitaji ya mteja uta design vipi hizo components hapo juu na kupata picha kamili ya web inayotakiwa kwa kuwa tayari una kaujuzi ka Graphic design hautachakaa.

NB: SIO GRAPHIC DESIGNER WOTE NI WEB DESIGNER

Baada ya hapo go for frontend development, hapa chagua mwenyewe tekinolojia uipendayo.

-Kama ni html, css na js haya tembeza mkono.
-kama ni bootstrap na jquery haya tembeza mkono.
-kama ni react, vue ama ember tembeza mkono.

Umemaliza hapo jimwage mwenyewe unapopenda kama unaunda web app hapa backend inakuhusu

-kama ni php ama laravel tembeza mkono
-kama python ama django tembeza mkono
-kama ni mysql, postgresql, firebase etc tembeza mkono

Yaani we tembeza mkono kulingana na pumzi yako.

Kama bado walilia alternative sio dhambi ila zina limit
-jifunze wordpress, blogger, kuna web builder kama vile wix, n.k



HATAHIVYO UKITAKA KUWA WEB DEVELOPER NI MUHIMU KUJUA

-Code from scratch(__iwe raw au framework based, muhimu ni scalability, security na portability).
-Know how to use web builder i.e wix etc
-Know all about CMS

Kila jambo lina wakati wake, samahani kwa uadishi mbaya.
 
Maana ya kuwa full stack developer, ni kwamba unakuwa na uwezo wa kudeal na front end na back end.

Wakati front end utahitaji tekinolojia flani flani. Pia back end teknolojia flani flani. Inategemeana na mtu.

Mfano; front end inaendeshwa na HTML, CSS NA JAVASCRIPT wakati kuna viraisishi vya kazi kama vile BOOTSTRAP, JQUERY, REACT ...


Unaposoma BOOTSTRAP inakusaidia wewe uweze kutumia CSS chache sana na javascript pia, kwa kuwa inategemea JQUERY , ambayo ni library inayoifanya javascript kusomeka kirahisi sana.

Hivyo ni muhimu kuijua kwa sasa nakushauri soma uelewe HTML,CSS NA JS KIUA JARIBU KUUNDA TOVUTI KWA HIZO RAW LANGS

utakuj gundua mambobmagumu kidogo, ukiona hivyo soma BOOTSTRAP ila ni vyema uanze na JQUERY alafu ukimaliza irudie hiyo project kwa kutumia BOOTSTRAP utaona tofauti.


Kwabupande wa na backend,

Ni vyema ukasoma PHP kwanza kisha jifunze kucheza nayo kwenye project after that good for FRAMEWORK like laravel soma hamisha project yote haya yanahitaji muda wala usiwe na shaka utafanikisha.


Sasa kama utaona utumie python na Django hiyo iwe option ya pili upande wa backend.

Naomba usikubali kukimbilia kwenye mern stack kwanza acha kabisa bado haijawa na nguvu aiseh.

Sijui kama nimekujibu.
 
Swadakta kula thanks yamwisho project gan nipe mfano naweza unda kwa hizo language 3 html,css,js pole lkn
Unda normal site itakayo ifadhi wasifu wako ikiwa napage kadhaa ila muhimu kuwe na about, contact, service na home page sio lazima uweke portifolio kwa sasa jaribu hizo kwa kuwa huna portifolio, ukiweza.

Hiyo nitafute uone namna ya kuivunja iingie ndani ya php
 
Naona kama hizi code hajakaa fresh mkuu ngoja njaribu kukutumi pm uziweke wewe
Kama vilivyomo kwenye folder ni vile vile , jf unaweza upload file lenye htmp and css ukiachana J's au php, kwakuwa zinahesabika kama normal file naomba uzip alafu upload , Kama ni hizi hizi ngoja nione.

Nimebanwa sana mkuu nivulie kuhusu contact mpaka nitakapokuwa free.

Nitaelekeza hapa hapa kwanza
 
Nakupongeza kwa uwezo wako kwa kuwa ulikuwa mkweli naona umejaribu kufanya jambo la maana kidogo, naomba nikurekebishe step by step kwa sasa tutaanza na page moja yaani home page, hapa hatuundi blog bali personal website kama nilivyokupa ushauri hapo mwanzo, na ni vyema ukaanza hivyo na baadae utaweza kujua structure ya blog, ukiweza hapa basi blog itakuwa rahisi kwako.


Mambo niliyoyaona kwako:

  • Kutotofautisha head na header yaani ulitengeneza class head ndani ya header ukimaanisha nini?, pamoja na kuwa haina madhara yoyote ulitakiwa kupa jina tofauti lenye kuleta maana ya kinachokwenda kuwekwa ndani yake. Mfano badala ya class="head" ungesema class="header" au class="main-header". Nafikiri neno hilo linareflect kitu flani hapa.

  • Ukishaweka <ol></ol> au <ul></ul> inapaswa zifuate <li></li> tags ndani ya <ol></ol> au <ul></ul>, kisha ndani yake ndo uweke link au content zingine. soma <ol> HTML Tag »

  • Pia matumizi ya target="_blank" hayapaswi kuwepo kwa kila link, tunatumia sehemu muhimu tu mfano kama page sharing link basi hii attribute ni muhimu ili user asitoke kwenye site yako akaisahau baadae.

  • Usipende kuweka javascript ndani ya head inapunguza speed ya tovuti, weka ndani ya body.

  • Mwisho kwa home page usiweke blog article hiyo sio sehemu yake hata kama unaunda blog kuna page maalumu ya content za blog na full content hapo home page ingebeba vitu vichache mfano kichwa na picha ya blog article ili user asome basi ni lazima afungue link impeleke kwenye article nzima.


Fanya masahihisho

vitu utakavyoweka sasa kwenye homepage

baada ya main header tuna navigation, weka banner kazi ya banner ni kumfanya mzembe wa kusoma huduma zako asome.
Angali mfano:


Fanya kwa kucustomize hizi code nilizorekebisha ndani soma comments

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <!--panga meta tag kwa mtindo huu, kasome pia umuhimu wa meta tag bado zipo zingine hapa https://www.w3.org/TR/2011/WD-html5-author-20110809/the-meta-element.html, na https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--Tenganisha css files kwenye mafolder tofauti pia hata picha nazo usiweke sehemu moja, pia usiweke js ndani ya head weka kwenye body ili page yako iwe na speed unapoifungua, soma https://www.w3schools.com/js/js_whereto.asp-->
    <link href="assets/custom/css/theme.css" rel="stylesheet" media="all">
    <!--Weka title au mwanzoni kabisa mwishoni, sio sheria ila ni muhimu-->
    <title>jamiiblog|homepage</title>
</head>
<body>
  <!---usiweke class isiyo na maana yoyote badala ya head iite header au main header au top-header ama jina linaoonyesha nini kimebebwa na hiyo element-->
  <header class="main-header">
    <!--Usiweke class head-container bali class inayoonyesha ninin kimo ndani ya hii element mfano main navigation ifupishe kidogo-->
    <div class="main-nav">
      <!--weka content kwenye container-->
      <div class="container">
        <!--hapa weka brand yako/logo ama jina-->
        <h3 class="brand"><a href="index.html">JFB</a></h3>
        <!--Usitumie ol tumia ul ili kupanga li manualy na ukisha tumia ul au hata ol hakikisha kinachofuta ndani lazima kiwe ndani ya <li></li> tags sio vinginevyo, halafu hii ni website sio kila link huwa na target="_blank" ni link chache na kwa sababu maalum rejea https://css-tricks.com/use-target_blank/-->
        <ul class="nav-items">
          <li class="item"><a href="index.html">Home</a></li>
          <li class="item"><a href="service.html">Service</a></li>
          <li class="item"><a href="about.html">About</a></li>
          <li class="item"><a href="contant.html">Contact</a></li>
        </ul>
      </div>
    </div>
    <!--Weka banner hapa chini kwanza fanya hii homework usitumie slider yoyote kwa kuwa hata js haujatumia -->
    <div class="home-banner">
      <div class="container">
        <!--hapa juu weka title tumia h1-->
        <!--hapa chini weka maelezo mafupi tumia p-->
        <!--hapa chini kabisa weka button ya about na contact tumia h1-->
      </div>
    </div>
  </header>
  <!--Matumizi ya <br> hayapendezi kwenye container, unaweza tumia ukiwa unacheza na paragraph jifunze namna ya kutumia margin na padding, Maudhudhu yanafuta hapa ikama utatumia id au class sawa lakini ziwe na maana pia, pia unaweza tumia element kama section na article kama utatumia div basi weka class zilizo na maana-->
  <section class="main-contents">
    <div class="container">
      <!--ondoa hii blog-article, niliyorekebisha itunze kwanza, kuna vitu vya kufanya hapo baadae -->
      <div class="blog-article">
        <div class="title">
          <h3 class="heading-one">Jinsi ya kujiunga na kupost thread jamiiforums</h3>  
        </div>
        <div class="article">
          <p class="welcome-p">Karibu katika blogu hii leo tutazungumzia jinsi ya kupost na kufungua akaunti jamiiforums(Jf),<br>kwanza kabla ya yote usisahau kuallow notifications kufollow</p>
          <h5 class="heading-two">Jamiiforums ni nini?</h5>
          <p class="intro-p">Jamiiforums ni mtandao/website ilio jikita zaidi katika kuchangia na kujadili mijadala mbalimbali mtandao huu humuwezesha members kupost na kuchangia hoja bila kuonesha utambulisho wao kwani hua tunaweka fake id tuuu nabaadhi ya vitu kama location na gender  hivyo nivigumu kutambulia hususani tovuti hii haitoi uwezekano wa mtu mwingne kuona e-mail yako humfanya mtu kua na amani na chochote pale anapo jadili ila hii sio guarantee kwani utakapokeuka sheria akaunti yako itafungiwa.</p>
          <h5>Jinsi ya kujiunga Jf</h5>
          <p class="p-continue">Ili kujiunga jamiiforums bofya hapa <a href="#">Jamiiforums</a> kisha utatoke ukurasa kama huu, Hapo mimi natumia darkmode kwako inaweza kutokea ikiwa na rangi ya bluu Kisha bonyeza navigation bar (hivyo vimstari vitatu) na itatokea kitu kama hiki Kisha bonyeza Register hapo itakuletea kwenye ukurasa wa kujisajili kama huu Anza kujaza hio fomu anza na user name hapo utaandika jinalolote utakalolitaka tunapendekeza isiwe jina halisi kisha andika e-mail hapo utaandika email yako kisha tunga password utakayo ikumbuka na ubonyeze agree kisha kitufe cha register baada ya kujisajili utaambiwa usubiri kua aproved na moderators na baada ya kua aproved screen yako itaonekana kama hivi Haya kwanza tumalizie kwa kupost thread yako ya kwanza bonyeza kitufe chekundu chini mkono wa kulia hapo na itakujia page kama hii Hapo utajaza title ya topic yako kuwa makini hairekebishiki bonyeza sehemu ya body kuandika maelezo hivyo vitufe juu kidogo ya body input are vinaweza kutumika kuweka picha video au kubadilisha maandishi rangi na style.</p>
        </div>
      </div>
    </div>
  </section>
  <!--footer-->
  <footer class="footer">
    <div class="container">
    <p>Get updates from this site follow now</p>
    <form class="follow" method="POST">
      <input type="email" placeholder="Enter Your email" name="email" id="email" required>
      <button type="Submit" id="follow">Follow</button>
    </form>
    <p>All Right Reserved © Jamiiblog 2021</p>
    </div>
  </footer>
</body>
</html>

Code:
/* Normalize page yako marign na padding by default */
* {
    margin: 0;
    padding: 0;
    /*rejea https://www.w3schools.com/css/css_boxmodel.asp kujua zaidi kuhusu box sizing*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*Cheza na font ya body naam, tumia font nzuri pia huwezi tumia font moja kwa kuwa kila browser ina utofauti katika kurender page hivyo tunatumia font nyingi zinzoendana, 
by default tunaweka sans-serif ili browser ikishindwa kuload basi itatumia default font, kwa hiyo font itakayoanza kupangwa ndiyo itakayo anza kuload ikiload zingine zinatemwa*/
body {
    font-family: ubuntu, "helvetica neue", Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, "fira sans", "droid sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.625;
    color: #666;
}
/*cheza na heading zote utakazotumia zifanane kwa style*/
h1, h2, h3, h4, h5, h6 {
    color: #333333;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
/*Unaweza specify font size ya kila heading au ukaacha kwakuwa kuna default size*/
h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 13px;
}
/*cheza na link zote*/
a {
    text-decoration: none;
}
/*cheza na main header + main contents zifanye ziwe relative yaani zifuatane*/
.main-header, .main-contents {
    position: relative;
}
/*cheza na container tumia 960grid system rejea https://960.gs/ */
.container {
    max-width: 960px;
    /*Weka margin zero auto ili upate white space kushoto na kulia*/
    margin: 0 auto;
}
/*cheza na main nav container*/
.main-nav {
    background: #e8491d;
    padding: .6rem 0 .6rem 0;
}
/*cheza na brand*/
.main-nav .brand a {
    color: #fff;
}
/*cheza na brand + nav items zote ziwe inline*/
.main-nav .brand, .main-nav .nav-items {
    display: inline-block;
}
/*Sukuma kulia nav items*/
.main-nav .nav-items {
    list-style: none;
    float: right;
}
/*cheza na item + link*/
.main-nav .item {
    display: inline-block;
    padding: .3rem;
}
.main-nav .item a {
    color: #fff;
}
/*footer*/
.footer {
    padding: .7rem 0 .7rem 0;
    color: #fff;
    background: #e8491d;
    text-align: center;
}
/*follow input na button*/
.follow input, .follow button {
    height: 40px;
    display: inline-block;
    padding: 0;
}
.follow input {
    max-width: 500px;
}
.follow button {
    width: 50px;
}

NB: hii footer yako irekebishe , nimefanya kamaulivyofanya
 
Mi naomba kujua ni nini hasa msingi mkuu wa coding hasa kwa mtu anaeanza?

Yaani namaanisha ukishaandika hyo code kuna sehemu unaclick ili kupata ulichokuwa unataka?

Kwa mfano unataka maneno yawe yanatembea juu kbsa ya website yako je unaanza kucharanga code ili hilo litokee au niaje?

Samahani km sijaeleweka.

Sent from my SM-A013G using JamiiForums mobile app
 
Msingi mkuu wa coding/programming ni vile unavyotakiwa kuvisoma kabla hata haujaanza kuunda software mfano dhana, mbinu na michakato mbalimbali inayotumika wakati wa coding.

unapotaka chochote lazima uelewe dhana, mbinu na mchakato husika.

mfano hapo kwenye maneno yanayotembea, unahitaji kusoma dhana iitwayo animation na kujua inavyofanya kazi kwenye programming. Mbinu au namna ya kuitumia, na mtiriko mzima wa kazi
 
haya jamani hivi inawezekana kudevelop android apps kwa kutumia javascript
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…