The BICA Surf Club website hosts three pages of information about the surf club based in Llangrannog, West Wales.
The website can be found here: https://surfergrl.github.io/bica-surf-club/index.html
The club was set up in 2007, but the website is now badly out of date and the relaunch requires a new site. The club wants to attract new members, volunteers, sponsors and funding.
Users of the site (and members of the club) are age 8+ and have differing levels of technological know-how. Users wil include the surf club members themselves, prospective members, volunteers, sponsors, local residents and visitors.
The website's Home page and Contact page are in Welsh and English, to be welcoming to all, and to meet the criteria for community sport funding (i.e. the main portal should be bilingual).
Aims of this website:
- To allow users to easily find information about what the club offers
- To reduce the admin burden on the club Secretary by presenting information clearly
- To show that the community welcomes all surfers
- To promote the sponsors
- To collect signup information for interested parties
- To allow people to ask for more information
- To showcase the talent of surfers locally
I have chosen to use three different pages rather than sections on one page. This has allowed me to split the information up and organise it into more manageable sections.
The wireframes are available in the assets folder.
One page gives basic information on the club including sponsors.
The Events page is organised to allow people to find suitable activities. Text appears in sections with meaningful headings and includes some images of local surfing.
The Sign Up page allows users to sign up to the club and ask for more information. This directly meets the last two aims of the site.
Validation and Testing
HTML run through W3C validator
CSS run through Jigsaw
Tested on
- Chrome Version 110.0.5481.177 renders as expected
- Firefox 110.0 renders as expected
- Safari 16.2 renders as expected
- Microsoft Edge renders as expected
- Internet Explorer via Edge IE mode poor (as expected)
Acknowledgements Horizontal navigation bar help via this tutorial: https://www.w3schools.com/css/css_navbar_horizontal.asp
Acknowledgement must go to Flexbox Froggy [http://flexboxfroggy.com/] from Codepip for teaching me flex display and the Flexbox cheatsheet [https://flexbox.malven.co/] used for creating column displays. 
Credits
Contact Us page image of Carreg Bica rock: Visit Wales assets https://www.assets.wales.com/assets Crown Copyright
Hero image by Polina Kuzovkova on Unsplash
Local surfer images by Hedz Llewelyn, Carol Vincent and Emily J with permission.
Wave icons created by Ayub Irawan - Flaticon
Bugs
Hero image
I initially chose the image panofeb23-header-s.jpeg (still available in /assets/images) but despite resizing and trying various dispaly options it only ever showed a small portion of the centre of the image. I wanted to include the whole beach panorama. Requested help from Tutor Support who explained that this was not a suitable image as the focus point is too wide. Replaced image with a stock image from Unsplash.
Logo
I initially wanted the logo to sit neatly on the bottom left of the hero image and move along with it. In the end I am happy with it floating a little more freely - this works well with different viewport sizes. In the end I prefer the logo floating off the header image, as it has a different look in what is otherwise a standard aesthetic.
Lists on Events page
I wanted to style the events page lists differently from the list elements making up the navbar but there must be some clash as I cannot get the bullet points to show and the list does not behave as expected (wraps lines). Tutor support could not solve or suggest. Have used hyphens. The code has been left in for future correction.
Deployment
The site has been developed in GitPod using GitHub version control, and deployed on GitHub Pages.
