Below is the frontend task give by @mark for this week.

Slack Link

• To build a master class hotel website showing all the excellent features of the hotel. Making it look as close to the design as possible.

  After the development, users should be able to

  1. View the optimal layout for the site depending on their device's screen size

  2. See hover states for all interactive elements on the page

• Upload the website to free theme-selling directories

• Get as many downloads as possible

The Frontend team has been sectioned into groups, with each group expected to work on a design. As this would be a group project, I suggest we check the guide on GitHub projects. The group leader for group 1 is @victorAnumudu. Click here for instructions on how to setup before working on this project.

Five designs were sent to the frontend team by the UI/UX designers. These designs were graded by the design team and reviewed by @KingDavid before being sent to the frontend team. Each design was allocated to one group. The design for group 4 can be found here. It was created by @Dhabs

• The objectives guiding the group

  • consistency with the design templates
  • mobile readiness (responsiveness)
  • cross browser consistency
  • ease of customizability
  • use of high assets

• Sharing of Tasks

  There are about 5 pages on the design so the group is spilt into five subgroups, each working on a page, making the workflow easy and time saving.

  Each member of team-fury group4 took time to study the design on the Figma board. They asked the designer for images of the design which they put in the assets/images folder for easy access. The assets are optimized. The project is then initialized on HNG organization repository given to us on GitHub. Every member of the team then forks the repo and start working on their various tasks. The group thinks ahead for CSS classes that could be created to make reusable styles. The HTML is written first which helps focus attention on creating a well-structured content. Styles are then added from the top down.

  Whenever a subgroup is done with their task, they push to github then make a pull request to the group's branch which will be merged by the group's git manager. After each pull request has been merged,other subgroups will then update their repo to avoid conflict.

  After each subgroup is done with their pages, ten group members are selected to work on the responsiveness of the website, that is two persons for each design page after which five other group members clean up and format the code. The website is then tested across all major browsers.

The website is quite simple and the technologies used are as follows;

1. HTML

2. CSS

3. JavaScript

The website has no framework or libraries

Lay-out

The design were created to the following width

• Mobile: 375px
• Ipad: 767px
• Desktop: 1440px

Colors

• Rgb(235,57,46)
• Rgb(255,255,255)
• Rgb(57,57,57)
• Rgb(105,105,105)

Fonts

• Family: Raleway
• Family: PT Serif
• Weights: 300, 400, 600, 700

The hotel websites are to be uploaded to theme-selling directories for free. The proposed theme-selling directories are

• Theme Forest
• Templatic
• Flippa

Suggestions of other directories can be made to @p_yn3 or @codessage on slack.

The goal of the marketing team is to increase the number of downloads across all directories to a minimum of 1000. Our target audience is anybody with access to the internet and the ultimate goal is to reach out to organizations in need of websites.]{?'pyut5458}

We intend to make use of social media platforms and digital marketers. The members of team-fury are expected to share the download links to all their social media platforms

For information on how to contribute, click here

Please read HNG Team Fury's Code of Conduct. It is important that you follow the code to ensure that everyone remains professional and fair.

@Idadel @Aimes @F3mmieq234i @olimeed

@Adekniyi @Osi @dotmanl

@DR-oxy @Oduche @Daveisking @nocodename

@VictorAnumudu @Onyedikachi @Segtron @Nwaiwu victoria

@Ayopips @Aimes @Reehah

@Adekniyi @Aimes @Adekniyi @Nocodename @Idadel @victorAnumudu @Dr-oxy @abass

@Aimes @Dr-oxy @Nocodename @VictorAnumudu @Idadel

@Dhabs

@p_yn3 @Prechy @Oyedeyeye