Developpeurs web/mobile au cameroun -Debutants a pro

code source disponible

validation d un formulaire:principe de base.realisé en html,css,js.

barre de navigation responsive html,css et javascript.

https://anicetnge.github.io/responsiveNavbar/

slider réalisé en html ,css & javascript.simple a réaliser et sans librairie
https://anicetnge.github.io/slider/

design de texte d'entête en html et css...

plutôt heureux de la progression des étudiants.....projet réalisé entièrement par l un d'eux .une note pour les encourager.

Mention spéciale aux personnes qui ont récemment interagi avec moi !

Costa Titan, Ashley Dua, Jems'h Marcel, Vuluka Mwila Joseph, Hery Ny Heriniaina Famenontsoa, Rockets Monzar, Sergino Fnh

pratiques le ciblage CSS grace a cet outils

https://anicetnge.github.io

bonjour mes chers Devs,j aimerais que chacun commente en disant le tuto qu il a le plus aimé et celui qu il attends (html/css/js/php/sql/node.js/java/python).

devenir developpeur web

partie2:post #3

ciblage d éléments d une page web grace au CSS.

le CSS nous permet d apporter du style a nos pages web grace a un ensemble de propriétés precises comme "color" et "font-size" qui permettent respectivement de modifier la couleur du texte et la taille de police d elements html.
avant de penser aux propriétés de style de css il faut cependant deja savoir cibler/choisir les elements html de notre page sur lesquels nous souhaitons apporter des changements.
le css nous fournit des regles pour cibler les elements html.en general il suffit de mentionner le noms de l element que l on cible.
si l on souhaite modifier les liens par exemple,il suffit d ecrire:
a{ propriété css a modifier...}
ou encore s il s agit des elements images de notre page que l on souhaite modifier ,il suffit d ecrire en css:
img{... propriété css a modifier...}
ainsi toutes les images ou liens de notre page verront leurs style etre mis a jour selon les valeurs des propriétés css se trouvant entres les "{ }".
cependant il est tres rare que l on souhaite donner un meme style a tous les elements de notre page.en general on veut avoir une image plus grande ou plus petite que les autres en fonctions de sa position dans la page web.le css nous permet de cibler avec plus de precisions les elements de notre page web grace a une syntaxe de ciblage particuliere.
pour cibler par exemple uniquement les images comprisent dans un bloc div on aura :

div img{ propriete css a modifier...}

il existe plusieurs regles pour vous aider a les voir en action et les assimiler plus facilement,j ai créé cette page web statique

https://anicetnge.github.io

n hesitez pas a la visiter pour en savoir plus sur le ciblage css.

barre de recherche customisée simple et facile...

NE MANQUES PAS LE TUTO DU DIMANCHE!!

comment realiser en HTML et CSS un bloc a bordures inclinées et texte droit..

n hesites pas a me proposer le tutoriel que tu souhaites avoir dimanche prochain en commentaires!!



WEBDEV237

le hamburger bouton le plus simple du monde en html & css!!

un bouton hamburger est ce petit bouton generalement situé en haut et a droite de la page web.il est constitué de 3 barres horizontales et ressemble a un hamburger 😋😋😋 d ou son noms :hamburger button.son role est d afficher ou de masquer les liens de la navigation lorsque l utilisateur clique dessus.
il existe plusieurs d
façons de le concevoir,certains devs utilisent une images,d autre des pseudo-elements CSS.dans ce tutoriel je vous presente la version la plus simplifiée et originale.le click sur le bouton pourra etre géré en javascript.

devenir developpeur web

partie2 -post #1

introduction au CSS

CSS ou cascading stylesheet (feuilles de style en cascade) est la technologie utilisée pour donner du style et un meilleur visuel a une page web.car si nous avons chargé nos pages web d elements html ,il faut reconnaitre qu une page web uniquement ecrite en html est plutot "moche" et tres peu captivante.c est pourquoi il a fallu creer une technologie pour ameliorer le visuel des pages web:CSS .
appliquer du style a un element est plutot simple .on designe les elements que l on souhaite modifier grace aux noms ou attributs id/class,ou encore sa position par rapport a un autre element parent/voisin,ensuite on leurs donne le style desiré en donnant des valeurs a des propriétés css prédéfinies.
par exemple on pourra dire l element h1 de la page,je veux son texte en bleu..
ou le premier paragraphe dans la section avec l id="section1" augmenter sa taille de texte a 18px (pixels).
ou encore tous les éléments "a"(liens) contenu dans des listes,ne doivent pas etre soulignés.

