Skip to content

BAOYAN XIE #8

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
baoyanxie wants to merge 4 commits into
base: master
Choose a base branch
from
Open

BAOYAN XIE #8

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
163b80b
added index and modified readme
baoyanxie Feb 3, 2014
1a4e1d6
added index and modified readme
baoyanxie Feb 3, 2014
9bb935b
added index and modified readme
baoyanxie Feb 4, 2014
43e58b9
the newest one
baoyanxie Feb 10, 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
60 changes: 60 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 1 Chris Stein </title>
Copy link
Owner

@profstein profstein Feb 8, 2014

Choose a reason for hiding this comment

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

There's nothing wrong with what you have so far but you are missing a meta tag that should be in the head:
<meta charset="utf-8">
This is important to let the browser know how to deal with characters and this particular charset, utf-8, handles many languages.

</head>

<body>
<header>
<h1>Assignment 1: Q & A in HTML</h1>
Copy link
Owner

@profstein profstein Feb 8, 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.

<h2>BAOYAN XIE</h2>
</header>
<div class="QA">
<h3>Do you consider yourself more of a designer or developer (or something else, other answers are acceptable)?</h3>
<p>I would consider myself more of a designer because i like creating things and i found my passion and confidence for design.</p>
</div>

Copy link
Owner

@profstein profstein Feb 9, 2014

Choose a reason for hiding this comment

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

You've done some good things with the QA markup.

  • You've kept it consistent
  • You marked up the Qs different than the As

Overall, you want to accomplish a few things with the markup of the questions and answers:

  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.

You have 2 and 3, you just need something for 1 showing they're a pair. You can use a grouping element like a section or div to do that:

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

or

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

<div class="QA">
<h3>What are you most interested in learning in this class?</h3>
<p>In order to be proficient, I'm most interested in learning more professional coding methods to make my web design as perfect as possible.
For instance, I would like to learn css and Javascript in this class.</p>
</div>

<div class="QA">
<h3>What is good design?</h3>
<p>In my view, I think a good design should be creative and fulfill its purpose, well organized, has a nice layout, provides useful information,and looks good.</p>
</div>

<div class="QA">
<h3>What is good web design?</h3>
<p>A good web design should be simple that the structure is easy to follow and it is functional.
Also, a good web design should have its particular focus which can catch users' attentions and gives lots of details for users.
It is aesthetic with a nice scheme and gives users great visual experience.
All design elements have to be consistent making everything match, such as heading sizes, font choices, photo choices, button styles,
spacing,coloring, and illustration styles.</p>
</div>

<div class="QA">
<h3>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.</h3>
<p><a href="http://2012.inspireconf.com/">http://2012.inspireconf.com/</a><br>
First of all, i like the cute drawing. The colors are bright and soft. My eyes are confortable with this nice color combination.
The purpose is clear that i can get the idea immediately. It provides useful information about the craftsmanship event
like the details about the event, the introduction of the workshops and sponsors, and the history of its location.
All of these are necessary explanations. Moreover, the structure is simple. While i'm moving down of the page, it is easy to identify
the change of topics with different colors and designs. Overall, this web design is successful.</p>

<p><a href="http://mashable.com/media-summit/#media_summit">http://mashable.com/media-summit/#media_summit</a><br>
This web site looks clean that directly points out everything in one page. The layout is basic, but it is useful.
It has a good color choice;use active colors. The purpose of the page is clear and the information is detailed with good explanations.
In this page, the agenda is full of text. Even though it doesn't attach any photos, it has concordant space between each scheduel and the
type is the same. Also, the primary and secondary information are marked by different colors. The agenda doesn't look disordered.
I would like to view a web site like this because everything is straightforward and it is convenient to use just by scrolling up and down.</p>
</div>

</article>
</section>
</body>
</html>