We’ll start again today with Project 4: Links check-ins, looking at your in-progress code. We’ll break up into new groups again: **
Group 1: Amaya, Abhishek, Sarah, Sushanto
Group 2: Bobby, Myriam, Dhruv, Jocelyn
Group 3: Shanshan, Kendall, Ina, Vasu
Group 4: Chi, Sanjana, Dayna, Keren
Group 5: Shivi, Andre, Giselle, Sandra
Group 6: Caroline, Tanvi, Fahila, Madhura
Group 7: Azra, Kinjal, Hamza, Dusha
Group 8: Vidushi, Lucine, Mariia
Use Slack’s huddles to share your screen. (We should be well into code now, not Figma.) You will again have about 40 minutes with just your group, and each group will have about 10 minutes with us.
Let’s shoot for getting through by around 10:15.
We’ll break here, when we have met with everyone.
Making it interactive
We’re going to pick up from our demo last week, using JS to enliven our interfaces.
First, we’ll fashion a lightbox/overlay:
arena.jsfrom the template repo—we added a callback function
- Talk very briefly about Git’s branches
- Add another, larger image to the image
- Style it as an overlay with
position: fixed;, then hide it in CSS
main.js, inside the
- Listen for clicks on images, with
- Add a class on their
- Use this class to show the other image
- Listen for clicks on the overlay image/background, removing the class
Then we’ll filter a mixed content list:
- Add list of buttons for the content types (and an “all”)
- With each button, set a
classList) on the list for its type
- Use these classes to show/hide the type’s
<figure>elements in CSS
For next week
You’ll be completing the last phase of your Links projects, Interactivity and refinement.
Read through the previous phases carefully and make sure that you have met all the requirements. Again, we are expecting to see continued evolution of your work based on our ongoing feedback.
When you are done, make sure we have the right link to your repo and live URL:
Each student will add at least 10 items to their original channel, following on their theme. This should be done without coordinating with the channel’s adopted owner, and without looking at their project—you are just adding blocks, as you did to start.
Prepare to present your project, next week. We will be splitting into two groups, using our other classroom downstairs:
Group 1, Room 1201:
Amaya, Andre, Bobby, Giselle, Ina, Jocelyn, Keren, Kinjal, Sandra, Sarah, Shanshan, Sushanto, Tanvi, Vasu, Vidushi
Group 2, Room 1006:
Abhishek, Azra, Caroline, Chi, Dayna, Dhruv, Dusha, Fahila, Hamza, Kendall, Lucine, Madhura, Mariia, Myriam, Sanjana, Shivi
You will each have about 5 minutes to present your work. Introduce us to your channel and your interface concept, and then show us your final site. Be sure to demonstrate its responsiveness, interactivity, and states thoroughly. Explain your challenges and what you’d improve on with additional time or experience.
Again, we are not requiring a deck here but your presentation is always part of the project. Practice beforehand. Be sure to use your full time.
Each presentation will be followed by a few minutes of feedback and critique from your classmates and from us, as is custom.
Last, we’d like you to start thinking about your next (and final) project, Functions—which will be entirely based on your own concept. We will share more details next week, and you will be submitting your concept the week after that. So we want you to “put the kettle on” now, so to speak.