CS 1100: Web Development: Client-Side Coding

Set Up Your Files

1. Your Course Folder: If you have not done so already, create a folder that contains all of your CS 1100 homework folders.
   • Call it cs1100 or whatever you'd like. (For simplicity, I'll call it cs1100 here.)
   • Move into this folder all of your previous homework folders: hw01, hw02, hw03, hw04, and hw05.
2. Homework 6 Files: Create two new files inside your cs1100 folder:
   • index.html
   • styles.css
   Copy into index.html the standard HTML from the template file we have used all semester. (Control-click on the link if you would like to download a copy of the file.)

When done, you should have a folder that looks something like this. In Windows, the graphics will be a little different, of course.

Create a Portfolio Page

The main content of index.html is a set of links to the pages you have created for class. You are free to structure it however you like. It could be...

• a list of homework assignments, where each bullet is a sublist of the HTML files you created for that assignment
• a table with rows for homework assignments and columns for the HTML files you created for that assignment
• a sequence of paragraphs in which you describe each assignment and include links to the HTML files you created for that assignment
• a set of project "cards" similar to the cards we saw in our recreated YouTube search page, with an image and some text and links to the side
• or something else of your own creation!

There are no specific requirements for how you structure the page. Create a page that you like and would like to share with others!

Use semantic elements that best fit your structure, and appropriate HTML elements for any text or media on the page.

Feel free to include images or other media, if you'd like.

Given the structure of your cs1100 folder, the links to the files from your previous assignments will have the form "hw##/filename.html", such as
<a href="hw02/w3c_mission.html"> and <a href="hw04/schedule.html">.

Style the Portfolio Page

Write CSS rules for styles.css to layout and style the content of index.html.

There are no specific requirements for how you layout or style the page. Design a page that you like and would like to share with others!

Use some of the new CSS you've learned for layout, such as floating elements, positioning elements, controlling scrolling, or using flexbox. Use appropriate CSS elements to style the text and media on the page.

Validate your HTML and CSS

1. Validate index.html using the W3C Markup validator.
2. Validate styles.css using the W3C CSS validator.
3. Fix any errors, then revalidate the files. Remember, you'll have to upload the updated file again each time.
4. Repeat until you have no errors.