attention le css defini les propriétés que l on puisse changer sur un element.couleur de texte,bordure,taille,arriere plan,position etc..il faudra donc retenir celles ci ou les plus importantes.

h1{ color:"skyblue"; }

h1 represente l element de la page qu on cible afin de le modifier.toutes les modifications qu on souhaite apporter a cet element sont contenues entre les accollades { }
color represente la propriété css que l on souhaite modifier.ici c est la couleur de texte qu on change en "skyblue" (bleu ciel) en donnant cette valeur a notre propriété color.
les propriétés modifiées sont terminées par des point-virgule ;

structure des regles css

element { propriété : valeur ; }

-comment lier le HTML et CSS ?

il existe 3 façons de relier html et css.
1) on peut ajouter du style a sa page web grace a l element style que l on place dans la balise head de la page web.cf image.
les regles css sont alors inscrites entres les balises ouvrantes et fermantes ....
2) la 2eme methode possible est l utilisation de l attribut style.tous les éléments html possedent cet attribut.les valeurs données a l attribut style d un élément definissent le style que l on souhaite appliquer a cet http://xn--lment-9rab.cf/ image
3) la 3eme methode est celle recommandée:l utilisation d un fichier a part qui contiendra le css et sera lié a la page web grace a l element link qu on ajoutera dans l element head de la page web cf. image.
l attribut href indique le chemin vers le fichier contenant le css et l attribut rel signale qu il s agit effectivement d un fichier de style .
creez un fichier renommez le comme vous souhaitez mais terminez le noms par ".css" ,pour creer un fichier de style css.dans l exemple j ai nommé le fichier style.css.

dans le prochain post on verra les regles qui interviennent lors d ajout de css dans une page web.l ordre de priorité dans l application du style et l avantage a utiliser un fichier css séparé pour contenir nos regles css....ainsi que la structure des regles css.
n hesitez pas a commenter et surtout aimez/suivez la page pour ne pas rater les prochains tutos. WEBDEV237

devenir developpeur web

partie1 - post #10

les attributs id et class

avant d entamer le css,qui nous le rappelons,nous permettra d ajouter du style(couleurs,positionnement,police,dimensions etc..) a nos pages web,il est super important de parler de 2 attributs particuliers des elements HTML.
on rapelle une fois de plus que les attributs d elements html sont des propriétés qui sont placées dans la balise ouvrante

et dont les valeurs permettent d ajouter des spécificités a ces elements.
on a vu l attribut "href" des liens qui nous a permis de renseigner l adresse vers laquelle pointe notre lien,l attribut "src" des images qui indique le chemin vers l image devant etre affichée a la place de la balise image dans la page web...etc...
aujourd'hui je vais vous presenter 2 attributs tres speciaux:
"id" et "class" .
ils sont si speciaux qu ils vous accompagneront dans toute votre carriere de developpeur web et croyez moi vous allez les voir partout car ils sont super importants en CSS et en JAVASCRIPT.
la premiere particularité de "id" et "class" est qu ils sont passe-partout.tous les éléments HTML peuvent prendre un attribut "id" ou "class". a l opposé des attributs comme "src" qui sont specifiques a certains elements comme "img" mais ne vont pas avec les elements titres "h" par exemple.
la deuxieme particularité est leurs fonction.ces attributs servent uniquement a nommer un element ou un groupe d element dans le but de pouvoir les differencier ou les regrouper.
l attribut id (identifiant) comme son noms l indique permet de donner un identifiant unique a un element html.il est comme votre noms ,c est un identifiant pour vous distinguer car il est unique et propre a vous.de la meme façon en attribuant par exemple un id a un element paragraphe d une page
lorem ipsum...
on lui attribue un noms pour le differencier de tous les autres elements paragraphes mais aussi de n importe quel element html de notre page web. 2 elements d une meme page web ne peuvent donc pas avoir une meme valeur d id.grace a cet identifiant on pourra plus precisement cibler cet element en CSS pour lui appliquer du style.

