Basic HTML & CSS Assignment
Due: Thursday January 31
For this assignment, you will need a text editor. I recommend Atom, Sublime Text, or Komodo Edit (not Komodo IDE). These are all free and easy to download. Do not try to do this assignment in Word, Google Docs or other wordprocessing programs. Word processors add extra formatting information that will mess things up. Text programs like Notepad and TextEdit should also be avoided.
For the text for this assignment, you can use your answers to the Intro post, your CV, a little blurb about yourself, whatever you like. You’ll also need an image that you can upload online.
If you get stuck or want to chat about your awesome color palette, comment in the #htmlcss Slack channel.
Lesson 1: HTML
Lesson 2: CSS
Lesson 3: Uploading your HTML & CSS files to WordPress
Your page should include:
- At least three colors
- At least one header (h1, h2, h3, etc)
- At least two divs with different classes which are styled differently
- At least one link
- Something with a border
- Something with padding
- Something with margin
- Two Google fonts: one for the body and one for the header
- At least one image
Extra credit:
- Ask a question in the Slack channel
- Answer someone else’s question in the Slack channel
- Be the first to post your files
- Figure out how to do something which is not mentioned in the lessons!
- Make the eye-burning ugliest page possible, as voted by your classmates.
Comment below with a link to your page once it’s uploaded! Use your new coding skills to write a pretty link using <a href=”[link text here]”></a>!
Please let me know anonymously if there’s any way this lesson format could be improved for you.
Adapted from lessons by Miriam Posner and Jarah Moesch.
26 Comments
Maeve Kane
This is my beautiful new page!
Pingback:
tluneau
Here is my html page! http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Luneau-intro.html
jporter
Behold, the magnificent website inspired by Geocities! http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/joshua-intro.html
(It has an Easter Egg!)
scarlatte28
I hope we all learn something from this webpage. #libraryadvocacyday http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Rapp-Intro.html
dpetty
Certainly not a wizard, but I did all of the things, and I only hit my head against the wall twice! #noproof #bigblueconspiracy http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Petty-intro.html
dpetty
Thanks to Josh now Im a wizard
cmeyer
Here’s my page 😎
(for the about me you have to hover over the image!)
mmarthage
My page
amnoble
Here’s my page: http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Noble-Intro.html
acpartridge
My page.
acpartridge
http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/partridge-intro.html
jdaldrich
Here is my new page!
jdaldrich
http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Aldrich-Intro.html
eburkhart
Here is my page! http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Burkhart-intro.html
jgrobe
Here is my page: http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Grobe-intro.html
Unfortunetly, I could not get the music to work
pricek
Here is my abomination of an HTML page.
This is also an epilepsy warning. My page has pretty heavy flashing lights and effects.
http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Price-Intro.html
John Epp
Here is my page: http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Epp-intro-3.html
Unfortunately, I had difficulty with resolutions and positioning. My center image does not seem to show up in this link despite working just find when opening the html file directly from my files. Here is the link for that image: http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Dan-and-I-at-Yankee-stadium.jpg
Jesse
My page file:///home/chronos/u-bee58d56e856368da4cc0b7d8ea13cf61e8d1766/Downloads/jessearagona.html
Maeve Kane
Jesse, you’ve linked us to a file on your computer–which we can’t access because it’s on your computer! See part 3 of the lesson for how to upload your files to the course site.
Jesse Aragona
My page , hopefully file:///home/chronos/u-bee58d56e856368da4cc0b7d8ea13cf61e8d1766/Downloads/jesse%20folder1/jessearagona.html
sshivers
http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Shivers-intro.html
sescott
Here it is! http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/01/Scott-intro.html
omccarty
My page
jaragona
My html site http://2019-dh-practicum.maevekane.net/wp-content/uploads/sites/18/2019/02/jessearagona.html with an actual working link? I hope
Maeve Kane
Link works and looks great! 🙂