Hacktoberfest Responsive Image Meetup

Hacktoberfest Online Meetup

Monday October 26, 2020
12:00pm to 1:30pm PDT
Event is hosted online

Event Description

Responsive Images

Whether you're new to Responsive Design or you've been building responsive websites for several years, you still run into issues with Responsive Images. Sure, you can use css to make the image visually display as you want, but if you're not serving the right size image over the network this is going to result in slow website, lower SEO score, and bad user experience. Whether you are looking to learn more about responsive images for a site you are working on or you want to help open-source projects by adding responsive images, this event will provide an opportunity to not only learn about responsive images but also do a hands on simple website project with responsive images.

What to expect during this meetup

It's preferred if you have a basic understanding of html & css, if not, we can do our best to help you out. Please download some type of text editor (sublime, visual studio code, etc) before the event. After an open discussion on image optimization, I will display a simple template example to create a web page with several images in html & css. We will be using beautiful free images from https://unsplash.com/. Then we will discuss making these images into Responsive Images. I will provide three examples, including manually changing, using a simple imgix API (no need to sign up for anything, Unsplash already uses this API), and then a third javascript example.

Brought to you by Hacktoberfest

Hacktoberfest — brought to you by DigitalOcean in partnership with Dev & Intel — is a month-long celebration of open source software. Maintainers are invited to guide would-be contributors towards issues that will help move the project forward, and contributors get the opportunity to give back to both projects they like and others they've just discovered. No contribution is too small — bug fixes and documentation updates are valid ways of participating.

Can't make it to this online meetup? Hacktoberfest is virtual and open to participants from around the globe. Sign up to participate today.

Hacktoberfest Rules and Rewards

First, sign up on the Hacktoberfest site at https://hacktoberfest.digitalocean.com. To qualify for the official limited edition Hacktoberfest shirt, you must register and make four pull requests between October 1-31. Pull requests can be to any public repo on GitHub, not just the ones with issues labeled Hacktoberfest. If a maintainer reports your pull request as spam or spammy behavior, or not in line with the project’s code of conduct, you will be ineligible to participate.

Connect with other Hacktoberfest participants by using @DigitalOcean, @hacktoberfest, #hacktoberfest on your social media platform of choice.

New to DigitalOcean? Receive USD $100 in infrastructure credit at https://do.co/hacktoberfest100.

Event code of conduct

Hacktoberfest meetups are welcoming, open, and inclusive. Please read our Events Code of Conduct before attending. Happy hacking!

Who can attend?

Locations have different requirements for who can attend. This location is open to the following:


[12:00pm] Welcome, Intros, about Hacktoberfest
[12:10pm] About image optimization
[12:20pm] Discuss getting site started with HTML & CSS with free images from Unsplash
[12:30pm] Hands on - getting site started in breakout rooms
[12:45pm] Discuss Responsive Images, three options of setting up responsive images
[12:55pm] Hands on - add one of responsive image methods in breakout rooms
[1:10pm] Anyone interested to share what they made
[1:25pm] How to contribute this to open source & conclusion

Links & Resources


Chat platform where all the activities and fun happens.

Open link →

Hosted by

Tom Dale

imgix offers a simple API to manage, optimize, and deliver your images efficiently on your website & app.