l attribut class(classe), par contre permet de grouper plusieurs elements pour signifier l appartenance a un meme groupe.les elements appartenant au meme groupe possedent la meme valeur d attribut class.ainsi on pourra en css cibler plusieurs elements en meme temps pour leurs appliquer un style commun.ca nous evitera de devoir cibler des elements un par un.on pourra par exemple donner un meme attribut class au titre h1 et au premier paragraphe p et se servir de cet attribut class en css pour changer la couleur de ces 2 elements h1 et p en rouge.

ces 2 attributs sont tres important car nous allons nous en servir tres prochainement en css pour designer les elements de notre page web sur lesquels l on souhaite appliquer un style particulier.
on pourra dire l element avec l id=paragraphe1 je veux son texte en rouge
ou encore les elements appartenant a la classe "police_xl" (tous les elements ayant l attribut class="police_xl") je veux que leurs textes mesurent 25pixels.....

RDV dans les prochains posts pour entamer le design web grace a CSS.

Devenir développeur web.

partie 1 -post #9

les elements HTML importants tres souvent mal utilisés par les developpeurs.

DIV
permet au meme titre que l element section de segmenter le code de sa page en sections appartenant a la meme semantique.les developpeurs web polluent leurs code en creant des div partout pourtant il existe des éléments semantiques plus adequats comme on a pu le voir.
plutot que d utiliser une div pour delimiter une navigation utilisez l element nav.utilisez footer,section,article plutot que div cela augmentera votre seo et rendra vos pages plus accessibles.

BR
l element break line permet de creer un retour a la ligne.mais nous sommes toujours tentés de l utiliser pour creer des espaces entres elements de nos pages web.plutot que d utliser l element br utiliser les propriétés margin en css pour augmenter l espace separant des elements.n utilisez l element br que si vous souhaitez par exemple forcer un retour a la ligne dans un meme element p (paragraphe).

SPAN
l elemnt span n est pas mal utilisé par les developpeurs mais il est peu utilisé.cet element permet d encadrer une portion de texte a laquelle on souhaite appliquer un style.les developpeurs plutot que de se servir de cet element couplé au css pour donner du style gras (bold) par exemple ,se retrouvent en train d utiliser l element bold .mauvaise pratique!!

BOLD / EM
les elements bold et emphasys permettent de mettre l accent sur les termes qu ils delimitent.l element bold a un rendu style gras et emphasys a un rendu style italique dans le navigateur ce qui pousse bon nombre de developpeurs a les utiliser pour ajouter ces styles a des portions de texte de la page web.mauvaises pratiques.ces elements servent d indicateurs pours les moteurs de recherche...ils permettent d accentuer aupres des moteurs de recherche la valeur et importances des textes/mots qu ils delimitent . si vous souhaitez donner du style a une portion de texte,servez vous de l element span pour delimiter la portion de texte ainsi que des propriétés font-weight :bold et font-style:italic pour donner les styles bold(gras) et italique.

H
l element titre.on distingue 6 differents niveaux de titre h1-h6 .chaque niveau a un rendu different dans le navigateur web.les h1 etant plus importants ont une police plus grande que les h2 ainsi de suite jusqu'à h6.ce n est pas pour autant qu il faut utiliser un h1 si on souhaite un titre plus grand(police plus grande).le css est la pour appliquer le style .grace a la propriété font-size meme un h6 peut etre plus grand qu un h1.
ces nuveaux de titres servent a indiquer aux moteurs de recherches l organisation de notre contenu.une page web n a qu un seul h1.il peut apparaitre plusieurs element h1 dans le code source d une page web mais son contenu doit toujours etre le meme.c est le grand titre :) ensuite viennent lees sous titres h2 ...ainsi de suite les moteurs de recherches pourront alors creer un arbre credible des parties de votre page web et mieu l indexer pour les recherches.

n oubliez pas le contenu en html et le style en css!!!
like,follow & share ;)

les tableaux en HTML

le language html nous permet de creer des tableaux dans nos pages grace a l element "table" .

le language html construit un tableau ligne par ligne .ceci grace a l element "tr"(table row pour ligne de tableau) .

les lignes du tableau sont quant a elles constituées de cellules:les cellules d en-tête et les cellules de données.
les cellules de données(normales) sont definies grace a l element "td"(table data pour données de tableau) .
les cellules d en-tête situées generalement dans la premiere ligne du tableau sont formées grace a l element "th"(table head pour en tête de tableau).elles representent les titres des colonnes du tableau.
construisons un tableau a titre d exemple .cf. image.

attributs utilisables avec les tableaux.

