weddingjam.space
I'm proud to have built our wedding website myself using HTML and Bootstrap! I quickly was frustrated with the limitations of existing wedding website builders (no link formatting wth!), and had some experience with Bootstrap through work. This all came together surprisingly quickly.
This responsive website features a full page cover image on the homepage with a transparent navbar, and multiple pages (r.s.v.p., story, travel, f.a.q., and gratitude) that each have a collapsable (on small screens) sticky navbar, a jumbotron full-width image and a footer with a javascript countdown until our wedding date. The travel page additonally has a sidebar because of its length.
I've all but disabled dark mode, which many devices are set to automatically producing unintended CSS effects.
In the spirit of open source, the site code is here. Feel free to reach out to me if you have any questions or are struggling to make a similar website work for you.
Website built using the Bootstrap toolkit, downloadable with npm i bootstrap@5.3.3. And fully customized using HTML, CSS, and JavaScript. Site-wide CSS and JS changes are in css/custom.css and js/custom.js respectively, but page-relevant CSS is in the head section of each page.
If the site was bigger I would pull out the header and footer code, but since index.html has different HTML for these short sections, they are repeated in every other page.
Other tools used:
- Masonry for the cascading grid layout for the gallery on our story page. Futher, javascript is used to let images be clicked in an enlarged overlay.
- favicon.io to generate the favicons from our Irish love knot image.
- Fotor's free AI background remover and image-to-SVG for the logo.
- Font Awesome for free icons used extensively on the travel page.
- draw.io is used to generate
.svgimages (family tree and setlist) used on the about page. - Image Color Picker was used to select theme colors from our cover/jumbotron photos.
- Responsive BreakPoints to generate responsive image breakpoints to speed up the website on mobile.
I am using RSVPify for our wedding RSVPs because it offers features I wanted: individual passwords for guest groups, embeddable, customizable appearance, reminder emails to guests who haven't registered yet, etc. I paid $110 for an annual platinum membership. I thought because I didn't have an enterprise account I couldn't customize the group passwords, but it looks now like I could have one at a time (rather than in the imported spreadsheet). I wish I made them more fun, but invites are already sent.
A free option for RSVP management to consider is anRSVP, but it seemed a little less smooth.
We chose to use Zola for our registry service. This is only linked from our F.A.Q. and could be any external site.
Topo Maps of NY, VA, CO, and USA are coded in Python using TIGER/Line U.S. State Shapefiles from the U.S. Census Bureau and Earth relief data from the PyGMT package. Plotting notebook can be found in TopoMapMaker/
Historic USGS maps were found via topoView.
fiverr. artist @veronikawunder Veronika W. comissioned for the custom fantasy map of the front range, CO.
Google My Maps was used for embedding lodging map since this cannot be done from a Google Maps list.
Banner and cover photography by Angie Wilder.
Ring photos by jeweler, Peter Marek, of Rabbit Jewelry Co.
To reduce image loading times, images should be compressed below 200kb
In VisualStudio Code, I found it easiest to right click any .html page and select "Open in Live Server" to view the site.
Don't forget to inspect in mobile and both light/dark modes.
Hosting is free through GitHub pages. I did end up purchasing a domain for a few dollars.