CS 347: Lab 8 – Position
Dear students:
Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as many of the tasks below as you can. At the end of our time together, paste your HTML files into Crowdsource in order to receive credit.
Task 1
A pricing grid is a pattern you regularly on sites that offer different tiers of products or services. Recreate this grid:
Follow these guidelines in your solution:
- List the available features for each tier. Each higher tier should have more features than its predecessor, leading to differing amounts of content.
- Ensure all tiers’ boxes have the same height, but let the content of the tallest box naturally determine their height. Do not artificially set the heights.
- Place a button at the bottom of each tier. Ensure they are all aligned.
- Center the tiers horizontally within the page.
- Use unordered lists for the features.
- Download SVGs from Font Awesome 5.15 for the badges.
- Anchor the phone number banner in the bottom-right corner of the browser window. Probably doing something like this is a bad idea and hard to get right. Feel free to guess at numbers to make it run diagonally.
Peer Check-in
With a partner, briefly discuss your progress on project 1. Tell stories about the following:
- Your site’s theme and audience.
- Your success in deploying it on your droplet.
- The role of each page.
- Your TODO list of things to complete over the next week.
- The biggest unknowns.
Your answers should be real, rather than fake. If things are going terribly, say it out loud.
TODO
The next step of your learning is to complete the following tasks:
- Read the chapter Responsive Web Design in All Over the Web.
- Continue working on the first project.
- Research some aspect of web development on your own. Find articles and videos beyond what’s assigned. Summarize what you learn in a couple paragraphs of your own words and a snippet of source code in your next blog entry before Friday morning. Clearly put the date of the blog entry on your index page. If any of the requirements is not met, you will not receive full credit.
See you next time.
Sincerely,
