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.html
and 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.html
in theweek1
folder 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/