Static website to promote the Limerick Kettlebell Club and Kettlebell Sport around Limerick city, Ireland. This project is the first milestone in obtaining a Full Stack Web Development diploma from Code Institute
I kept a journal during the development about my daily activities, see it here frozen in time or live.
- 1. UX design
- 2. Features Left to Implement
- 3. Technologies and Tools Used
- 4. Issues solved during development
- 5. Testing
- 6. Deployment
- 7. Credits
Stakeholders of the website:
- visitor - a person visiting the website, not a club member
- member - club member, who actively trains or trained with the club
- officer - affiliated with the club who executes or organises club matters though official capacity
- AIKLF - sport organization which the club is associated with
| G# | User | Goals, Needs, Objectives |
|---|---|---|
| G1 | AIKLF | member organizations feature their affiliation with national (AIKLF) and world organization (IUKL) in info materials |
| G2 | officer | provide adequate, easy access training facilities with certified instructors at fair price in popular day/week times |
| G3 | officer | increase number of active members by attracting new members and retaining current members |
| G4 | officer | organise workshops for the public and other gym trainers |
| G5 | officer | promote the club via members’ social networks |
| G6 | officer | make available club documents, rules, photos and forms |
| G7 | officer | present an attractive image of the club to the public |
| G8 | officer | inform about out of ordinary events (e.g. competition results, upcoming events, closure, etc.) |
| G9 | officer | send out low cost instant delivery periodicals and notifications to individuals who signed up for it |
| G10 | officer | facilitate calendar where members can sign up to events or cancel the same |
| G11 | officer | inform about the history of Kettlebell and Kettlebell Sport |
| G12 | visitor | find training community which caters for my particulars and interests (gender, age, experience level, dedication to training) |
| G13 | visitor | learn about training related questions of what, why, how, who, when, where |
| G14 | visitor | learn about venue facilities: reception, change room, locker, parking, price, discount |
| G15 | visitor | learn about tools used for training |
| G16 | visitor | learn what to expect on the first training |
| G17 | officer | make available template training plans |
| G18 | member | our heroes: get information about club related competition results |
| G19 | officer | increase our authority on the subject in the eyes of the visitors |
It has been decided to create a static website. In light of that decision we do not go forward with
- G5: this goal would be for presence on a social network site, not for a homepage,
- G10: the calendar functionality would require database and programming, therefore out of scope for now,
- G17: at the moment could not obtain these training plans
The following table lists the planned features, each feature referenced with original goal(s):
| F# | Goal | Feature |
|---|---|---|
| F1 | G3 | build a custom static website with responsive pages for mobile, tablet and desktop |
| F2 | have navigation bar on each pages | |
| F3 | G1, G19 | display LKC’s logo and name, display club’s affiliation with AIKLF and IUKL with logo, name and link, provide description about each |
| F4 | G16 | provide description about how to prepare, what to bring, what to expect on the first training |
| F5 | G7, G12 | display attractive photos and texts, member testimonials |
| F6 | G13, G19 | describe what we do |
| F7 | G13 | describe why we train |
| F8 | G13, G19 | describe how: training methods |
| F9 | G13, G19 | describe who we are, how to contact us |
| F10 | G13 | inform about training times |
| F11 | G13 | describe where we train including venue facilities |
| F12 | G8 | present news articles |
| F13 | G8, G9, G18 | sign up to newsletter (email) |
| F14 | G6, G16 | ask Medical Form to be filled |
| F15 | G3 | allow first time applicant to announce self for training, so coach is notified, can learn more beforehand, this way improving first time experience |
| F16 | G3, G6, G14 | explain membership |
| F20 | G10 | display an event/training calendar, allow members to sign up/off |
- As a club coach I want to make available all information that I think needs to be known before a new joiner enters the gym, so I can spare time on explaining things on the first occasion or in emails.
- As a club coach I want to make available a Fitness Self Assessment form to receive it filled from the joiner, so I can train the new joiner more on the first occasion.
- As a website visitor with intent of starting training, I want to access all relevant information on one website about kettlebell training with the club so I could join training without raising any further questions.
- As a website visitor with intent on joining my first training with the club, I want to announce my arrival, so they know my name, my background and they will expect me.
- As a club member I want to access news articles about upcoming and past club related events, so I can be well informed
- As a club officer I want to make club governance documents available to the public so they are accessible by anyone and any time without extra effort by the club.
- As a club officer I want to make clear the club’s national and international affiliation so new joiners can expect quality training.
The structure of the website to be built consist of
- a Home page with short leads - all pointing to longer descriptions on the About page,
- a long About page receiving traffic from the landing page with many sections with bookmark navigation, end of all sections refer back to Home with link
- a SignUp page to sign up to receive emails
- a picture Gallery page about training, meetups, competitions
- a News page related to club events
- a TryOut page with every important to know for the first training
- a Safety (rules) page to govern the behaviours in the gym
- a Mission (statement) page
- a Constitution page
Feature list in page/section structure with content hinting and navigation links. The following table is a sample, describes the page TryOut. Check out the whole list here in PDF format.
| Page / section | Feature# | Feature / Content description | Link or Action |
|---|---|---|---|
| TryOut | F4 | come to your first free training | |
| navbar | F2 | same as on Home | |
| F4 | all you need to know for the first occasion: clothes, footwear, water, eating, attention from coach (first line - last line) | https://www.youtube.com/watch?v=cKx8xE8jJZs | |
| F4 | - coach led, instructed exercises with kettlebell or bodyweight, - everybody is doing the same, but varied to strength level and experience, - length, composition of training, - new joiners get more attention to ramp up their skills, - coach gives out correction instructions to individuals to improve form, - number of attendees are not limited, enabled by the size of the court |
||
| F14 | If you can, download, print, fill, sign Medical Self Assessment | file MedicalSelfAssessment |
|
| F15 | Give us a heads up: Form: name /email / telephone / about yourself + Submit button |
Send email to coach |
Created wireframes for TryOut page in 3 width, see the others as well here or the balsamiq file here.
Used the website coolors.co to come up with base colors for styling:
Also decided that for secondary colors will use kettlebell weight color codes. See this image for sample of those colors:
Chose font Roboto for the headers.
- Gallery page - Show images/videos about trainings, competitions and meet-ups
- SignUp page - Let visitors sign up with email address for newsletter
- News page - collection of news items in date descending order, 2 of the news articles goes on the Home page into
newssection - store news articles in database, automatically fill News page with them, enable news article editing to authorized users
- send a selected group of articles in email to subscribers
- create Calendar page of actual month, add reference date field to news articles, fill calendar page with news titles which have reference date in given month
- The project's product (the website) was written in HTML and CSS, utilising Bootstrap 5.0 Beta framework (which itself uses CSS and JavaScript). Bootstrap is used for its responsive utilities. There is a petite JavaScript in
index.htmlto solve a specific issue. - The images were manipulated with program Paint.NET. Mainly used for cropping, resizing, background removal and format conversion.
- Created wireframes with program from balsamiq
- Written study notes and collected textual content on Google Docs
- The code was edited with Visual Studio Code, the preview was provided via Live Server VS Code extension.
- The code versions were managed with Git
- The code and project deliverables are stored on cloud service Github repository with versions.
- The website is deployed on GitHub Pages
- The development machine runs Windows 7 operating system.
- The website was tested on desktop on Chrome and Firefox web browsers, also on a OnePlus2 mobile phone running Android and mobile Chrome browser.
- Generated favicons with Favicon & App Icon Generator
- Generated one image (on top of this Readme) of how the website looks on different size devices with Am I Responsive
- Played with colors on coolors, chose the base colors with it
- Chose font using Google Fonts
- run CSS code through Autoprefixer CSS online to supplement suggested vendor prefixes
- Searched the internet to find content, documentation and solution for issues using Google's search service.
- connected to the internet using Vodafone's broadband service.
At late stage added the top-fixed navbar to all pages. Before it was only on Home. After the change realised, that when jumping from Home to About to a specific section, e.g. who, the title of that section is not visible, because the target section get scrolled to the top of the page and the navbar obscures the top of the section.
Found solution here.
For each section created its own achor tag, e.g. for who:
<a class="nav-anchor-negative" id="who"></a>and the class definition in style.css:
.nav-anchor-negative {
position:relative;
top: -4rem;
}The solution creates a relative positioned anchor tag above its normal place, so the jump target becomes above the real target, so the target section gets positioned right below the navbar.
Home page / Hero image / Call To Action button did not work, although I implemented the same way as we did in the "Whiskey Drop" project. After some debugging I concluded that the opacity layer is in the way, which prevents the clicking. When I commented out this layer, the button worked. Tried to play with CSS z-index, but was not satisfied with the lot of changes it required just to set up the necessary order of objects, only to make it work.
Found solution here / Method 2. In essence, I threw out the <div> <div> from HTML and put the opacity layer functionality into .hero:before in style.css, where .hero holds the content displayed above the hero image.
code in index.html:
<!-- HEADER - HERO section -->
<header class="hero ...">
...
</header>code in style.css:
.hero {
position: relative;
...
}
.hero:before {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url(...) center center / cover no-repeat;
background-color: ...;
opacity: 0.4;
z-index: -1;
}When created constitution.html page, where I have a long document with numbered sections, I wanted to style each list item's first paragraph as a heading (e.g.<h2>. When I did that, the number in front of the paragraph was not styled the same way. See expected result here:
I could not find simple solution on the internet, so I solved this way:
<ol class="... list-with-header">
<li>
<p>Name and Affiliation of Club</p>
<p>The name of the Club shall be ...</p>
</li>
<li>
<p>Club Mission</p>
<p>To promote Kettlebell sport by creating a ...</p>
</li>
...
</ol>and styling in style.css:
/* style the numbers of the <li>s of <ol> */
.list-with-header > li {
font-size: 1.5rem;
}
/* then dial back for the child elements (except for the first one) */
.list-with-header > li > *:not(:first-child) {
font-size: 1rem;
}Solution: I figured, that to style the numbers, I need to style the whole <ol> and then restore the normal style (font-height) for every child element, except the first one.
Issue: I wanted content hinting on the landing page, by revealing at the bottom of the screen, that the page continues further below the hero image. To achive that, I used height: 89vh on the container of the hero image. To my surprise, the 89vh was not enough on mobile devices, although it looked ok during preview on simulated mobile device screen sizes. Se expected on the left, reality on the right.
The problem is that the browser on a mobile device determines the VH unit in a different way from the browser on a desktop. See issue and solution here
Applied solution: created variable --vh89 on Home page to determine the 89% of "real" VH (Vieport Height) for mobile device browsers:
<script>
function setRealVieportHeightVariable(){
let vh89 = window.innerHeight * 0.89;
document.documentElement.style.setProperty('--vh89', `${vh89}px`);
};
setRealVieportHeightVariable();
window.addEventListener('resize', setRealVieportHeightVariable);
</script>The event listener is there for capturing the orientation change between portrait and landscape.
And used the variable --vh89 in the style.css:
.hero {
height: 89vh;
height: var(--vh89);
min-height: 27rem;
...
}First step in testing was the validation of HTML and CSS code with Markup Validation Service and CSS Validation Service respectively. I did the validations a couple of times during development and once at the end. Now all 6 html pages validate to "Document checking completed. No errors or warnings to show.". The style.css file validates to "Congratulations! No Error Found."
The whole testing were conducted manually.
Here is a sample from the test log, see the complete document here
Background:
Desktop device is a desktop Windows 7 operating system running Chrome (on 1920x1080 pixels screen) and Firefox browser (on 1600x1200 pixels screen)
Mobile device is a OnePlus2 mobile phone running OxigenOS 3.6.1 (eq. Android 6.0.1) and Chrome Mobile browser on screen resolution 1080x1920 pixels
User Story:
As a website visitor with intent on joining my first training with the club, I want to announce my arrival, so they know my name, my background and they will expect me.
Scenario: visitor is interested in joining a training session
And may provide a valid email address OR may not
And provides a personal message
Given visitor is on the TryOut page
When scrolls to the HeadsUp section to the form with 3 fields and Send button
And enters something into “Your name” field
And enters a valid email address into “Your email” field OR leaves it empty
And enters something into “Tell us about yourself” field
And clicks on the Send button
Then the form is sent
And new page opens in a separate browser tab with a table of two columns of sent data: (“Input Name”, “Value”)
And there is a table row with values (applicantname, <entered value of “Your name” field>)
And there is a table row with values (applicantemail, <entered value of “Your email” field> OR empty)
And there is a table row with values (applicantstory, <entered value of “Tell us about yourself” field>)
| Test no. | Pre-condition | Event | Expected | Result | Comment |
|---|---|---|---|---|---|
| 1 | on Desktop Chrome, TryOut page is open | - Scroll to the section "Heads Up!" - Enter "Visitor" into form field “Your name”, - Enter "visitor@gmail.com" into field "Your email" - Enter "hello" into field “Tell us about yourself” - Click on button "Send" |
new page opens in a separate browser tab with a table of (Input Name, Value) (applicantname, Visitor) (applicantemail, visitor@gmail.com) (applicantstory, hello) |
pass | - |
The website performs on desktop and mobile devices as intended, no responsivity issues were found.
No additional bugs were discovered during the final testing.
The website is deployed to GitHub Pages automatically by GitHub. The assigned web address is ruszkipista.github.io/cims01-lkc/. I followed this tutorial to deploy the project on GitHub Pages, these were the steps:
- On GitHub navigate to the repository's main page
- Under your repository name, click Settings
- Under "GitHub Pages", use the None or Branch drop-down menu and select a publishing source
- Optionally, use the drop-down menu to select a folder for your publishing source
- Click Save
- After a while you are presented whith this status message at the same place
If you want to deploy this project to a different hosting solution, you need to copy all the files from this repository. Follow the repository cloning steps from this tutorial.
After you have your local copies of these files, you copy them into the home folder of the webserver, keeping the folder structure as is.
Just because this is a static website, you can even start up the Home page by double clicking on the index.html file in your local file system - effectively launching you default browser with the starting page.
My inspiration for this project came from the experience of lack of information when I was looking for a kettlebell group in Limerick to train with. I thank Nishant Kumar for mentoring me during the project.
The text built into the pages came from the following sources:
- Club coach Nancy Flexman - especially the Mission Statement and Club Constitution, club history, training composition
- various kettlebell specific websites, see the exact source in the code
- fitness self assessment form is from https://www.sampleforms.com/fitness-assessment-form.html
- the TryOut page is my own writing (except the "Training session", that is from Nancy)
See the source of images in the code comments. Here is the short list sources:
- hero picture is from the club's facebook site
- logos are from their respective organization's website
- kettlebell images are mainly from www.kettlebellkings.com
- movement phases images from www.kettlebellsport.eu
- google map widget of Fit100 is from their website www.fit100hq.com/