Static responsive website - Stream 1 Project I'm a member of Caerphilly Cycling Club. We have a serviceable website, it's static, has not been changed in more than 5 years but generally the content is good. The main failing of the site is that it is not responsive. Given that during the last 5 years most users have moved from desktop to mobile devices to view the site this issue needs to be addressed. From a design point of view the design is dated and does not reflect the dynamic nature of the group.
A live demo of this project can be found here.
need to find out about the club - rides, how to prepare for a ride, how to join the club, what kind of riders already belong to the club.
May need to check club rules. See information on club rides. See recent photos. Foster a sense of pride in the club.
May want to contact the club to make complaints about club members road use.
Ask for advice from the club members and committee about policy decisions.
The use of a template would have made this a very simple task but the purpose is to demonstrate my coding technique and to aid my understanding of HTML/CSS therefore no template was used to build this site. Some existing designs that were taken into consideration when styling this site. Specifically the Code institute 'Love running' site and the Bootstrap resume example. The club logo and club colours were already set. To reflect the vibrant nature of the club I wanted to include some animation, video images generally the feeling of movement. There was an issue with responsiveness, the top navigation bar did not collapse on mobiles and took up most of the real estate on a mobile screen. It was important the new design resolved this.
- HTML5
- CSS
- Boostrap 4
Pages were built and staged in Visual Studio Code before being commited to Github.
Mobile first. Grid system. Visual Studio Code. Correct semantics.
Define strategy, build wireframes, finalise fonts/colour schemes/images
Check for look and feel
test at different resolutions.
duplicate Header and footer of index, build other pages, test
Build form Test entire site at various resolutions and using online testing tools