<aside>
💡 Due next class, 9/13
</aside>
Resources and Guidance
Resources
The syntax for both HTML and CSS are relatively simple. HTML has a short learning curve - the syntax is simple, and there are just a few tags you really need to now. CSS however can get complex. Though the syntax is simple, knowing how to create a webpage with the layout you want can be tricky.
- Reference with all CSS properties and values - link
- CSS tutorial - link
- CSS Flexbox
- Flexbox is a set of CSS layout properties that are really useful for creating just about any layout type. Try this flexbox game to learn how it works.
- Note that you can manually position items anywhere on the screen as well, by assigning percentage or pixel values. In general, this is not good practice, but I anticipate it’ll be useful for creating an ugly website. Example below will place an item in the center of the screen.
position: fixedtop: 50%;left: 50%;
- All HTML tags - link
- Important tags to know:
<a>, <img>,<body>,<p>,<span>, <div>, <header>
- Remember: HTML structure should mirror page structure
- Slides from class - link
Guidance - Structuring Folders & Github Repo
I recommend you organize your Github as follows
- 1 repository for all ‘exercises’ (anything that isn’t a large project)
- 1 folder for each assignment
- I would group this week into two assignments
assignment2-layout and assignment2-ugly-site
- 1 nested folder for each distinct website
- Because the layout assignment for this week involves making multiple webpages, I would split each webpage into its own folder (
css-layout-1 and css-layout-2)
Assignments
Finish Ugly Website Exercise
<aside>
📎 (1) ****Under your student page, add a link to your Github Repository and Live URL to Notion under a page titled ‘Assignment Week 2’
(2) Submit assignment to this page for other students to see as well Ugly Website Submissions: Assignment Week 2
</aside>
See Class Week 2, 9/6 (HTML, CSS) CSS workshop. Spend another hour or two to make the ugliest website you can think of! Use as many CSS properties as you can, and note what they each do.