Comment faire un mini-site responsive

[marabout-agile]

Bonjour,
Je suis encore étudiant en e-commerce. J'ai de bonnes bases de HTML, CSS et PHP. Je connais un peu de Javascript grâce à mes études, mais je n'ai jamais poussé plus loin. Mais j'ai bien envie de tester mes compétences en créant mon site CV from scratch... Du coup, avant même de commencer, j'ai réfléchi au fait que je souhaiterais qu'il soit dispo sur mobile aussi. Je voulais savoir si, avec les langages cités précédemment, il était possible de faire un site 100% responsive ? Si oui, quels attributs/outils/balises utiliser ? Si non, quel outils puis-je utiliser ?
Merci d'avance !

 

[rick38]

Le responsive c'est du CSS et du HTML.
Dans le CSS on utilise @media screen pour indiquer la condition de taille d'écran, cherche de ce côté.

Mais de nos jours faire "from scratch" est de moins en moins ce que les recruteurs cherchent, ils aiment bien qu'on utilise 36 frameworks, 256 librairies... Aussi bien pour PHP, JS que le responsive.
Moi j'utilise Bootstrap pour le responsive, il y en a d'autres plus légers mais c'est très populaire alors tant pis pour les 300 Ko que ça ajoute...

 

[emualliug]

Utilise bootstrap. C'est une très bonne base qui contient le css et le js pour faire un site responsif et élégant. Il est très aisé d'y ajouter des règles dans un css dédié pour personnaliser le rendu.

édit : je vois que @rick38 propose la même chose. Je suis d'accord avec lui sur la question du poids, Bootstrap est "un peu" lourd, dans le sens où on en utilise que le 10e la plupart du temps. Il est possible de faire un bootstrap "sur "mesure" en ne sélectionnant que les composants que l'on souhaite… mais je ne trouve pas que le gain vaille la peine. Le poids total reste très raisonnable sur un chargement global, d'autant plus que c'est du statique que l'on peut mettre en cache. Et rien ne sert de vouloir économiser sur le poids d'un composant si c'est pour, à côté, faire 15 appels à divers script, styles, fonts, etc.

 

[indigene]

Il existe un générateur de sites basé sur bootstrap qui s'appelle Lauyan Toweb

 

[rick38]

Un générateur c'est pas son but je pense, c'est pour mettre en pratique et acquérir de la compétence qu'il veut...

 

[indigene]

mais comme tu le disais plus haut, faire du from scratch n'est pas un but en soi.

En utilisant un générateur, la structure est créée et après il possible de reprendre des briques, les déplacer, faire autre chose avec, etc. Il ne s'agit pas de réinventer la roue mais d'assembler des engrenages pour en faire un moteur.

Le générateur permet de générer tous les éléments de base qui ne représentent pas une réelle plus-value s'ils doivent être reconstruits en partant de zéro. Un maçon qui construit une maison ne fabrique pas lui-même ses moellons.

Et le générateur produit un préview en pur html. Après tout le travail consiste à intégrer ce html au cœur de scripts PHP. Le vrai travail qui vise à mettre en pratique des compétences est la réalisation de ces pages php qui accèdent à des bases de données. Le html/css n'est qu'une mise en forme des pages. Si des modèles (templates) existent déjà pourquoi s'en priver ? Même en entreprise, quand on doit réaliser un document word ou un powerpoint, on repart toujours d'un modèle officiel qui correspond à une certaine charte graphique. On ne recrée pas un modèle/charte graphique à chaque nouveau document. C'est à cela que sert un générateur.

 

[spout]

En plus de Bootstrap, il y a Tailwind CSS aussi qui est bien et assez populaire : https://tailwindcss.com/

 

[marabout-agile]

Le responsive c'est du CSS et du HTML.
Dans le CSS on utilise @media screen pour indiquer la condition de taille d'écran, cherche de ce côté.

Mais de nos jours faire "from scratch" est de moins en moins ce que les recruteurs cherchent, ils aiment bien qu'on utilise 36 frameworks, 256 librairies... Aussi bien pour PHP, JS que le responsive.
Moi j'utilise Bootstrap pour le responsive, il y en a d'autres plus légers mais c'est très populaire alors tant pis pour les 300 Ko que ça ajoute...

Merci Oui, j'ai déjà utilisé Bootstrap mais je n'arrive pas à me rendre compte si c'est très utilisé ou pas, selon toi, c'est donc l'un des plus populaire ?

 

[marabout-agile]

Merci pour toutes vos réponses Je vais aller explorer tous vos conseils

 

[rick38]

Oui, j'ai déjà utilisé Bootstrap mais je n'arrive pas à me rendre compte si c'est très utilisé ou pas, selon toi, c'est donc l'un des plus populaire ?

C'est probablement le plus répandu oui. Pas parce que c'est le meilleur (depuis il en existe plein d'autres, cherche Responsive CSS Framework dans Google), mais par son ancienneté (mais il est toujours bien maintenu et en est à sa version 4).

 

[emualliug]

je n'arrive pas à me rendre compte si c'est très utilisé ou pas, selon toi, c'est donc l'un des plus populaire ?

C'est actuellement, et de très loin, le plus utilisé d'après builtwith.

 

[Buddyweb]

Bootstrap et le plus utilisé mais peut être pas le plus simple pour quelqu'un qui pose cette question. Il y a des framework moins complets mais plus simples du coup. Autre chose, tu peux utiliser une solution comme aerobatic pour pousser ton code directement sur un serveur en ligne sans payer le nom de domaine. L'url ne sera pas géniale mais ca répond à ta demande.

 

[baboulinetbcn]

Dans le genre facile aussi, à une époque, j'ai utilisé Mobirise