Recreate your favorite example of Swiss Design!
- Fork this repository and clone it to your
critical-web-design
folder on your machine. - Design
- Select an example from swissted or search for your own that speaks to you
- Open
designs/1.psd
in Gimp or Photoshop - Using only the Type and Shape tools, recreate the design you chose
- Your layout should fit within the Bootstrap grid layout.
- Save your document often
- Make new versions as needed, naming them
2.psd
,3.psd
, etc.
- HTML/CSS
- Code your design inside
index.html
- Use only HTML and CSS to structure and style your design
- Do not add images. Retype the text from the example you chose
- Use the Bootstrap documentation as well as custom CSS to create your design
- Use CSS position, border, and translate() properties to create and rotate lines
- Include a link to the image of the original design somewhere on the page.
- Save your work and commit and push changes regularly
- Code your design inside
- Confirm valid HTML and CSS. Note: Only your CSS files because Bootstrap's built-in support for older browsers will not validate)
- When finished, publish and post your project
- Refer to this rubric for grading.
- Course HTML & CSS Resources
- Bootstrap documentation
- W3Schools CSS 2D Transforms