Projets
HTML, CSS, et JavaScript
Faites défiler ↓
Souvent, les UX designers qui ne comprennent pas créent les interfaces irréalistes ou difficiles à développer. A cause de mes compétences en développement des sites web et des logiciels, j’ai une compréhension plus profonde des contraints du développement qui sont pertinents aux projets d’UX.
Pourquoi vous montre mes expériences du developpement et du codage ?
Site web adaptif: CSS grid
Une page web avec quatre largeurs fixes
Les sélecteurs de classe sont interdits pour pratiquer les pseudo-classes
La taille d’Henry VIII est obligatoire pour chaque largeur, et l’étudiant.e. détermine la taille totale du corps basée sur cela d’Henry VIII
Largeur 1 d’Henry VIII: 18em
Largeur 2 d’Henry VIII: 27em
Largeur 3 d’Henry VIII: 44em
Largeur 4 d’Henry VIII: 64em
Points supplémentaires : faites apparaître les noms d’Henry et chaque femme en passant la souris sur l’image. Utilisez les filtres pour faire cohésive les images.
-
div {
display: grid;
grid-template-columns: 12em 12em;
grid-template-rows: minmax(min-content, max-content)
repeat(5, 12em);
gap: 1em;
justify-items: center;
grid-template-areas:
"header header"
"catha anneb"
"henry henry"
"jane annec"
"cathh cathp"
"crest crest";
width: 25em;
margin: 1em auto;
}
Construisez 2 pages, un avec Grid et un avec flexbox
Les quatre parties obligatoires : l’en-tête, le pied de page, l’image, et le limerick
Le troisième et quatrième ver du limerick doit être en alinéa
3 mises en page adaptives
Les sélecteurs de class ou d’ID sont interdits
Les pages doivent être les mêmes qu’elles soient construites de Grid ou de flexbox
Site web adaptif: CSS grid et flexbox
-
/*grid*/
@media screen and (min-width: 40em) {div {
grid-template-columns: calc(45%) calc(40%);
grid-template-areas:
"header header"
"nav nav"
"section figure"
"footer footer";height: 90vh;
}
}
/*flexbox*/
@media screen and (min-width: 40em) {
div:first-of-type {
height: 90vh;
}
section {
flex: 0 1 45%;
}
figure:last-of-type {
flex: 0 1 40%;
}
nav {
align-content: center;
}
}
JavaScript
L’utilisateur donne un chiffre, choisit une devise et un nombre des décimales, et clique “Go”
Le div qui apparaît doit inclure une salutation, une conversion comme une phrase complète, et un adieu
La salutation doit changer par le temps: avant-midi, “Good morning!”; après-midi, “Good afternoon!”; et après 16 h, “Good evening!”
Le nombre des décimales sélectionné détermine le nombre des décimales après une conversion
La phrase de conversion inclut le chiffre donné par l’utilisateur, la conversion, la devise en qui le chiffre est converti, et est affichée avec l’innerHTML
Ce projet était fait pour un cours qui n’apprend pas le CSS, donc la ligne de la page était ajoutée après le cours