My portfolio showcases the projects I have completed during my Web Development course.
A page created with HTML and CSS as an introduction to basic web design. This incorporates colour gradients, transitions and a change in font-size and weight when list items are hovered over.
Fruit Slice Game.
App Landing Page
The landing page uses HTML, CSS, jQuery and Bootstrap. It is responsive for different device sizes. The jumbotron contains a logo, the title, two paragraphs and two buttons. The buttons are opaque until hovered over, and then transform to a solid colour. The trial images are linked to wikimedia.org.
Make An Awesome Website
A responsive website made using HTML, CSS, jQuery, Bootstrap and Google Fonts. When used on small and extra small devices, the navbar collapses and shows a toggle button with icon bars. When clicked on, this will show the list items floating to the left-hand side. The icons have been set in a Bootstrap grid system and will stack when the width of the screen decreases and return to a vertical line when the width increases. Each list item in the navbar includes a caret for a dropdown list. When hovered over, the text will change to white and a hidden green line will appear. The opaque green button will change to an opaque grey colour when hovered over and clicked on.
Our Lovely Course
A responsive web page made using HTML, CSS, jQuery, Bootstrap and Google Fonts. The background is a moving video which has been muted and set to autoplay on a loop. The navbar is fixed to the top of the page and collapses upon reduction of screen size, with a toggle button and icon bars which when clicked on, show the menu items floating to the left-hand side. The navbar is targeted with a data-spy, so the links will automatically update when the corresponding page is reached. In this case their background and text colours will change. The site contains a jumbotron, the Bootstrap grid system, a carousel with indicators and direction arrows and a footer.
An app using HTML, CSS, jQuery and Bootstrap. The app consists of 5 buttons, 3 of which are hidden on page load. When clicked on the buttons will change from an orange background with white text to a white background with orange text for 1 second. When the ‘Start’ button’ is selected, it will be hidden and the ‘Stop’ button will be shown. When ‘Stop’ is selected it will be hidden and the ‘Resume’ button will be shown. At the same time, the ‘Lap’ button will be hidden and the ‘Reset’ button will be shown. There are two counters set to hours: seconds: milliseconds. The large counter aligned to the centre is the main counter, whilst the smaller counter aligned to the top-right is the lap-counter. When the ‘lap’ counter is clicked on, the counter will go back to 00:00:00 and start again and the last lap-time will be printed at the bottom of the screen. The most recent lap-time will be shown at the top of the list.
Online Notes App
Speed Reader App for IOS and Android
Distance Between Cities App