Website Coding Workshop
Collaborative Coding
Today we'll wrap up presentations of our website sketches (assignment 5) and begin hands-on work implementing our designs (Project 1).
This is an opportunity to collaborate and help each other, so please reach out to me or your fellow classmates if you hit snags as you begin coding the HTML and CSS.
Project 1: Building a website
For this project, we'll implement the Home and About pages of our website design using HTML & CSS. It's fine to hold off on implementing the project detail page until we complete our first interactive graphic. If you choose to implement the project detail now, you can use a placeholder image and lorem ipsum for the text.
To complete the assignment, the changes must be deployed to your site and the URL for the site uploaded via Canvas by class time on Tuesday April 30th.
If you're just learning or are rusty on HTML/CSS, I'd encourage you to begin with one of the W3C CSS Templates. As part of the styling work, you should apply a CSS reset. With these as a starting point, you can then reference Learn to Code HTML & CSS and the task-specific examples listed on W3C to implement your design.
A few other requirements/recommendations:
- You must put CSS in an external stylesheet (that begins with the CSS reset from Eric Meyer)
- Use placeholder images for project links from a site such as dummyimage.com
- If you need icons, check out W3C CSS Icons for some options.
The W3C templates present alternative approaches to page layout, including the relatively new CSS Flexbox and CSS Grid. These tools can make it easier to create responsive web pages for devices of varying sizes. Here's a blogpost that helps clarify the differences and shows how Flexbox and Grid can be used together.
These strategies for page layout were not covered in the reading, but are valuable and worth applying if you're comfortable with them. It's also fine to use more traditional techniques for page layout as covered in the positioning content section of the reading. The goal is to pick a strategy (or perhaps combination of strategies) and execute a design.
Be sure to use the browser's developer tools as you build out the site. The dev tools let you easily change, add and disable CSS properties. It's a great way to get a sense for how individual CSS properties work, and experiment with changes before adding them to a stylesheet.