Note: This document is a work in progress. You can help improve it.
In your first assignment you will end up with a web page, no matter how simple, published on the web.
You will create a simple website that will showcase one of your passions. This is not about making the website flashy, but more about focusing on creating a website and learning your new tools.
For this assignment, you will following along with you instructors to complete this homework.
- Get to know your text editor
- Introduce yourself to working on the command line
- Write some HTML
- Publish a web page
app-appinstalled. We should have done this together in class. Reminder: you only have to install these tools once.
All of your HTML (and CSS if you do epic mode) should be formatted cleanly and consistently (use your editor to your advantage).
If you have experience with existing HTML/CSS frameworks (bootstrap, bulma, etc) you may not use them for these assignments.
- Follow all of the setup instructions.
- Compose a short essay (just a couple paragraphs at most) about a hobby you either enjoy, or would like to learn about. We will be expanding on this page in future assignments, so pick something fun!
- Put your short essay into an HTML page, using appropriate semantic HTML tags. (See the link
HTML Tag Referencebelow). Give your webpage a simple header and footer as well.
- Deploy your site.
- Use at least one image somewhere on the page.
- Learn about and investigate the
ato add (at least 2) more pages to your site.
- Re-deploy your site.
- Read more about CSS.
- Research the
- Use valid CSS to style the page (in the neighborhood of a couple dozen CSS declarations).
- Create a full layout for your page (heading, navigation, sidebar, footer, etc.).
- Use more complex CSS selectors than we covered in class, e.g. attribute selectors or sibling selectors.
- HTML Tag Reference
- How do HTML Tags work
- Evolution of the Web
- Atom Flight Manual
- Getting started with VS Code
- Visual Studio Code Basics
To prep for tomorrow's lesson, you can read about CSS.