Short summary: In this milestone, you will start implementing the CSS of your website. You already have a vision, in the form of the sketches you created in PM1 and some content that you wrote in PM2. Now is the time to put these two together. The goal is to start creating an informative, well-designed, and aesthetically pleasing website. While you will not be able to do everything this time, you should try to implement at least 50% of your design idea from PM1. For example, if you have two page designs, you'll create one page. If you have a one-page design, you'll implement 50% of it.
With every milestone, you are getting closer to the vision for your final website. In PM1, you formulated your research questions and drew preliminary sketches. In PM2, you generated some of the content of your website. In PM3, you will make progress on two fronts:
This milestone contributes to the following learning goals:
In this milestone, your output will include the following components:
Your files will be uploaded as in previous milestones under a separate subfolder pm2 within the public_html/cs115-project folder of your account.
Your goal is to start implementing the "look-and-feel" of your website, by deciding on the color scheme, fonts, layout, organization, etc. There are a few ways to go about this:
You should choose the option that you feel more comfortable with. We would like to point out that W3Schools templates are responsive, meaning, they are optimized to look well on every device and that is an important factor to keep in mind, because it will increase the reach of your final website. W3Schools is not the only repository of free CSS templates, feel free to explore beyond them. However, you should not rely on templates that require you to pay.
Once you have made a choice, you need to create the HTML file (pm3_layout.html) and a CSS file (style.css) that together will allow you to display the content you wrote in PM2.
If your vision involves more than one page for the website, you are free to create such pages too (naming them pm3_page2.html, pm3_page3.html, etc.), even if they don't have a lot of content yet. Link them from the main page.
Include a footer section at the end of the page, where you'll write things about yourself, links to your sources, links to your milestones etc. No need to have your name at the top of the website. Usually the footer section is where all this information goes.
Note on copyrighted material: Be careful to not include in your website photos or other work of unknown origin. Just because the photos are in the W3Schools website, that doesn’t mean you also have permission to use them. A good place to search for publicly-available content is the Creative Commons website. For all images that you include on your webpage, write a comment in the HTML file explaining its origin (is it your own work? If not, provide the URL from where it came). Some of the images for your research will fall under "Fair Use", but always save the link to the original. A good practice is to link to the original, by adding a sentence in the figure caption. You could write: Image is curtesy of website AmazingPhotos, under fair use policy, and make the website name the link to the page where the image is shown.
W3 Schools has some templates that contain interesting elements for a research website, such as bar charts with CSS, panels to showcase statistics, etc. Look at them for inspiration of what you can use in your own website.
This milestone counts for 6 points (out of 40 for the whole project).
Here is what we will consider in our grading:
What comes next? In PM4 you will continue to develop the website (both content and style), trying to finish the layout, by adding graphical elements such as images, slideshows, videos, infographics, icons, etc., that is, elements that can help break the monotony of text.