First Collaborative Project at Adalab Bootcamp

The Godmothers: Passionate Front-End developers

Table of Contents

1. Introduction

2. Installation

3. Description

4. User Stories

5. Team members

---

1. Introduction

This repository includes the group project of Module 1 of the Web Development bootcamp of Adalab, a Front-End development course focused on women without previous programming knowledge.

This project has been carried out by 5 students and it has been our first collaborative website developed. For this we have created a website with the social information of all team members.

---

2. Installation

It requires node.js

Run the following commands in order to have the code up and running on your machine:

   # installs dependencies 
  npm install
   # Runs the app in the development mode.
   # Open http://localhost:3000 to view it in the browser.
   # The page will reload if you make edits.
   # You will also see any errors in the console.
  npm start

---

3. Description

The website consists of several pages:

1. A Home page with the main information about the 5 members of the team.
2. A Contact page with a form so anyone can get in touch with us.

• Technological stack applied in this project:

1. Layout: HTML5, CSS3, Flexbox, CSS Grid, SASS, BEM

2. Use of mediaqueries and other responsive design techniques so that the web adapts to the screen size of different devices
3. Handling of Slack, GitHub, GitHub projects, GitHub pages, VSCode, Gulp, Terminal, Zeplin.

• Working methodology:

1. Planning and executing projects under the Scrum/Agile framework.

2. Using git for project version control as a team

3. Publishing the result to the Internet using GitHub Pages

4. Implementation of Scrum as a reference framework for product development, always based on Agile values as key points of teamwork and continuous improvement

5. Fluid communication among team members

   All pages have a header and a footer. In the header appears the name of the team and a navigation menu that remain fixed at the top of the window when scrolling. At the bottom of the page appears the copyright, another menu and the Adalab logo.

   On the main page, it appears a photo with the claim of the team. A "Team" section with its description and our strengths and weaknesses, a "About us" section with summarized information on each member team: name, photo, short bio and social links (Twitter, LinkedIn, GitHub and email).

   On the contact page there will be a form that collects contact information such as full name, email, phone and message, and a button to submit it.

The main and contact pages have an established design. The design is made for 3 device sizes:

1. Mobile, under 768px

2. Tablet, from 768px to 1200px

3. Desktop, from 1200px

---

4. User Stories

For project management, we will use user stories, a tool to define the characteristics of a product.

1. Mobile version of the web Develop the mobile version of the web (main page) with HTML and CSC Create the web content: texts and images Create the necessary infrastructure: repository on GitHub and with access for all team members

2. Responsive version of the web Make the web for the rest of screen sizes (tablet, desktop)

3. Technology upgrade Integration with gulp to automate tasks Divide HTML into partials Pass CSS to Sass (also using partials)

4. Contact Form Make the contact form for all devices Make the submission work using the formspree.io service

---

5. Team members

Esther Fernández

Sofía Blas

Ángeles Martínez

María Rodríguez

Norma Rivas