Lab Assignment #1 - Map and Portfolio¶
Due 7/3¶
Time to put your skills to the test and create a home page for the individual maps that you will be making this quarter. Describe some of your interests and include a map with some markers. This is your portfolio, so feel free toadd anything. If you made multiple HTML pages, please link them all to the index.html using the <a href=""></a> tag>.
Your portfolio must contain the following:
- A <h1>tag for your title
- Add at least 2-3 markers to the map with a common theme, for example organizations you’ve volunteered for or places you’ve traveled.
- A <h2>or<h3>tag to create a title for your map.
- A <p>tag for a paragraph describing yourself and your goals as a critical digital map maker.
- Style CSS by changing the background color, font, or anything else.
- Use an ordered list <ol>tag and an unordered list<ul>tag to list things.
- Include an <img>tag with a photo of yourself or an avatar. Feel free to add other images too to give some flavor to your page, like food or desserts.
- Use the <a>tag to add a link to 2 other web pages.
- Commit your changes
- Set up GitHub pages for your repo
Extra Credit: (any of these)¶
- Add another link to your own completely different HTML page not index.html. (Be sure to link it to yourindex.htmland describe what you are showing)
- Add another use of Maplibre
- Check out the Extra or Maplibre documentation and try something there.
Submission:¶
- Commit and publish your file to your repo’s GitHub pages
- 
Find your index.htmlin theweek1folder and copy the URL. It should look something like this:
- 
https://albertkun.github.io/24su-asiaam-191a-labs/week1/index.html 
- 
Paste your link as a comment in the Discussion forum for Lab Assignment #1 
Extra Resources¶
HTML¶
- 
Short MDN HTML Syntax (good recap): https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started 
- 
Long overview and explanation of HTML: https://geobgu.xyz/web-mapping2/html.html 
CSS¶
- Learn Layout:
- https://learnlayout.com
CSS GRID¶
- CSS Grid Garden (game to familiarize yourself with CSS grid):
- 
CSS Tricks: 
- https://css-tricks.com/snippets/css/complete-guide-grid/
JavaScript¶
- JavaScript for Cats:
- http://jsforcats.com/