Opening the Closet Door: A Beginner’s Guide to Coming Out

A guide for queer people to aid in one of the most well-known LGBTQ+ milestones: coming out!

Comment

Inspiration

In the survey we sent out, it seemed that a lot of queer people felt they didn't really have access to many resources that helped them during the process of figuring out their identity as well as coming out. We wanted to be part of the solution by creating a website that would allow queer people to ask questions anonymously as well as read articles and advice written by other queer people.

What it does

Our website is mainly informational. We wrote several of our own articles, made our own infographic, and linked a wide variety of outside resources for individuals who might want to know more.

How we built it

We used HTML, CSS, and JavaScript to build this website. Adobe Illustrate was also used to create graphics. We also used Pageclip as our server for our Contact form.

Challenges we ran into

The most obvious challenge some of us had was not having a ton of experience with the languages and software we were using. Lacey had briefly used Glitch before but Ana and Savannah hadn’t, so that was a learning curve for all of us since we needed to know how it worked to be able to use it to build our website. Savannah also hadn’t touched HTML or CSS in six years, so they were basically starting from scratch when it came to coding. Ana also had experience in HTML but she ended up working on our React component instead which she hadn’t really used before, so that presented a challenge as well. Overall, there was a lot of Googling and troubleshooting in order to figure out the coding components we needed for this project. None of us had ever built a website from scratch like this before so we're surprised at what we accomplished in less than 24 hours.

We had a lot of content to get through and a very short amount of time to get through it all. Nine articles and 14 FAQ questions, some of which had multiple paragraphs and links to resources, made for a lot of writing. We also have graphics for most of our pages, meaning all of those had to be created, imported, and embedded as well. Overall, there are around seventeen different banners that were created using Adobe Illustrator along with our logo.

Connecting all of the files properly as well as keeping them organized proved to be a bit difficult at times as well. Every page has at least 8 links on it, meaning that all of them had to be set up and corrected when we changed setups. This also means we had to test all of those links in several different combinations, as we needed to make sure all the pages were routed to the correct place.

Also, ironically, editing and uploading our demo video proved to be much more difficult than anticipated. We apologize for the low resolution! (Adobe Premiere was not having it today.)

Accomplishments that we're proud of

We built an entire website from scratch! But really, we started with a fairly limited knowledge base and still managed to make something we're proud to present to the judges. Between figuring out how to set up the technical components with HTML to styling it with CSS (and adding JavaScript where it was needed) as well as writing all the articles, answering questions, and creating all the graphics, we accomplished a lot!

What we learned

We learned how to use Glitch as well as (some of us) learning HTML and CSS as well as JavaScript. We also went over a lot of web programming fundamentals that will be useful for future web projects and coding endeavors.

What's next for Opening the Closet Door: A Beginner’s Guide to Coming Out

Some ideas for expansion that we have so far are taking in some user input from the contact page to add content based on what users want. Additionally, we would like to expand the infographic page to be inclusive of as many different sexualities and genders as possible, as we believe everyone deserves for their identity to be celebrated and understood.

Built With

Share this project:

Updates