Assignment 1: Static Web Design
(for Programmers and Designers)

Part 1 Due: Monday February 4th 2019 @ 11:59pm
Parts 2 & 3 Due: Thursday Februrary 7th 2019 @ 11:59pm

Introduction

excited puffles

This is a multi-part assignment with the objective of making you comfortable working with HTML and CSS. By the end of this assignment, you will have styled some rectangular blocks, created a simple version of Twitter's home page, and created a website of your own.

If this assignment seems overwhelming to you, please come see a TA at TA hours to talk through some strategies for tackling it. This assignment has been designed so that it is feasible for both concentrators and non-concentrators to complete in a reasonable amount of time.

Note: Only CSS and HTML need to be used for this assignment. If you want to use JavaScript (or libraries such as jQuery) then feel free to, but we will be only grading correctness on your CSS and HTML.

Part One

Setup

If you are using a department machine, run cs132_install assignment1_1 to get started.

The script will create a assignment1_1 directory in /gpfs/data/course/cs1320/your_cs_login/

If you are using your own computer, download the zip of the stencil here to get started

The stencil code should provide you an HTML and CSS file for you to work on.

Specifications

Now that you understand some of the basics of HTML and CSS, lets take a look at how to align HTML elements. There are multiple ways to align HTML elements, but in this part, we recommend using flexboxes as they are widely used in modern web development (BootsrapV4 for example is built on top of flexboxes).

Refer to this great webpage on how to use flexboxes: CSS Flexbox Guide

Also feel free to use online resources such as Stack Overflow, W3, and Google.

When you open the provided HTML file, it should look like this:

As you can see, there are 9 rectangles. The styling and makeup of the first two rectangles are already built for you. Your task is to add div elements inside of the next 7 green rectangular blocks to create a webpage that looks like this:

The examples we provided with the first two rectangular blocks use flexboxes. You are not required to use flexboxes for the next 7, but we recommend it as it will also be useful in part 2 of this assignment

You should only have to use the div html element to complete this assignment. Also, none of the divs you create inside of the provided wrapper divs should have background-color: green;

Try to style the boxes as closely to the solution image as possible. However, the colors and size of the boxes do not matter that much so don't worry about getting exact dimensions or rgb values

We will be grading solely on how your solution looks rather than the code so if it matches, you should get full credit

Handin

If you used a department machine, run the handin script cs132_handin assignment1_1 to submit your code.

If you used your own computer, transfer your files to a department machine and submit there. Refer to our remote setup instructions under the Docs page.

If you are confused about this (especially if you are a non-concentrator or RISD student) please ask clarifying questions on Piazza, or come to TA hours. If you still cannot quite figure out how to run the script you can email us a zip file of your code at cs1320tas@lists.brown.edu. Going forward we will expect you to be able to run the handin scripts but for now we know that working with the terminal/on linux machines can be confusing for first time users.

Part Two

Setup

If you are using a department machine, run cs132_install assignment1_2 to get started.

The script will create a assignment1_2 directory in /gpfs/data/course/cs1320/your_cs_login/

If you are using your own computer, download the zip of the stencil here to get started

Any images you'll need can be found in the images folder, which can be referenced as ./images (when CSS is in its own file, URLs are relative to the CSS file, not the page its loaded on). All of your html should go in the index.html file and All of your CSS should go in the index.css file.

Specifications

For this assignment, we want you to use HTML and CSS to create a static web page based off of twitter as below. We chose to use twitter because later in the course you will be dynamically fetching tweets from a server. So we figured it would be fitting to create the user interface for it beforehand:

