Assessment

Your entire mark will depend on the final social media profile page you create and its overall presentation. Note that not only the web page should look good, your mark will also depend on the quality of the code you write. This means things like paying attention to the indentation, how well your HTML classes are named and so on.

In total there are 100 marks to be earned.

20% Navigation Bar

HTML:

  • 1 mark for correct HTML code and structure.
  • 1 mark for correct use of the id attribute.
  • 1 mark for correct linking to the stylesheet.
  • 2 marks for correct use of the class attribute.

CSS:

  • 1 mark for using the hash character.
  • 2 marks for manipulating the text of the navigation bar.
  • 3 marks for correctly using features to make the layout more presentable.
  • 4 marks for the correct implementation of the hovering.

Animation of the navigation bar:

  • 3 marks for implementing webkit.
  • 2 marks for each use of a property of webkit.

25% Profile Photo and Cover Photo

  • 5 marks for successfully creating the HTML and CSS files and writing the code
  • 5 marks for having a working slideshow cover
  • 5 marks for having a working title effect
  • 5 marks for having the photo centered and resized to fit
  • 3 marks for changing the cover photos
  • 2 marks for changing the profile photo

20% About Page

20 marks total

  • 12 marks (Binary marking) - For implementing the basic features in the tutorial
  • 4 marks - For adding more menu items
  • 2 marks - For changing any design element
  • 2 marks - For adding lots of extra personal information (apart from the ones mentioned in the tutorial)

25% Image Gallery

  • 10 marks for a working lightbox
  • 5 marks for a gallery with working thumbnails
  • 5 marks for a gallery with a grid structure
  • HARD: 5 marks for a lightbox with a caption

10% Code Quality

  • Proper HTML structure [2 marks]
    • 2 marks - All tags like <!DOCTYPE html>, <html>, <body>, <head> are used correctly
    • 1 mark - Some tags used correctly
    • 0 marks - Few or none tags used correctly
  • Proper Indentation of HTML, CSS and JavaScript [2 marks]
    • 2 mark - Perfect indentation
    • 1 mark - Some indentation
    • 0 marks - No indentation
  • Attributes and Tags [1 mark]
    • 1 mark - All tags and attributes are written in lowercase
    • 0 marks - Not all are written in lowercase

  • Quotes [1 mark]

    • All HTML attribues use double or single-quotes e.g.

      Correct:
      <a href="http://example.com/" title="Description Here">Example.com</a>

      Incorrect:
      <a href=http://example.com/ title=Description Here>Example.com</a>

  • JavaScript Variable Naming [2 mark]

    1 mark awarded for each:

    • Variable names use camelCasing
    • Variable names are descriptive of their purpose, and are not just called var x

  • CSS Formatting [2 marks]
    1 mark awarded for each:

    • Alphabetized declarations.

      Put declarations in alphabetical order in order to achieve consistent code in a way that is easy to remember and maintain.

      background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

    • Use a space after a property name’s colon.

      /* Incorrect */
h3 {
  font-weight:bold;
}
/* Correct */
h3 {
  font-weight: bold;
}

Return to the index