In this project, I hope to display the skills I have learnt so far in coding appealing and eye-catching websites using HTML and CSS. League of Legends is one of the biggest MOBA (Multiplayer Online Battle Arena) games around with 151 unique champions to currently pick and choose from. The purpose of my project is to give insight and indepth knowledge of one of those champions, Lucian. Lucian has one of the biggest skill gaps when comparing new and experienced players, the main goal of my website is to help bridge that gap.

Most League of Legends players choose to 'main' a role and a champ. This means they put most of their play-time into their specific position (Top, jungle, Mid, Bot and Support). Players then also further specialise by putting most of their time into a few specific champions that do well in their preferred role. LoL sites usually focus most of their attention on the statistics of a champ and how their winrate is performing during the current patch (most patches last two weeks). By presenting the knowledge I have gained through play experience in a more graphical nature I can help players gain more knowledge on champs they may not be comfortable playing.

One thing all champions have in common is 3 basic abilites and 1 ultimate ability bound to 4 separate keys (usually QWER) that have varying cooldowns after use. This makes up a champions kit and gives a champion their identity. Champs can also have multiple passive effects which can make learning a champion's combos and playstyle quite daunting.

As a user, I would like to understand the optimal way of spending my champions skill points.

• I achieved this by creating a responsive bootstrap table highlighting the best order to spend Lucian's skill points. Inspired by which can be found on Lucian's u.gg page

As a user, I'd like to learn more about a champion that I'm unfamiliar with.

• This was acheived through my collapse videos and embeds. These showcase all parts of a champions kit, allowing users to see a visual example of an ability/combo in-use.

As a user, I'd like to understand synergies/disadvantages my champ has in relation to other champions.

• This was acheived through the use of progress bars and bootstrap media objects, which relay this information in a visually appealing manner.

As a user, I'd like to know more about a champions itemisation.

• This was acheived through the use of boostrap's grid sturcture and colour coded font awesome icons clearly displaying pros and cons of popular items on Lucian.

As a user, I'd like to know more about Lucians rune tree choice.

• This was acheived through a nested bootstrap image field, bringing attention to his first choice runes and text to provide context.

Main features to include are:

• A full page background showcasing Lucian's 'Splashart' (As league of legends has a very capable and talented artwork team)
• An interactive 3d image carousel used to navigate to different pages within my site (Bonus feature)
• Embed video from YouTube with controls added so video can be paused and started (The video will show gameplay of Lucian and using his abilities)

• This was used to save space on mobile viewing devices

• League of Legends is a game with beautiful images, called splash arts, used to depict their champions in different settings/situations. I wanted to use these images as full width backgrounds - as a way of showcasing them.

• Inspired from the courses Love Running project, there's a slight zoom effect as the page is loaded. This brings even more attention to the full width images.

• All gifs are from either in game footage or game cinematics. This helps produce a positive response from users as they can see chaaracters they may know in action.

• Font awesome icons help sections/words stand out or link to their content (coin icons referring to the ingame currency gold) which helps elicit a positive emotional response from users as they would either recognise the term the icon is paired with or be able to intuitively see what the icon is referring to via its colour.

• 3 interactive cards with a gold hover effect and a teaser of the section they link to. Example, the card that describes lucian laning links to 3 of the top supports that he likes to lane with.

• With 18 skill points available to be spent on a champions 4 abilities, a table was the best way to respresent this data. This allows a user to quickly see at glance where to spend their skill points.

• I made use of a few collapse elements, sourced from bootstrap, to help me display the abilities I described on my abilities page. By using a collapse instead of regular iFrames, it helps bring more interactivity into my site whilst also giving users an action to perform whilst using my site.

• Embedding youtube videos of a champions abilities in action, allows the user to visually see the ability in action next to its explanation.

• All embeds have aspect ratios coded into their display, this was done to stop big black bars appearing when the video was forced to play in the wrong aspect ratio due to fixed heights and widths.

• A visual representation of data rather than just the usual win-rate with/vs x champion. This will help users understand the why behind the data.

• This section showcases use of the boolean atrribute required

• Tooltips on hover over an element to add more interactivity

• Favicon was used to complete my website, as its the little details that count

Potential features to include:

• A forum style page where people can post comments about the state of the champ and his best item build path
• More pages on other Champs from League of Legends. Currently the two links in my dropdown (Samira and Xayah) circle back to my home page. In the full site, these would link to their own specific guides

• HTML

  • Used to create the basic structure of my page

• Bootstrap

  • Used to make styling my page easier
  • Bootstraps java library is also used for two elements, namely the nav collapse and for my tooltips

• CSS

  • Used to make my website unique

• Cloudinary

  • Cloudinary was used as a CDN to help speed up the load times of my site as all my images are hosted there.

• Giphy

  • Giphy was usesd to convert my raw mp4s into gifs. Reducing their file size and lowering the load time of my site.

• Nvidia Shadowplay

  • Was used to record ingame footage from League of Legends.

• Github Pages

  • Github pages was used to host my live site.

• Favicon io

  • Used to generate a favicon for my webpage

• Font Awesome Icons

  • Font awesome was used for all text icons found in my html.

Firstly, after opening github I would open my project in a separate window using the command 'python3 -m http.server' in a new browser window using port 8000. I would have my project open in another window and after altering my code I would save using ctrl + s. To view the result I would refresh the product window using ctrl + shift and the refresh button, fully loading the site instead of loading from my locally cached version.

The Inspect tool was also critical in testing as I only had my iPhone as another viewing device so I could simulate other device sizes using the inspect tool.

