Phantom time hypothesis

This repository was created as an assignment for the Modern Web Design course at The Gymnasium.

My final goal for this course is to create a simple, multi-page website using content from a Wikipedia article (of your choosing) as the source.

Instructions from Lesson 1:

• You will need a way to host your HTML, CSS, and JavaScript code online. We recommend using GitHub and specifically GitHub Pages to do this. First, sign up for an account at GitHub.com if you don’t have one already. Then go to pages.github.com, and follow the tutorial on how to use GitHub Pages for hosting (you will want to follow the instructions for a Project Site.)
• The next assignment is to decide what subject you want to use for your website. In order to do this, go to Wikipedia and find an article with enough content to fill at least five pages and have a handful of images. Feel free to use the instructor’s Wikipedia article on cuttlefish as a reference, but we highly encourage you to take the time and choose a subject of your liking, you will be working with the material for 6 lessons, so it should be material you are interested in!

Instructions from Lesson 2:

• Quiz.
• Begin marking up the content from the article you chose on Wikipedia in Lesson 1. The goal is to create a bare bones HTML document that will become the foundation of your website.
• Create a blank text document with an HTML extension, paste the text from the Wikipedia article you chose into that document, and open it in a browser, and see how it looks.
• Return to the document and begin adding different elements like html, head, body, and title. Save it, view that page in the browser and see how it’s changed.
• Go back and add some text-level semantics—for example emphasis or i or b or some links. Continue refining the document and keep looking at the browser and see how it’s changed.
• When you’re happy with your file, go ahead and push that up to Github and post a link in the forum. Your Github repository should look a little bit something like this: I Heart Cuttlefish

Instructions from Lesson 3:

• Quiz.
• Return to your HTML page that you created at the end of Lesson 2, and begin to organize your content using the knowledge gained in this lesson. For example, return to your main document and think about how you could break it up into multiple pages.
• Add some navigation so that you can move between the different documents.
• Finally, go through all of your documents and add the logical flow and structural elements that were discussed in this lesson, such as main and section elements.
• When complete, publish your work up to GitHub and post a link in the forum.

Instructions from Lesson 4:

• Quiz.
• Think about the way the browsers styles the text content of your documents.
• Are your pages easy to scan and comfortable to read?
• How could you use typography to improve readability and enforce content hierarchy and importance?
• How do different font families look when paired with each other?
• Test out some different font stacks and note how fallbacks differ.
• Return your site and think about how color could improve the readability and usability of your pages.
• Try out a few different color forms (hex, RGB, HSL). Which feels more natural? Are there pros and cons to working in each?
• Does your design have enough contrast? Check it using the Greyscale plug-in for Chrome.
• Add borders and padding to elements on your pages.
• Play with different display models (especially inline and inline-block) and see how they affect the way elements lay out with respect to one another.
• How does adjusting an element's size help add weight to it or diminish its visibility as compared to other elements?
• Explore the box model and the different display modes covered in this lesson.
• Publish your work to Github and post a link in the forum along with your observations.

Instructions from Lesson 5:

• Quiz
• Enhance your design using backgrounds, borders, and generated content. We recommend starting with backgrounds and borders in order to separate your content and adjust how your eye is drawn across the page using those design tools. Some questions to ask yourself as you experiment with these properties:

• How do solid color backgrounds compare to subtle gradients in terms of drawing your eye?
• Knowing how you make a triangle, could you guess on how to make a circle out of an element?
• Are there places in your design where it makes sense to use generated text or images?
• When you’re done with your enhancements, publish your work on GitHub, post a link in the forum, and post some of your observations of working with these different design tools.

• Begin exploring the use of CSS media queries as a method for creating layouts for different size screens. To begin, shrink your browser width to roughly 320 pixels and adjust your layout to provide a good reading experience. Then, slowly increase the width of your browser until the design starts to look not-so-great, and use a media query to adjust the layout. Repeat this process at least once, if not twice, until you have a couple of different layouts for your design. Some questions to answer at the end of this process:

• How many major and minor breakpoints did you end up with?
• What did you find challenging about this process?
• Publish your work on GitHub and post a link to it in the forum, along with your observations and answers to these questions.

• Look for ways to include transforms and transitions in your site. For example, see what happens when you transition the width property for every element on the page as you resize the browser. Post your findings and what you’ve done in the forum.