border: l attribut border de l element table permet de definir la taille des bordures du tableau.la valeur par defaut etant 0 le tableau crée n aura pas de bordure.
rowspan et colspan:les attributs rowspan (expansion de ligne) et colspan(expansion de colonne) permettent de specifier sur combien de ligne ou colonne une cellule (td ou th) s etend.la valeur par defaut de ces 2 attributs est 1.pour creer une cellule qui s ete nd sur 2 colonnes comme sur l exemple i' suffit de lui ajouter l attribut colspan=2.

autrefois ,les developpeurs utilisaient l element table pour structurer les elements d une page web sous forme de grille.il suffisait alors d inserer les elements html dans des cellules et jouer avec les attributs colspan et rowspan pour creer toute sorte de grille.(exemple en image).aujourd'hui cela est considéré comme une pratique a eviter car je vous rapelle en html il ne s agit que du fond et non de la forme.

abonnes toi pour ne rien manquer :)

devenir développeur web

partie 1 - post #8

bien structurer ses pages web grace aux elements semantiques du language html.

imaginez un instant que vous souhaitez analyser le code source d une page web dans le but d en etudier une partie.il y a cette belle page web que vous consultez régulièrement et vous souhaitez savoir comment son developpeur a créé cette navigation par exemple.vous faites un click droit dans la page et affichez son code source (html + css +..) et bam vous vous retrouvez avec des tags et des tags html et ne savez pas exactement ou commencer pour identifier la partie du code qui correspond a la navigation qui vous interesse.sans outils particuliers identifier cette zone de code sera tres penible.c est exactement le meme probleme auquel font face navigateurs et moteurs de recherche.ils voient le code source de votre page comme un long texte sans distinction de parties ou paragraphes.
il faudrait donc un moyen de pouvoir delimiter chaque partie d une page web dans le but de s y retrouver tres facilement.ca tombe bien,le language html prevoit a cet effet des elements appelés elements semantiques.ils fonctionnent comme l element body.ils ne sont pas visibles dans la page web mais encadrent les codes html des differentes parties de notre page web.c est comme des etiquettes qui permettent de dire ce bloc c est le code html de la navigation,celui ci c est le code html du pieds de page etc..et grace a ca on s y retrouve plus facilement lorsqu'on analyse la page web.
les éléments semantiques les plus utilisés sont header,nav,aside, section,article,footer cf image.
ainsi en inspectant une page web il suffit de trouver les balises et par exemple pour savoir ou le code source de la navigation commence et se termine.
que ce soit un developpeur ,un navigateur ou un moteur de recherche,il devient tres facile de se retrouver dans vos pages web car chaque bloc est desormais contenu dans un element semantique decrivant une zone precise du corps de la page web.

avant la création des elements semantiques ,les développeurs avaient recours a un element html particulier .l element div(division) et aujourd'hui beaucoups de developpeurs continuent de poluer leurs codes avec des div partout ce qui n est pas une bonne pratique.c est pourquoi je ne parlerai pas de cet element ici.le language html dispose d assez d elements pour chaque portion d une page web.

nav- ... - contient la navigation de la page web.

aside - ... -contient un contenu secondaire en general localisé a gauche ou a droite (aside - sur les côtés) du contenu principal.

section - ... -la page web est divisé en sections.comme sin noms l indique ,la balise section permet de definir ces sections.le contenu principal de notre page web peut comme dans l exemple avoir une section qui porte sur la description de webdev237 et une autre section qui liste les derniers tutos posté s sur webdev237.

article - ... -comme son noms l indique delimite un article.on peut s imaginer un article dans un journal .les articles peuvent avoir un titre qui peut etre contenu dans un en-tête,plusieurs sections et un pieds de page.

header - ... -contient l en-tête d une page web,d un article ou d une section.le header d une page web peut contenir la navigation ainsi que le logo de la page web.a ne surtout pas confondre avec l element head juste au dessut de body dans la page web et qui contient toutes les informations sur la page web(meta,title ...).

footer - ... -contient le pieds de page d une page web,d un article ou d une section.on s en sert generalement pour contenir le bloc en fin de page web contenant les liens utiles et les conditions d utilisations et droits en fin de page web.