I have tested my live site in chrome, firefox, Safari, Opera and Microsoft Edge. The feature I was most worried about not translating was the zoom effect when my page loads. From both my live site and my locally launched site, the feature was preserved.

Before my 2nd call with my mentor, he asked me to deploy my page to Github pages. After doing so, only my boostrap and font awesome links were affecting my page. Almost all my images and my css were not rendering. It was pointed out that the file paths I was using, whilst relative and technically correct when run locally, were wrong when looked at from a live perspective. After some trail and error it was pointed out to me on slack that the paths had to be more precise. The following commits:

• 1a215a0d5bf87e96804dcdca65629a91092657a0
• aebc534ddb729601a4473c8576e94ca1daa12407
• 7e1b6f82c1940e8fa3e57d745cc3c447e76f97ee
• 692c8ea358e70abefbbf79f7cede323b4688354f

were my efforts in getting images to load when my page was loaded from the deployed version. After understanding this all images were subsequently added using properly coded file paths. Once the project was mostly completed, my images were copied to cloudinary and all src attributes were changed to the corresponding cloudinary url. This was commited and pushed to ensure I hadn't made the same mistake.

All fontawesome icons were directly copied from their site and their link is placed in the head of my html documents. CSS was used to style all icons according to the context they were placed in and no bugs were encountered in their use.

The interactive cards were included after a failed carousel. In my wireframes, a 3d carousel is shown and I had wanted to include one however, the one I found wasn't working. I had followed the steps set out in the providers documentation and once I ran my code, the carousel wasn't displaying correctly. Checking the console in a running window, one of the script links was unreachable. This was when I decided to scrap the idea of the carousel and use cards instead. I see cards a lot in web design and wanted to challenge myself to try and duplicate them. This was succesful but I after adding my collapse features from bootstrap, I noticed they had a class called 'card'. Rather than toying with bootstrap, I changed my own classes to "plaque" instead to avoid any conflict as evidenced in this commit:

• 50056fae62dd32de23e5bfd268df3950dd36a524

The responsive table/images were acheived through using bootstrap classes. Tested through multiple breakpoints using chromes inspect tool. Aspect ratio of 16:9 was chosen to avoid big black bars. The responsivity activates for the table once it starts to squish and overlap other elements (this behaviour started below 768px so table-responsive-md was used to combat this).

My progress bars have text in them, at very low screen sizes, I found that longer lines of text would wrap onto the next line therefore the text wouldn't display properly within the progress bar. I fixed this by using a single line of text short enough to convey meaning.

The contact form posts to a server supplied to us by the course during one of the video modules. The purpose of this was to show use of the boolean attribute "required". The response comes in a new window because if it didn't, the only way back to my site would be through the use of the browser's navigation arrows.

My page features two collapse features, one to showcase videos and the other for my navbar. No issues occured with the video collapse feature. Responsive classes and an aspect ratio class were added here to ensure a more pleasant viewing experience. Bootstrap documentation was followed here and no issues arose. For the nav collapse, an icon (in this case I chose the buffer icon as it resembles the normal 3 bars icon but in a more 3d way) is wrapped in a button with data attributes that are targeted by bootstraps java script links. The icon is styled in my css sheet to add visibility.

My favicon worked when running my code locally but wasn't showing when launching my page from the live version. This was because the link elements provided by Favicon.io refer to their images using absolute file paths which doesn't work with github pages. After changing all the link paths to relative, my favicon displayed in my live page.

Deployment was done through github pages and followed this procedure.

• Logging on to github and opening my repository -> clicking on the settings tab -> scrolling down to the "GitHub Pages" section -> Under the "Source" heading the master branch was selected and the "root" folder was selected for github to build my page from. -> the "save" button was then clicked and my page was built at https://futhimhlas.github.io/MS-One/

• Running my code locally is done through gitpod. By signing into my github account and accessing my source code through my github account.

https://css-tricks.com/perfect-full-page-background-image/ -> Here is where I took the css code for the full width backgrounds used in my project

https://stackoverflow.com/questions/17687328/getting-a-link-to-go-to-a-specific-section-on-another-page -> Taught me how to link to a specific part of another html page

https://stackoverflow.com/questions/18075794/bootstrap-table-without-stripe-borders from user David Pastore as the bootstrap class table-borderless wasn't getting rid of the borders in my table

https://www.leaguesplash.com/wp-content/uploads/2013/09/Lucian-Classic.jpg source of 'full-width-lucian.jpg' The image used for my full width background on my index page

https://www.unrankedsmurfs.com/blog/lol-ranks-explained source of 'challenger.png', 'master.jpg' and 'grandmaster.jpg' the three images found at the bottom of my index page.

https://rankedboost.com/assassin-tier-list/ source of "adc.png, assassin.png, mage.png, tank.png and fighter.png" used as dividers and also decoration/badges next to champions name.

https://leagueoflegends.fandom.com/wiki/ source of all other images in my project. (Used in the rune-tree, abilities section and items section)

All gameplay gifs and embed videos I captured myself from the League of Legends game using nvidia shadow play.

The cinematic gif of Lucian battling Thresh came from a cinematic which was turned into a gif using Giphy.

w3schools was a big help when it came to helping me get my css to do exactly what I wanted. (Specifically my 'plaque' at lower screen sizes)

The inspiration for the responsive bootstrap table came from this site.

Rahul pointed me towards features like the table and using cloudinary to help the loading times of my site. He also helped me add more personality to my site by suggesting more icons and the collapse feature.

Provided most of the CSS when it came to this feature

JimLynx_lead helped me when after opening my site in my first deploy, none of my links were loading, only bootstrap. He pointed me towards my file paths which were denoted incorrectly.