Screencasts vidéo 2025, Février
Nous avons ces huit onglets de navigation de niveau supérieur, mais Accueil est le seul qui «fonctionne». Juste pour que nous ayons quelques pages avec lesquelles travailler, nous ajoutons quelques pages pour "
Aussi loin que je me souvienne, j'ai utilisé Google Code Prettify pour appliquer la coloration syntaxique sur le bloc de code sur CSS-Tricks. Vous savez, où dans une ligne comme "
Nous venons d'installer Prism.js et de le faire fonctionner. Dans ce screencast, nous trouvons un thème appelé Thème de demain et intégrons ses couleurs dans la syntaxe "
Nous avons fait un peu de travail sur les en-têtes, mais nous approfondirons ceux-ci dans ce screencast. Les en-têtes sont un aspect très important de tout site. Bien fait,"
Maintenant que nous avons une zone d'articles de blog avec laquelle travailler, nous pouvons vraiment entrer dans la typographie des articles de blog. Sans doute la typographie la plus importante du site car c'est "
Je pense que c'est très agréable d'avoir un fichier individuel (.scss) qui correspond à la grande majorité de la typographie sur le site. Normaliser a un peu de typographie "
Typecast (en version bêta au moment de ce tournage) est une application Web vraiment soignée pour jouer avec la typographie Web. Cela vous donne une excellente interface pour jouer "
Poursuivant le concept de "Don't Overthink It Grids", nous obtenons des gouttières dans la grille en utilisant simplement un simple rembourrage. Nous conservons le numéro de remplissage "
Avant de faire un travail de typographie, j'ai pensé que nous corrigerions la chose ennuyeuse où les images éclatent en dehors de la zone d'article et de la grille. Utilisant"
Maintenant que nous exécutons un domaine local personnalisé, nous pouvons utiliser PHP. Le "P" dans MAMP est pour "PHP" =). Utiliser PHP signifie que nous pouvons utiliser des includes. Par exemple: notre "
Nous pourrions écrire notre propre Sass @mixins pour aider avec des trucs CSS3 (comme des dégradés), mais il existe un framework Sass qui existe déjà appelé Compass qui "
La conception du site est en train de ressembler à une grille. Nos modules seront disposés très proprement dans une grille. Mais les grilles ne sont-elles pas complexes et étranges? Et peut-être que nous "
Dans ce screencast super rapide, nous utilisons MAMP pour configurer une URL que nous pouvons utiliser pour le développement local. Ceci est utile pour plusieurs raisons: nous pouvons créer un lien vers "
Nous introduisons le concept de requêtes @media en CSS. Une grande partie de ce que l'utilisation de Sass sur ce projet nous permet de faire est de rester SEC (ne vous répétez pas). Nous faisions"
Nous commençons par modifier un peu le type de logo, puis passons à l'ajout d'icônes dans la navigation principale. Lors de la conception de la navigation dans Photoshop (vidéo "
Nous avons mis en place un nouveau kit dans Typekit pour la v10. Pour le branding, nous utiliserons Proxima Nova Soft pour le moment et quelques autres polices qui ressemblent autant aux polices HF&J dans notre "
Jusqu'à présent, le site Web ne ressemble pas du tout à notre conception Photoshop. Dans ce screencast, nous cherchons à faire exactement cela, en commençant par le haut avec "
Nous utilisons quelques astuces de positionnement pour aligner le bord gauche du logo et la zone de contenu principale, tout en laissant l'en-tête toucher le bord gauche du "
La suppression du CSS de l'agent utilisateur (par défaut) de la plupart des éléments est généralement une bonne idée. Cela a longtemps été fait par des réinitialisations "universelles" ou des choses comme Eric "
En regardant notre maquette Photoshop, nous écrivons commencer à écrire du HTML pour décrire ce que nous recherchons. Nous utilisons bien sûr HTML5 chaque fois que cela se produit "
Nous commençons à déposer le texte dans la navigation principale, juste pour voir comment il s'adaptera, travailler sur le dimensionnement, les couleurs, etc.
Nous n'avons certainement pas "fini" dans Photoshop pour toujours cette conception, mais nous avons suffisamment de travail pour commencer à créer cette conception dans le navigateur. Après"
Nous commençons à concevoir la navigation de premier niveau (principale) du site. Nous commençons par l'écran de la taille du bureau (à une largeur certes arbitraire) mais nous sommes "
Nous ajoutons quelques couches supplémentaires sous l'en-tête principal / la boîte de marque pour donner l'aspect «pile de papiers». Pas de grande métaphore ou quoi que ce soit, ça ajoute juste du visuel "
L'ensemble du site sera basé sur des «modules». Chaque petite chose va être littéralement dans une boîte (à la fois visuellement et dans le code, finalement). Nous"
Il s'agit d'un enregistrement audio d'un appel Skype entre Erin Kissane et moi-même. Erin a écrit le livre sur la stratégie de contenu, j'ai donc eu la chance de pouvoir obtenir son aide et "
La conception dans le navigateur est cool et tout, mais commencer dans Photoshop me permet d'être le plus créatif lorsque j'en ai le plus besoin: face à la toile vierge. "
Bienvenue! Ce sera tout un voyage, et comme tous les voyages, celui-ci commence par un seul pas. Notre première étape consiste à inventorier un peu de "
Cette refonte n'est pas une refonte juste pour le plaisir de la refonte. Je veux améliorer le site de toutes les manières imaginables que vous pouvez améliorer un site. L'un des"
Nous avons déjà parlé d'optimiser le SVG à la main. Faire des choix manuellement sur les détails et sur les types d'éléments pouvant être combinés ou supprimés. Dans ce"