In the second module of the course we have to make a web page to create digital cards for the Adalab Tech Summit, the first convention for the Adalabers community.
On the website, you will be able to complete the accreditation process to get your place in this event that will unite all Adalab promotions and the best speakers of the moment. Once the accreditation form has been completed, users will be able to share the card on social networks, such as Twitter.
The registration website for this meeting, according to the client's request that our Product Owner told us, is composed of two pages, both interactive and with a responsive design that starts with a mobile first design.
The two parts of the page are as follows:
First, a welcome page, where the event is briefly presented and from which there is a button to access the accreditation form. From the footer icon you can access the page of the event organizer, Adalab.
The second page is the one that allows us to register, with the creation of a digital card, which as we mentioned before, can be shared on twitter or you will have a link to send it by email or share it on other social networks.
Inside the form we have 3 sections:
DESIGN: To identify the different attendees of the event, we will have different color palettes, for organizers and teachers, guests and Adalabers, both Front-end Developers and Data Analitics, and a different one for speakers.
FILL IN: In this part of the form, we have some mandatory fields, for which if they are not filled in, it will not allow us to create the card. We also have the email field, which if it does not have a correct pattern, it will not allow us to create the card thanks to a validation.
SHARE: In this section, we have a button that allows us to create the digital ID card, as long as the required fields and the email validation is correct. In case it is not, we have an alert message for each of the situations.
In addition, in this section, we will have the link of the card that we have sent to the server.
We also have direct access to Twitter to share this link, including in this Twit a message and a predefined hashtag.
In addition, the information of the created card can be stored in the Local Storage.
At the same time you are filling the form, you can see how the card looks like in the preview section.
HTML, CSS, SASS, JS
Zeplin
Vs Code
GitHub
GitHub Pages
Adalab Web Starter Kit
This project has been supervised by:
Yanelis Serrano @ytaylordev
© Adalab 2023 | Trótula Promotion