Scribd
Upload
86 views1 page

Project 4: Lawn & Order: Literal Articulation

The document provides instructions for recreating a website layout exactly as shown on a provided URL. It instructs to print the site, diagram tag usage and nesting, and write efficient HTML and CSS code broken into logical parts and sections for easy grading.

Uploaded by

kpduffy
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
86 views1 page

Project 4: Lawn & Order: Literal Articulation

The document provides instructions for recreating a website layout exactly as shown on a provided URL. It instructs to print the site, diagram tag usage and nesting, and write efficient HTML and CSS code broken into logical parts and sections for easy grading.

Uploaded by

kpduffy
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Visual Tech

design studio

Kevin Duffy [email protected]

project 4

Lawn & Order: Literal Articulation


Recreate (code) a website that resembles exactly what you see at kpduffy.iweb.bsu.edu. Directions

Remember Coding is language and writing it is a process of translation, so dont expect the code to just pour out of your head through your finger tips (yet). Set yourself up! Create diagrams and make notes for yourself to translate from brain to paper to code. So when things break (and things will break), you have a document to check your work againstwork outside of your head.

PART 1: Create a road map. Print the site, think about tag usage and nesting. Create a diagram to translate into HTML code. Try to anticipate discrete pieces of content that you know you will need to target. Be sure to write your code efficiently so it is easy to correct problems, and so it is easy for me to grade. That means, breaking your lines, dropping closing tags down, and nesting your code visually using the tab key. PART 2: Write your HTML code. Here are the base requirements: Website width 1000px Left and right spacing (margin or padding) 30px Use a CSS reset - I suggest the Eric Meyer reset in resources on Blackboard Use this basic HTML structure to begin: <header>tag inside of your <body> <nav>tag inside of your <header> <ul>tag inside of your <nav> this is how you create the navigation buttons <a>tag inside of your <li> this is how you make the navigation buttons links You dont have to link to other pages, but you do have to make the buttons links, and style them using pseudo elements. PART 3: Write your CSS code. Make changes to your HTML as you need to target items more specifically to style. Check your work in all browsers to And again, write your code efficiently so it is easy to correct problems, and so it is easy for me to grade. Remember! This is language and a process of translation, dont expect the code to just pour out of your head through your finger tips (yet). Set yourself up! Create diagrams and make notes for yourself to translate from brain to paper to code.

You might also like