Skip to content

Assignment 1: Jesenia F. #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Maix99 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Assignment 1: Jesenia F. #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ae22b9
adding titles to index.html
Maix99 Jan 27, 2014
c973e81
edited the assignment in an HTML format
Maix99 Feb 3, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Assignment One: Q & A in HTML.</title>
Copy link
Owner

@profstein profstein Feb 7, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the ampersand & character is used in other ways in HTML it won't be valid if you just write it out. Instead use the character entity: &amp; wherever you want it to appear.

</head>
<body>
<h1>Assignment 1: Q & A in HTML.</h1>
<h2>Jesenia F.</h2>

<div id="questions">
<p><strong>Do you consider yourself more of a designer or developer (or something else, other answers are acceptable)?</strong><br>
Copy link
Owner

@profstein profstein Feb 7, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I would like you to rethink is which elements you use. You really want to accomplish a few things with the markup:

  1. show that the question and answer are a pair (related elements).
  2. Have something be different between the two so that you can style the questions differently than the answers.
  3. Use semantic markup as much as possible.

I should say up front that there is no perfect answer for how to mark up this assignment — see this discussion. There is no Q&A element in HTML5. So I'm more looking that you have made an effort to do the three things above.

In some respects you have done 1 and 2 above. You wrapped both in a <p> element which shows they are a pair and your wrapped the Q in <strong> and the A in <i> so they are different. The problem is with 3, the semantics. The strong and i don't really capture the semantic meaning of the questions and answers.

There are a number of different ways you could do this. You could use divs and headings like

<section class="QA">
    <h3>question</h3>
    <p>answer</p>
</section>
<section class="QA">
    <h3>question 2</h3>
    <p>answer 2</p>
</section>

Or you might use a definition list:

<dl>
    <dt>Question here</dt>
    <dd>answer</dd>
    <dt>Question  2 here</dt>
    <dd>answer 2</dd>
</dl>

<i>I consider myself more in line of development rather than the designing field.</i></p>

<p><strong>What are you most interested in learning in this class?</strong><br>
<i>I would like to learn more on photoshop since I lack experience with the program and to get used to using commits from Github when keeping track of project changes.</i>

<p><strong>What is good design?</strong><br>
<i>A good design is simplicity, nothing too drastic, a lot of whitespace and easy on the eyes.</i>

<p><strong>What is good web design?</strong><br>
<i> I like a lot of white space, nuetral scheme and having your content that you want the audience to focus on be at the center (fixed) so it's easier for the audience to see exactly want you want them to.</i>
</i>

<p><strong>What are the good examples of conference/event web sites? Answer by listing at least two sites including each URL and why you chose the site.</strong><br>
<ul>
<li>http://2013.buildconf.com:</li>
Copy link
Owner

@profstein profstein Feb 7, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great sites and answers. Just turn the link to the site into an actual <a></a> link.

<i>What I love about the layout is the fact that the color scheme are not too blinding towards the eye. You have the schedule on the left column and the content on the middle/right side of the page. Nothing too fancy, just simple and easy to follow. A very simple navigation bar on the top as well.</i>

<br><br>

<li>http://2012.hd-live.co.uk</li>
Copy link
Owner

@profstein profstein Feb 7, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above.

<i>What I love about the layout is that the center of the navigation shows the name of the section you've clicked/scrolled throughout the page. It is still somewhat simple though it has a bit more graphics. The content is in a beehive design but it meshes well with the boldness of the color scheme. It's not really all over the place, the content is still focused on the middle of the web browser. Each section has a different color scheme but keeps the layout pretty much within the same design (images within the beehive/pentagon shapes, image within the shape and text elibile to read) Also the letter spacing helps make the text easier to read.</i>
</li>
</ul>
</div>
</body>
</html>
20 changes: 20 additions & 0 deletions instructions
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
DELETE THIS LINE -- convert everything else to a valid, semantic HTML page and answer the questions

Your assignment is to answe the following questions in an HTML file. Part of the assignment is answering the questions and part of the assignment is to answer them in a valid, semantic HTML page.

Assignment 1: q @ A in HTML.

Your name




Do you consider yourself more of a designer or developer (or something else, other answers are acceptable)?

What are you most interested in learning in this class?

What is good design?

What is good web design?

What are the good examples of conference/event web sites? Answer by listing at least two sites including each URL and why you chose this site.