Click here to visit the live site.
This project was created for Code Institute's first-ever #women-in-tech Hackathon.
We decided to join this event to inspire, connect and grow with Code Institute's Women in Tech community. Each of us has different coding experience, as we are on different levels and from different countries. However, we wanted to work together to create this incredible page. We became a "small coding family" and this friendly atmosphere allowed us to have lots of fun with this project.
We decided to create a webpage that will help other women gather some information from our female mentors about what IT means today, what the IT sector can offer to women, and which path could be the best for each of our visitors and why.
This page was created for women, of all ages, cultures and backgrounds. Some of them:
- Could try to come back to work after a long stay at home with their children (or for any other reason),
- Are not very happy in their own working lives, and want to switch to a different role, especially in the tech industry,
- Want to build a new career in IT and use their previous work and life experiences in the new role,
- Want to upskill their knowledge in new technologies,
- Develop own skills to higher level and become a pro in a specific field in IT.
- Are young girls trying to learn more about the coding and tech world, and the knowledge and tools to get there.
- Know more about our WomXn page,
- Read about inspiring women in TECH community,
- Read a little more about possible paths in IT,
- Easily navigate through the whole website,
- Find contact details,
- Find our social media links.
- New mentors,
- Upcoming events,
- New hackathons,
- Following WomXn on our social media,
- Receiving our newsletter with up to date information.
This page is created by women for women. We decided to use pastel colors, which we choose in a democratic way:)
For good contrast all text on our site (even headings) are black. Our main background colours in RGBA are :
- 225, 180, 211 (pink),
- 174,211, 239 (yellow),
- 234, 211,128 (blue).
In our project we decided to use Comforteaa (for headings) and Monteserrat (for paragraphs) taken from Google Fonts.
It's important for this page, as it improves the user experience.
Wireframes for this project are available here
To keep a consistent layout we decided to keep the same navbar and footer on all of our subpages, these are: Home, Mentors and Events.
This page was inspired by the Netflix page. We wanted it to have a similar effect, which we achived. We have only limited data here, with the mentor and events pages in the navbar and our social media links in the footer. At the center of the home page, on the hero image, there is a call to action button which allows our users to register to our newsletter.
Here are presented womXn mentors who are passionate about technology. Our visitors can read more about backgrounds and cultures, their work and paths which they have chosen. They also can register to get access to be able to connect with our mentors and be part of the program provided by womXn.
This is the "cream de la cream" in our projects. Here our visitors:
- can join us for our weekly tech talks (in section TECH TALKS),
- improve their own skills in our WomXn's Online Web Development Bootcamp, available in CODING BOOTCAMP section,
- or work during WOMXN HACKATHON which is an intensive event where our users will be presented with a problem and will have 5 days to come up with a really good solution.
- Bootstrap
- Figma
- Gitpod
- GitHub
- Git
- Git Pages
- Google Fonts
- Font Awesome
- FavIcon
- Google Chrome Developer Tools
- Techsini
In our opinion, this project covers all users needs descibed in the section above.
All links working fine, just like we wanted.
Yes, our page is responsive :)
To validate this project we used:
Our project works fine on different browsers. It was tesed on :
- Google Chrome
- Mozilla
- Opera
Was made, as well.
- Performance 97
- Accesibility 93
- Best practis 93
- SEO 80
- Performance 75
- Accesibility 97
- Best practis 93
- SEO 83
To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:
- log into GitHub.
- From the list of repositories on the screen, select madatoo/ms2-sligo
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, the website is now deployed.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
Run this project locally (clone this project into Gitpod) you will need:
- a Github account. Create a Github account here
- use the browser with extention for gitpod Then follow these steps:
- Install the Gitpod Browser Extentions for your browser
- After installation, restart the browser
- Log into Gitpod with your gitpod account.
- Navigate to the Project GitHub repository
- Click the green "Gitpod" button in the top right corner of the respository
- This will trigger a new gitpod workspace to be created from the code in github where you can work locally.
Content was created by us. We were looking at similar pages to get some ideas about how this page should look like. Below we listed some from our main sources in this project. Feel free to get some inspiration from us :)
- Images are taken from :
- Colors inspirations:
- Font inspirations:
- Layout inspirations:
-
Code Institute for an opportunity to meet, have fun, build a community #women-in-tech and allowing us to work together to build this page.
-
Our mentor Jim_Lynx
-
All team members:
- Carolina Cobo,
- Elrie,
- Joan Amudu,
- Magdalena Ruszaj,
- Vanja
Content on this page is created only for first #women-in-tech Hackathon in Code Institute.