Skillz: Ugly Page
We’ve been picking up some CSS decorating methods like borders, border radius, colors, backgrounds, etc. The best way to get a feel for how any of these behave is to push the styles to their limits. The best way to do that is to create the ugliest page you possibly can. On purpose.
Remember: with great power comes great responsibility. Sometimes though, it’s still fun to take a joy ride slinging webs among skyscrapers.
Create a basic HTML page. The files from Bare Naked HTML5 or Gotta Keep ’em Section-ated can be repurposed for this. Just be sure to save as a new file so as to not overwrite your previous work. Use CSS3 decorations and go nuts, making the page as ugly as possible. (It’s okay. Really.) Any CSS3 style that can be used for altering how an element looks can be used. Prizes awarded for ugliest page submitted. Oh, and as always, be sure to look at your ugly page in as many browsers as possible. It’s useful to know how these styles can behave in different browser environments.
Need help figuring out what you can use? The following links point you to possible styles to use and how to use them.
- Color and transparency (MDN)
- Borders (MDN) and rounded corners (MDN)
- Backgrounds (MDN) and multiple backgrounds (MDN)
- Drop shadows (MDN)
- Gradients (MDN)
Also consider checking out CSS-Tricks.com.
- Examine and explore CSS styles used for decorating HTML elements.
Materials & Technology
- Color-coded text editor
- Web browser(s)
- Student web hosting account
- HTML file and linked CSS file, uploaded and posted to student portal
- URL to HTML file submitted to corresponding dropbox basket in eCompanion