Assignment 4: HTML
We talked about HTML this week, and we'll exercise some of our new knowledge around it by using HTML to customize Carto maps and make our own pages. Please do not use CSS (styles) for now. Focus on HTML for this assignment.
Resources
- My HTML Reference should get you started.
- If you're looking to learn HTML from another angle, codecademy has a course in HTML that is usable and interactive.
- MarkSheet has a good free HTML tutorial.
- If you're looking for a resource on HTML that you can read through, I'd recommend the first three chapters of HTML & CSS is Hard. For now I would stick with editing code in Glitch, so you can skip the parts that mention a text editor named Atom.
- The Mozilla Developer Network is a great resource for HTML and other web documentation.
- css-tricks has good beginner-to-intermediate tutorials, and you might appreciate HTML & CSS -- The VERY Basics. As stated earlier, please stick to HTML for now and we'll cover CSS next week.
Part 1: Add some HTML to a Carto map
Open a Carto map from a previous assignment (or work on a new one toward your project) and:
- Edit the legend to add a link (or links) to your datasource(s).
- Make a change to the HTML for the pop-ups for your map. This can be as simple as adding
<strong>
elements to emphasize some text, or you could link to other pages or show images. Use this video for some pointers. Ignore the CSS for now!
Please focus on making meaningful and presentable changes to your map.
Part 2: HTML pages with embedded Carto maps
Create an HTML page from scratch and add a Carto map to it.
- Create a site in Glitch.
- Edit the HTML page (index.html):
- embed the Carto map from Part 1 in the page as an
iframe
- add some text
- add at least one image
- add at least one link
- experiment with some other HTML tags as outlined in the HTML Reference
- embed the Carto map from Part 1 in the page as an
Readings
- American Panorama - Foreign Born
- Where International Communities Cluster
- Economic impact of DACA recipients by congressional district
- Migration within the US compare these two maps: 1 (Forbes), 2 (NYT)
Please respond to these maps in Piazza.
Submitting your work
Submit a link to the map you edited in Part 1 and link to the page you posted online for Part 2.
You may optionally choose to include a short paragraph response or summary of your work.