Share
Nous l'avons fait! Nous avons créé notre tout premier site Web à partir de zéro et avons abordé quelques éléments essentiels du design, tels que les espaces, la typographie et la couleur..
Dans ce dernier didacticiel, nous allons rapidement passer en revue tout ce que nous avons appris jusqu'à présent sur la création et la conception d'un site Web, ainsi que sur les moyens de rendre notre site Web accessible sur Internet afin que nous puissions diriger nos amis et notre famille vers une adresse Web, et aborder quelques points des ressources utiles pour aller de l'avant avec nos études.
N'oubliez pas de poser vos dernières questions dans la section commentaires au bas de cette page.!
Jetons un coup d'oeil à la feuille de route de la série que nous avons prise pour arriver là où nous en sommes.
Nous avons commencé cette série en abordant le fonctionnement du Web. Pour que deux ordinateurs différents puissent communiquer, ils doivent tous deux être connectés à Internet via un fournisseur de services Internet (ISP)..
Pour permettre à d'autres personnes de consulter notre site sur Internet, ces fichiers doivent être transférés (déplacés) sur un serveur. un ordinateur spécial avec accès direct à Internet. Nous verrons cela plus en détail dans une section ci-dessous..
Notre rôle sur Internet est celui d'un concepteur de sites Web. Notre travail consiste à nous assurer qu'un site est ravissant et qu'il est très facile à lire et à naviguer pour nos utilisateurs..
Avec ces objectifs en tête, nous avons commencé à construire notre site Tuts + Town avec HTML et CSS après avoir élaboré quelques croquis fantastiques sur papier. Afin de nous préparer à cette partie du processus, nous devions tout apprendre sur la dénomination et l’organisation des fichiers..
Nous savons maintenant que le fichier HTML principal est toujours appelé index.html et si les images sont situées dans leur propre dossier ou non impacte la src attribut dans notre HTML.
Enfin, nous avons sélectionné un éditeur de texte et nous étions officiellement prêts à écrire des fichiers HTML et CSS.!
Pour construire notre site Tuts + Town, nous avons d'abord établi notre structure HTML, puis branché le contenu..
Cette structure était composée de plusieurs éléments imbriqué dans une primaire html élément et avoir cette base en place fait brancher le contenu beaucoup plus simple.
Une fois le contenu en place, nous pourrions commencer à tout mettre en style avec CSS. Premièrement, nous devions relier les deux documents dans le code HTML. tête:
Dans notre document CSS, nous avons pu déclarer couleurs, tailles, mise en page, etc., sur les éléments du document HTML, aboutissant éventuellement à la conception du site..
Cette section de la série se termine par un didacticiel présentant les différents formats d’image disponibles. Nous avons parlé de les inclure dans notre code HTML et de certains effets que nous pouvons appliquer aux images avec CSS, tels que la modification de leur opacité:
Comme mentionné, toutes les images utilisées dans la série Tuts + Town sont des SVG, ce qui signifie qu'elles peuvent être redimensionnées sans perte de qualité et facilement éditées..
Après la création de notre site, nous avons passé en revue les concepts de conception de base qui ont contribué à l’apparence, la convivialité et la convivialité du site..
Le contenu est la partie la plus importante de la conception Web. Après avoir établi que notre contenu était utile, nécessaire et bien organisé, nous sommes passés aux éléments visuels..
La hiérarchie visuelle a été établie pour le site en fonction de la taille, des couleurs et des espaces des polices, comme le ballon ci-dessus est conçu pour être l'objet dominant de l'image..
La typographie est partout où nous voyons des mots écrits et est l'une des parties les plus importantes de la conception web. Nos utilisateurs doivent pouvoir lire notre contenu, mais nous devons également nous assurer que les polices que nous avons choisies correspondent au ton et à la convivialité de notre contenu et de notre conception visuelle..
Cette section de la série se termine par un tutoriel sur la théorie des couleurs, la signification de certaines couleurs, différents systèmes de couleur pour le Web et la sélection d'une palette performante..
La référence aux roues de couleurs primaires et secondaires nous aide à mieux comprendre comment certaines couleurs sont créées et pourquoi certaines couleurs peuvent bien paraître ensemble alors que d'autres ne le sont pas..
Voyons maintenant comment nous pourrions obtenir notre site sur le Web.!
Comme nous en avons discuté au début de cette série, ce site vit localement sur nos ordinateurs individuels et non sur Internet. À ce stade, nous ne pouvons pas diriger vos amis et votre famille vers une adresse Web, ils ne peuvent donc pas encore voir notre travail étonnant..
Comme nous l'avons vu dans le didacticiel d'introduction, les fichiers doivent être stockés sur un serveur pour que d'autres puissent les visualiser sur Internet..
Le processus d'obtention d'un site sur Internet peut souvent impliquer un achat et une adresse électronique. Si vous êtes trop jeune pour avoir accès à l'un de ces programmes, il est préférable d'avoir un adulte avec vous pour la section suivante..
Il existe un certain nombre de services qui aideront hôte nos fichiers pour nous, ce qui les rend accessibles sur Internet. Pour cette série, nous allons nous concentrer sur l'hébergement via NeoCities et sur le concept de base des noms de domaine..
NeoCities est un fantastique et gratuit option d'hébergement de fichiers simple sur le Web; bien que nous ayons toujours besoin d'une adresse email pour nous inscrire!
Passons en revue les étapes pour obtenir nos fichiers hébergés ici:
Voici un aperçu du site NeoCities: tutsplustown.neocities.org
Un autre avantage de ce service est que nous n’aurons pas besoin de passer par le processus d’achat et de configuration du domaine (adresse personnalisée pour les sites), bien que nous abordions également la façon de procéder..
Important! Il est possible d'utiliser un nom de domaine personnalisé avec NeoCities en allant dans les paramètres du site après la configuration initiale et en suivant les instructions fournies. bien que cela nécessite actuellement un compte amélioré pour 5,00 USD par mois.
Les domaines sont les adresses personnalisées vers lesquelles nous référons les personnes afin qu'elles puissent visiter un site. Cette étape n’était pas nécessaire lorsque nous avons hébergé les fichiers de notre site sur NeoCities, car elle nous avait créés une adresse spéciale. Cependant, si nous cherchons à avoir un nom de domaine vraiment personnalisé (tel que tutsplustown.com par exemple) nous devrons acheter ce nom.
Comme pour notre nom d'utilisateur NeoCities, notre nom de domaine devra également être unique; il peut prendre un certain temps pour trouver un nom qui n'est pas déjà pris.
Voici quelques services qui nous permettent d’acheter des noms de domaine une fois que nous avons créé un compte:
La dernière étape de la configuration d’un domaine personnalisé peut être complétée par le service d’hébergement (comme Neocities ou BitBalloon mentionné ci-dessous) une fois les fichiers transférés..
Si nous choisissons de ne pas utiliser NeoCities, quelques autres sociétés d’hébergement se distinguent par leur coût particulièrement abordable et leur facilité d’utilisation, mais BitBalloon est peut-être celle qui se démarque le plus pour ces raisons..
BitBalloon est gratuit mais le paiement doit inclure un domaine personnalisé, un peu comme NeoCities. La facilité avec laquelle les fichiers peuvent être glissés et déposés dans l'interface en fait une option très intéressante pour les sites de base comme Tuts + Town..
Une fois les fichiers transférés, nous pouvons compléter le processus de configuration du domaine personnalisé à l'aide des outils du tableau de bord de BitBalloon..
Notre site Tuts + Town a sa propre adresse qui a été obtenue et configurée de la même manière que celle que nous venons de décrire: tutsplustown.com.
Bien que cette série fournisse une introduction à la conception Web, nous risquons de vouloir rapidement faire progresser nos compétences pratique, pratique, pratique les sujets que nous avons examinés ici.
Le livre «Construisez votre propre site Web, Un guide de la bande dessinée pour HTML, CSS et Wordpress» de Nate Cooper fournit une base solide pour la création d'un site à travers une histoire amusante racontée dans un format bande dessinée.
Shay Howe a écrit une série de didacticiels détaillés sur les langages HTML et CSS de niveau débutant et avancé:
La conception Web réactive fait référence à la conception de sites qui prennent en compte différentes tailles d'écran. Nous passons beaucoup de temps sur nos smartphones, par exemple, et en tant que concepteurs, nous devons nous assurer que notre site fonctionne sur ces écrans plus petits et sur un écran de bureau complet..
Il y a un tutoriel fantastique pour débutant par Shay Howe sur le sujet.
Nous avons utilisé les pixels tout au long de cette série comme unité de mesure sur le Web. L'utilisation de pixels est tout à fait acceptable lorsque vous commencez. Cependant, plus vous obtenez d'expérience, plus vous vous rendrez compte à quel point ils sont limitants. C'est une unité de mesure aussi inflexible qui ne fonctionne pas bien dans un design réactif.
En termes de conception pour différentes tailles d’écran, il existe plusieurs alternatives plus flexibles que les pixels, telles que pourcentages et rems.
Bien que nous ayons brièvement parlé de flexbox dans le tutoriel CSS Layout, nous pouvons en faire beaucoup plus avec les présentations qui l’utilisent. Il existe quelques super endroits pour en apprendre davantage, comme ce guide complet sur Flexbox et un schéma de feuille de notes Flexbox.
En ce qui concerne la mise en page dans son ensemble et pas seulement la flexbox, il existe un petit site soigné qui nous aide à parcourir les bases.
Bien que nous puissions apprendre beaucoup plus pour renforcer et développer nos compétences en conception Web, nous avons accompli beaucoup de choses tout au long de cette série et nous avons maintenant une bien meilleure compréhension des bases pour la conception et la construction d'un site..
Nous avons officiellement donné vie à un site Web à partir de croquis papier pour en faire un site réel avec sa propre adresse Web; tout dans la journée d'un concepteur de sites Web!
Notre site Web Tuts + Town servira de guide agréable et facile à utiliser pour les touristes qui envisagent de le visiter, alors merci pour tout votre travail..
Accentsconagua