Projects
HTML, CSS, and JavaScript
Scroll ↓
Often, UX professionals who don’t understand development create interfaces that are unrealistic or difficult for developers to put together. Because I have some education in developing websites and programs, I have a deeper understanding of development constraints that apply to UX projects.
Why show my coding and mark-up experience?
One page with four widths
Class names are not permitted, in order to practice with pseudo-classes
The width of Henry 8th in each width is required, and the total width of the body is determined based on that by the student
Henry width 1: 18em
Henry width 2: 27em
Henry width 3: 44em
Henry width 4: 64em `
Extra credit: make the names of Henry and each of his wives appear when hovering over their image and apply filters to make the images more cohesive
RWD: Grid
-
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;
}
Build two live pages: one using grid and one using flexbox
4 required parts: header, navigation, footer, limerick, and image
The 3rd and 4th limerick lines must be indented
3 responsive layouts
No using classes or IDs (to practice with selectors)
Live pages should look the same whether laid out with Grid or Flexbox
RWD: Grid and 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
The user provides a number, chooses a currency and an amount of decimal places, and click “Go”
The pop-up div includes a salutation, a conversion (full sentence) and a farewell
The salutation changes based on time (before noon, “Good morning!”, after noon and before 4pm “Good afternoon!”, after 4pm “Good evening!”)
The number of decimals determines how many decimals will be provided in the converted amount
The conversion sentence includes the amount entered by the user, the conversion, and the currency converted to, and is displayed using innerHTML
This project was done for class that did not teach very much CSS, so styling was added after for better visuals