I’m making good progress on my Udemy course(the Web Developer Bootcamp) but I also wanted to work on a few side projects. There are a few big projects I’d like to tackle, but I thought I could benefit from one or two shorter ones first.

I’ve mentioned the site before, and I thought I’d visit Briefbox to find a short project. Briefbox is a really great resource (mostly for design projects) where you can look at briefs for potential projects. This is great for someone like me who has trouble deciding on exactly what to do, or what direction a project should take if I’m just making something up myself. I decided to look at the brief Hitched. The brief asks for a splash page for a wedding planner; they want details of the wedding venue, date and timings, and contact information. I looked at a few examples and completed projects that had been submitted by others, and they included a little blurb about the couple and information about gifts as well, so I chose to include that too.

You can check out my project here.

I spent about four days working on it, along with other projects, as part of my #100DaysOfCode challenge. I thought it was really great because I was going back to just front-end and using things I hadn’t touched in at least six months. It also felt really good to put Bootstrap to use- it did most of the work for me, design-wise.

My Udemy course pointed me in the direction of another great resource: Photos For Class. It’s a searchable database of free and easy to use images that I used for both of the background images used in my project. The images definitely made a big difference to the feel of the page, and having images that I was happy with made me a lot more motivated to work on it!

One of the challenges I had when working on this project was making sure that only one block of extra information was visible at a given time. The four blocks were “Our Story”, “Gifts”, “When”, and “Where”- each one provides a little extra info, like the timeline for the date, the venue (including a link to the location on google maps so you can easily get directions.) I had the four blocks spread over two Bootstrap rows, so some of the more obvious ways to accomplish hiding any other open info blocks wouldn’t work for me, and then I re-discovered the .not() method! I knew on seeing it that I’d used it before, and it was perfect for my case today!

I’d love some feedback on my page, it’d be great if I could polish it up and use it in my portfolio!