Ma reconversion pro

Du bâtiment au développement web

Étiquette : html

Le contenu du thème

Salut, logo-theme custom wordpress

On continue sur notre lancé dans la création d’un thème WordPress. J’avoue que la dernière fois on a pas fait grand chose mais c’était nécessaire pour la suite.

Dans ce nouvel article, nous allons découvrir comment fonctionne un thème, et donc un ou plusieurs templates. Comme tu t’en es peut-être rendu compte, le dossier wp-content dont je te parlais la dernière fois (Préparer WordPress en local), contient de nombreux fichiers dont le corps même du thème qu’on veut créer.

Nous allons explorer ce dossier et essayer de comprendre comment WordPress construit un  thème avec les briques qu’on lui donne.

Il va falloir être un minimum rigoureux dans l’organisation des fichiers puisque WordPress va chercher tel fichier ou tel autre grâce à leur nom, donc attention aussi aux noms qu’on donne…

Continue reading

 

La pagination avec Bootstrap

Salut, La pagination avec Bootstrap

Dernier article de la longue série sur le framework de Twitter. Aujourd’hui on va voir comment mettre en place la pagination avec Bootstrap. Cette fonction va permettre à tes utilisateurs de pouvoir changer de page et de poursuivre leur navigation dans une même thématique. Tu peux retrouver un exemple de pagination dans ce blog dans l’onglet ARTICLE en bas de page. Il faudrait d’ailleurs que je prenne le temps de rechercher dans les fichiers PHP comment remplacer les textes en anglais pour les mettre en français.

Si tu me lis depuis quelques articles, je procèderais de la même façon, tous les exemples de code seront visibles depuis cet article ou depuis un projet Codepen.

Pour mettre ta pagination en place, on va encore et toujours ajouter des classes CSS, et Bootstrap s’occupe du reste!

Continue reading

 

Faire une navbar avec Bootstrap

La navigation avec Bootstrap – Partie 2Faire une navbar avec Bootstrap

Suite du tour des possibilités qu’offre le framework qui nous intéresse depuis plusieurs articles, cette fois nous allons voir comment faire une navbar avec Bootstrap.

Une navbar est un des éléments les plus importants d’une page web. C’est une des raisons qui font que tes utilisateurs visitent ton site ou le quittent. Les titres d’onglets leurs couleurs, leurs animations, son aspect général, etc doivent être choisis avec précision et susciter l’intérêt. Mais autre aspect important, la navbar doit aussi être accessible sur mobile.

Bootstrap est un framework pensé mobile first, donc le code qui suivra tiendra compte de l’aspect responsive que devra avoir une navbar. Pour cela Bootstrap a pensé à tout! Comme pour l’article précédent sur la navigation, certaines de ces fonctions auront besoin de jQuery et de Javascript pour fonctionner. N’étant pas encore formé à ces deux langages, je ne parlerai pas de ça pour le moment.

Continue reading

 

La navigation avec Bootstrap

La navigation avec Bootstrap – Partie 1

Salut, la navigation avec bootstrap

Dernier sujet sur Bootstrap, à propos de la façon de construire la navigation de ton site. Comme d’habitude, il faudra ajouter des classes particulières, et pour que certaines techniques fonctionnent il faudra ajouter du code jQrery et/ou JavaScript, choses que je ne connais pas encore. Je reviendrai donc sur l’animation de ces navigations plus tard lorsque j’aurai maîtrisé ces deux choses là.

Bootstrap propose donc plusieurs façons d’organiser et de réaliser la navigation de ta page. Chacune de ces solutions est différentes visuellement, donc à toi de savoir laquelle utiliser.

Au risque de faire un article très long, je le découpe en au moins 3 parties, peut-être même 4…

Continue reading

 

Utiliser la grille Bootstrap

Salut, utiliser la grille bootstrap

Après être resté un peu sur notre faim la semaine dernière, je vais donc te montrer comment utiliser la grille Bootstrap. Nous allons nous servir des dernières classes CSS vues, celles qui ressemble à cela: col-md-5. Si tu ne te rappelles pas comment cette balise est constituée et ce que ça signifie, tu peux jeter un oeil à mon dernier article: Le système de Grille avec Bootstrap.

Continue reading

 

Le Sytème de Grille avec Bootstrap

Bonjour,le système de grille avec Bootstrap

On continue la série consacrée à Bootstrap avec cet article sur ce qui est pour moi l’élément fondateur du frawework:  le système de grille. Ce système permet assez facilement de construire des pages responsives, puisqu’il est pensé Mobile First. Il est assez simple de faire des pages qui s’adaptent à tout types d’écrans, de ton PC 30″ à ton smartphone. Assez simple, mais il faut quand même un peu de temps pour bien comprendre comment ça marche, et j’avoue qu’au départ il y a 2-3 trucs un peu perturbant…

Continue reading

 

Installer Bootstrap

Salut, installer-bootstrap

Cela fait quelques jours que je me suis vraiment mis à Bootstrap, qui est à la base un framework développé par Twitter. J’avais commencé par suivre les exercices sur freecodecamp, qui constituent un très bon début mais j’avais besoin d’aller plus loin. J’ai donc récupérer un livre très complet que tu trouveras dans la bibliothèque: « Bootstrap 3, le Framework 100% web design », de Benoît Philibert.

Bootstrap est un framework très pratique et vaste qui permet de faire de la mise en forme directement en indiquant des classes CSS aux balises HTML. Je n’ai pas encore tout appris donc je ferais plusieurs articles sur Bootstrap, il y a beaucoup de choses à dire et ça m’évitera de faire des articles trop long. La première chose à faire est d’installer Bootstrap!

Continue reading

 

Les éditeurs de texte

Pour taper du code, donc pour taper du texte, il te faudra choisir un éditeur de texte.

« Oui mais moi j’ai acheté Word?! C’est bon? »

C’est très bien pour faire ta lettre de résiliation chez EDF, ou faire un courrier quelconque, mais surtout pas pour taper du code!!

Un logiciel comme Word, Page( sous mac), open-office, pour ne citer qu’eux, te proposent des possibilités de mise en page, de mettre des titres, des marges, d’insérer des images, des tableaux. Cela permet de faire des pages uniquement statique, pour le plus souvent être imprimées sur du papier ou en pdf. Mais ça, tu le savais déjà, je ne t’apprends rien.

Continue reading

 

Le cours HTML5 et CSS3 sur Openclassrooms – 1

Première chose à apprendre HTML

A ce jour j’ai terminé tout le cours sur le HTML5/CSS3  avec un score de 95% (fier le type!).

Ce cours m’a permis à apprendre à structurer une page en HTML, à faire des liens, des listes, insérer des images, etc.

Ce qui est assez marrant quand on y connait rien en programmation, c’est que le simple fait de se mettre à faire une page complète  en HTML, on a la sensation que ça y est, on entre dans la matrice et on peut cracker le système de la NASA!

Continue reading

 

© 2020 Ma reconversion pro

Theme by Anders NorenUp ↑