What's the Tea? is an idea I came up with just exclusivly for this project. The organization is located in Stockholm. The main goal is to spread positivity, care and love and everyone is welcome no matter the gender. The website presents a Home page with an 'About' and 'Contact & Info' section. The Gallery page is built from a bunch of inspirational lgbtq+ photos. And last but not least the Sign Up page contains the events sign up form.
I was inspired by the RuPaul's Drag Race show created by RuPaul Charles who is the ICON of the LGBTQ+ comunity all over the world. The show has grown a lot and as a member of the LGBTQ+ comunity I wanted to celebrate my pride by creating my first project based on this idea.
View live site on Github Pages
Visitors looking for a safe place to share their stories and a good laugh should find this website interesting and charming. We are a charitable organization with a goal of sharing information and helping people to get the answers they are looking for or in case they need even further help pointing them towards the right direction.
The front page provides the visitor with a short introduction and the events contact and info. Besides that they can visit webites gallery full with lgbtq+ related sharing and caring photos.
In case you wanna have some fun and share your story proceed to our sign up page.
Everyone can enjoy their visit to our website because we have adjusted it and designed for all different screen sizes.
If you visit my website for the very first time I want you to feel welcome and curious. With the funny but still confusing logo I want you to get intrigued and scroll further down to read about us and to get the clear understanding of who we are and what we do.
In case the home page drawn you attention there is more to see on the following gallery page and for more information feel free to contact us or use or sign up form.
I wanted my page to be colorful but in a appropriate way so I fetched as friendly as possible for eyes color palette based off of the hero image, which I thought would be a well suited color scheme for the full website.
Coolors.co was the website I've used to fetch the colour palette presented.
It was hard to find a perfectly matching fonts, and now I sound totally like a beginner, which looked good and readable. Finally I picked Great Vibes, Acme and for the rest I thought it looks the best with sans-serif.
I used Great Vibes to decorate the website logo, then I used Acme for the quotation and the main sections title and for the rest I left it on sans-serif since that suited the paragraphs best.
Since the organization is all about the lgbtq+ and rainbow I thought that pictures related to that would perfectly fullfill the pages value and message.
The Wireframes are created for desktop and mobile view.
My website is built of 3 pages, index.html as a home page, gallery.html as the gallery page, and signup.html as the sign up page.
The navigation menu and footer is continiously the same throughout all three pages of my website.
This page has a potential to grow even further more by adding more content to it plus images for to spice it up and space it into bigger website.
In the future this event could from being a place to feel safe and funny implement even bigger shows as talkshows and dragshows. But one step at the time.
I have have tried my best to be mindful of accessibility, and the steps I've taken for this are the following:
- Semantic HTML
- All the links has their aria-labels
- The color choices and the backgroud images doesn't disturb the content
- All images under the gallery site are informativly described
HTML & CSS.
I have followed CI recommendation and used Github plus Gitpod.
For wireframes I have used the programme Balsamic.
View live site on Github Pages
If you wish to clone my project, please see the following steps below:
- Navigate to Github: https://balkaneros91.github.io/whatsss-the-tea/
- Select the 'Clone' button
- Copy the url or download as ZIP file
- Use git clone + the url in your terminal, or unpack the ZIP containing the project
All the links in the navigation bar and in the footer has been tested and works. The logo link always brings us back to the main page, while the About and Contact links are only index.html local links so avoid scrolling up and down on the page. The rest as Gallery and Sign Up links opens a new tab in the browser for easier navigation between pages. And the deployed website has been tested in Chrome, Safari, Internet Explorer (Opera) and Firefox. Media queries looks good and been tested throughout different screen sizes.
I have used Responsinator.com for testing:
For mobile:
For desktop:
No known bugs detected
I came accross many issues and bugs while creating this project. Understanding of flexbox didn't really workout. During the 2nd mentor meeting Antonio Rodriguez introduced me and explained the grid view which saved my first project. I needed a lot of playing around, moving code back and forward until it really settled in my head.
He mentioned that it would be good to add a comment that due to changes and extra time I needed to put all the code together I had to create a new repository and that is why all the commits came in within few hours because I had to migrate everything from one repo to a new one.
Some of the bugs I came accross and fixed:
-
Background images
-
Description: Diffrent size throughout differet screen sizes
-
Expected behaviour: Full image with no missing sides all the time covering its own content
-
Actual behaviour: The image was too small or too big or missing a part of it
-
Fix: Add code background-size: 100%; or background-size: cover; plus adjusting the media queries
-
Quotation
-
Description: Wrong positioning on the logo image and throughtout different screens changing its place
-
Expected behaviour: To not disturb nor overflow the logo image
-
Actual behaviour: Running over the logo image and due to color choice text can't be read
-
Fix: Adjusting the media queries to different screen sizes
-
-
Footer
- Description: Footer wrongly positioned on the small screen
- Expected behaviour: Footer at all times should be horizontal
- Actual behaviour: Footer vertical positioning on small screen
- Fix: Adding the correct class attribute col-s-4.
Code Institue projects: Coders Coffehouse and Love Running has been the inspiration for my websites design. The help I've used with syntax and formatting, please see links and description below.
The code is mostly created by me and I was inspired by some of the contect in the above mentioned section, Code Used plus by the code watched on LSM in CI projects.
All images are downloaded from Unsplash and Pexels plus and I used private pictures.
And last but not least a big thanks and loads of kudos to those who has in some way helped me so I could complete my first project:
- Nedicto Entenza Gutierrez, my husband.
- Antonio Rodriguez, my mentor at Code Institute.
- Sawyer, our cooridinator and mental column.
- Gemma our lovely tutor at Code Institute.
- Kera Cudmore, for the README webinar and this README template.