Feel free to go on twitter and use your browser’s inspect element to see how they do font sizes, font weights, margins, paddings, text colors, and background colors (Here's our guide to using the inspector). Our solution is a bit different than twitter’s architecture because twitter’s HTML/CSS setup is way too complicated for a simple web mockup. However, if you try to copy Twitter’s code instead of creating the HTML elements yourself, you’ll end up spending way more time trying to figure out what each div does and how to decipher their massive styling code base.

For those who do not use Twitter, here’s a link to a Club Penguin-friendly twitter account: https://twitter.com/_CPOnline Most of the minor styling details you could want are here despite it being a profile account rather than the Twitter feed

We have put together some hints that you’ll probably find helpful. We also encourage you to use online resources to help with styling issues

Note: Don't worry about getting the font sizes or font colors exact. That being said, the blue color used in the mockup is #4AB3F4 and the light gray background color is #e6ecf0

This web page contains five parts: header (1), content-wrapper (2), content-left (3), content-middle (4), and content-right (5):

1. header

Twitter's header is fixed which means when you scroll down, the header remains at the top of the webpage. We will require you to implement your header in a similar manner. To do this, use:

  • position: fixed; Adding this to an element makes it stick to whatever position you specify
  • top: 0; right: 0; left: 0; These are the positions for the fixed element that will keep the element fixed at the top
  • z-index: 100; Adding this to an element makes it positioned above other elements (You could probably make it work with z-index: 5, but we just put 100 just to make sure). Think of z as the z dimension where the width and height are x and y.
  • We will also require you to style the navigation buttons so that they change font color and become underlined when you hover over them. Like this:

  • .yourCssClass:hover {...} To specify the style on hover, add :hover to the CSS style like the example provided
  • Lastly, we require you to have the twitter logo stay in middle of the header when you resize the window.

  • The file path of the twitter logo from the HTML or the CSS file should be ./images/twitter-logo.png
  • 2. content-wrapper

    We require you to have all the content below the header within a boundary that is centered on the screen. To do this, we recommend creating a wrapper div for the three columns below the header. Use these styles on the wrapper div:

  • max-width: 1190px; This sets the maximum width of the element
  • margin: 56px auto; This sets the vertical margins to 56px so that it is below the header and the horizontal margins to automatically center the element
  • 3. content-left

    In our solution, content-left is made up of 3 rows (divs):

  • Cover picture (purple)
  • Profile picture (orange)
  • Profile stats (green)
  • We require you to create the overlapping effect between the profile picture and cover picture.To do this, we recommend you absolutely position the cover picture. Make sure to configure the z-index accordingly. To do this, use:

  • position: absolute; With this you can specify the exact coordinates of an element. This is different than position: fixed; in that an absolutely positioned element will not stick to its position on the screen when you scroll.
  • The filepath of the cover picture is ./images/penguin-banner.png and the filepath of the profile picture is ./images/penguin.png
  • 4. content-center

  • border-radius: 50%; makes an element a circle
  • We require that you to include the profile picture in every one of the tweets and in one of the tweets you should have a span tag to change the styling of a single word within the tweet

    5. content-right

    If you minimize the width of your browser when on Twitter, you will notice that the content on the right disappears at a certain point. This is done using CSS media queries

    We require you to do the same on your mockup. So, use a media query to make content-right disappear when the window’s width is less than or equal to 1200px

    Handin

    Other than the explicilty stated requirements for this part, we would like you to make your Twitter mockup generally resemble the solution provided above

    Note: We will be grading your assignment on a CIT department machine. Please test your webpage on both Chrome and Firefox on a department machine, to ensure that the webpage looks consistent. If you don’t know how to do this, please come to hours!

    To access the latest versions of each browser available in the department (note that these aren't necessarily the most up to date versions of these browsers):

    Firefox: From the command-line, type ‘firefox’.
    Chrome: From the command-line, type ‘google-chrome’.

    If you used a department machine, run the handin script cs132_handin assignment1_2 to submit your code.

    If you used your own computer, transfer your files to a department machine and submit there. Refer to our remote setup instructions under the Docs page.

    Part Three

    Setup

    If you are using a department machine, run cs132_install assignment1_3 to get started.

    The script will create a assignment1_3 directory in /gpfs/data/course/cs1320/your_cs_login/

    If you are using your own computer, download the zip of the stencil here to get started

    Put all of your resources needed for this part of the assignment under this directory.

    Note that there is only an empty directory provided for you.

    Part Three: The Problem

    There are two options for completing the third part of this assignment: you can either create your own personal web page, or create a new CS132 course website.

    You’re on your own for this one. Use Parts 1 and 2 as well as the resources provided on the course website for references in your work. We recommend doing Parts 1 and 2 before Part 3.

    Option 1: Your Own Personal Home Page

    Your website needs a home page, 3–5 linked pages, and a navigation bar that connects it all together. Feel free to get creative with it. Your hand-in should be comparable in complexity to the current CS132 course website. As such, while the choice of which HTML elements to use is up to you, we do require that every single element is styled in some way in your CSS.

    We do not accept code that has already been built, and we will catch instances of self-plagiarism. If you would like to use libraries like Bootstrap, you must have added sufficient amounts of your original HTML and CSS on top of it, and you must outline how you used them in the README file with your handin.

    Option 2: New CS132 Course Website

    Your website should have a clearly-displayed title image and logo that includes the text “CS132: Creating Modern Web Applications”. You’ll need to have separate pages for the following topics, including the current data from the course website:

    You should have a navigation bar that links to each of those pages. Your data can be represented with different HTML than we used, but all the data currently there must be represented in yours.

    If we get a really good submission, we will consider using it in place of the current web site.

    Handin

    If you used a department machine, run the handin script cs132_handin assignment1_3 to submit your code.

    If you used your own computer, transfer your files to a department machine and submit there. Refer to our remote setup instructions under the Docs page.

    Make sure you are in the assignment1_3 directory. Note that Part 2 and 3 have the same deadline but have separate install and handin scripts. Make sure you hand in both.

    Notes

    As a reminder, it's a good idea to run your HTML & CSS syntax through validators like: https://validator.w3.org/ and https://jigsaw.w3.org/css-validator/. You should also consider using an accessibilty checker such as WAVE.

    Please make sure to install (and subsequently hand in) all parts (1, 2, and 3) of this assignment.

    Once again, if you are confused about this or are unable to use a CS department machine to run the handin script, please ask clarifying questions on Piazza, or come to TA hours. If you still cannot run the script you should create the corresponding directory structure on your personal machine with only the files relevant to the assignment. Then you should zip the whole directory structure into a single zip file and mail that to the TAs (cs1320tas@lists.brown.edu).

    Troubleshooting

    There are hundreds of HTML and CSS tags, properties, and values, and CS132 does not expect students to learn each one by heart. However, this assignment and previous homeworks are intended for you to intuitively understand the languages, and to be proficient at knowing how to tackle a design by the end of the semester.

    If you’re having problems, there are many guides on HTML and CSS online, as well as on our resources page. As always, if you are stuck on a particular part, you can always talk to the friendly and talented TAs. You can find the times and locations of our office hours here, and we can be reached on the course piazza (check your email for a signup link)