le code de notre page web a été mis a jour dans le but d ameliorer sa structure.quelques elements ont été ajoutés (paragraphes ,articles de posts) pour creer des sections et d autres blocs semantiques (header,footer,article) afin que vous puissez voir exactement comment on s en sert pour delimiter le contenu d une page web .je vous demanderai de vraiment essayer de toujours utiliser ces balises semantiques pour structurer vos pages web plutôt que d utiliser des elements 'div' (division) pour creer des blocs semantiques.
remarquez que l element aside ne s affiche pas de coté automatiquement son seul but est d indiquer que ce bloc sera positionner plus t**d sur un côté de notre contenu principal de page web.ne vous inquietez pas nous apprendrons comment changer sa position grace au language css dans la 2eme partie de cette serie sur le developpement web.
dans le prochain post nous aborderons les notions d inline-elements et bloc-elements.ce sont 2 concepts qui permettent de classifier les elements html en fonction de leurs comportements (creer un retour a la ligne ou s afficher sur la meme ligne que l element precedent) sur une page web.
abonnez vous,likez ,commentez,partagez la page

devenir développeur web

partie 1 -post #7

les listes

les listes sont presentes 9.5 pages web sur 10 sur la toile.on distingue les listes numérotées et les listes simples (a puces ou non numerotées).les deux servent a lister des elements a la seule difference que la liste ordonnées ajoute un indice numerique permettant d indiquer le rang de l element dans la liste.
on peut se servir d une liste ordonnée dans un article de cuisine pour indiquer par exemple les etapes par ordre de cuisson d un plat.pas besoin de numeroter les ingredients par contre,une liste simple suffirait.
les listes ordonnées et simples s utilisent de la meme facon.l element html decrivant une liste ordonnée est la balise (ordered list pour liste ordonnée) et celle utilisée pour les listes simples (unordered list pour liste non ordonnée).
les elements de la liste se placent entre les balises ouvrantes et fermantes de la liste et a l interieur d une balise pour chaque elements dans le but de les delimiter.
ex:

element1
element2

les images de ce post fournissent des exemples d utilisation,ainsi que le rendu des differentes listes dans une page web.

l une des utilisations les plus recurrentes des listes dans une page web est l utilisation comme navigation.la navigation est l ensemble de liens generalement situés au debut de la page web permettant de parcourir les differentes pages web d un site web.on rapelle qu un site web est un ensemble de page web.
pour créer une navigation simple ,on combine juste une liste non ordonnée a des liens hypertextes conf. images.les attributs href de ces liens doivent contenir les chemins vers les pages web que chacun des liens de la navigation represente.la navigation simplifiée ajoutée a notre page web exemple ne pointe vers aucune page web d ou le "href=' #' ". si vous le souhaitez ,vous pouvez creer une nouvelle page mapage.html dans le meme dossier contenant la page index.html et ajouter "href='mapage.html' " a l un des liens de votre navigation dans la page index.html.une fois fait,cliquer sur ce lien ouvrira la nouvelle page mapage.html.(dans laquelle vous pouvez ajouter la mm navigation mais cette fois avec un lien retournant a la page principale index.html ;) ).

notre navigation simplifiée a une orientation verticale et vraiment pas de style,mais ne vous inquietez pas ,dans la partie 2 de cette serie (CSS) nous apprendrons a changer le style des elements html(couleurs,taille,position....).pour l instant ,la partie 1 se focalise sur le contenu des pages web (HTML).

notre page web s enrichit en éléments et commence a prendre forme.nous avons couverts les elements qui ne manqueront jamais dans une page web (titres,liens,images, paragraphes et listes).cependant le language HTML contient beaucoups plus d elements que nous decouvrirons ensemble au fur et à mesure.dans les prochains posts nous decouvrirons les éléments semantiques qui facilitent la tache(comprehension et indexation de pages web) aux navigateurs,developpeurs et moteurs de recherche.ces elements, au meme titre que la balise body par exemple qui indique au navigateur le corps de notre page web,permettent aux navigateurs et autres developpeurs web de mieux comprendre nos pages web en delimitant plus aisement ses parties.y aura un element pour definir le pieds de la page,un autre pour definir l en-tête de la page etc...rdv dans les prochains posts pour plus.

les posts ne pourront jamais vous edifier autant qu un bon livre.ils sont faits pour vous donner un avant gout des possibilités qui s ouvrent a vous.n hesitez pas a consulter des livres pour en savoir plus.WEBDEV237 c est aussi une large librairie de livres en francais comme en anglais sur le developpement web .DM...