Unless specified in the exercise, don't worry about the fonts. Some of the screenshots were taken on Linux and the base system font is a little different.
- Open the provided index.html file in the browser.
- Modify the
style.cssfile to match the following image
- background color is
blue - properties used:
padding,border,background,color,border-radius.- HINT: you need to remove the default border.
- Don't worry if your font looks different
- Open the provided index.html file in the browser.
- Modify the
style.cssfile to match the following image
- Colors used are
pinkandfuschia - text size is
5emfor the last line. - Don't worry if your font looks different
- Open the provided index.html file in the browser.
- Modify the
style.cssfile to match the following image
Properties you will likely need
font-size
font-style
font-family
text-align
- You will need to use the Comic Sans MS font-family
The style.css file contains errors. Modify that file, and only that file, to produce the following output:
The style.css file has been corrupted. Repair the CSS so that the page matches the image below.
No modifications to the HTML file.
Add the CSS needed to reproduce this page.
The exact measurements are not needed. Try and estimate the values (colors, font-sizes, etc).
Complete both the HTML and CSS files to reproduce the following web page:
It isn't necessary to make it pixel perfect.
🟡 - Minimally complete workshop (75%) - 🟡
Update the CSS file to reproduce the following:
display
visibility
Update the CSS file to reproduce the following:
- The alpaca stays at the top left of the screen but must appear in front of the cat image
- The cat is moved to the top left of the screen
- The dog must be 50% away from the top and from the left of the screen and always stay there (even when scrolling down)
- The whales must be moved to the bottom left of the screen
z-index
top
left
position
bottom
right
🟢 - Complete workshop (100%) - 🟢
Using CSS, create a button that animates on hover:
- It should color to a dark-blue when focused. It should not have the typical "focus ring" (blue outline on MacOS, dotted outline on Windows).
- It should shrink when the mouse is held down on it.
- It should be animated
- You'll need the
:activeand:focuspseudoselectors - You'll also need to use the
transform: scaleproperty for the size change, and thetransitionproperty for the animation. - You can disable the outline with
outline: none, but you should only do this if you have an alternative focus state. That outline is very important for keyboard users, to know which element is focused.
- https://css-tricks.com/almanac/selectors/a/active/
- https://css-tricks.com/almanac/selectors/f/focus/
- https://css-tricks.com/almanac/properties/t/transition/
- https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale