Posts by Keith Rowles

Experimenting using Bootstrap CSS to recreate the main projects page of Monday with a sprinkle of custom css.

CSS

Experimenting using Bootstrap CSS to recreate the get Bootstrap documents website with a sprinkle of css.

CSS

Experimenting using Bootstrap CSS to recreate the home page of the Grammarly website with a sprinkle of css.

CSS

Book reading list web application using Google Firebase 9 for the database, auth and hosting.

Vue

A React JS dashboard application built with SyncFusion, a component library with production ready components.

React

A Vue JS web application where you can create your favourite music playlist and add songs to the playlist.

Vue

Multi-page project using the NEW v6.4 react router dom to create a website that pulls data from a web API.

React

React JS multi-page project management website with authentication, database storage, file storage and Google hosting.

React

A Vue JS chat application using the composition api, Firebase for the authentication, database and hosting.

Vue

React JS single page application expense tracker with authentication, database storage and cloud hosting with Google Firebase.

React

A full CRUD Vue JS workout application using Supabase for the authentication and data storage.

Vue

A tiny to do list Vue JS animation project with routing, GSAP, custom toasts and vue transitions.

Vue

This web application displays recipes created with Next JS as the site generator and Contentful as the headless CMS.

React

A static blog website created with Next JS plus Markdown files. Styled with the Daisy UI Tailwind CSS library.

React

A simple website displaying users from the JSON placeholder website using the React SSG Next JS.

React

A single page application (spa) built with css, html and vanilla javascript - no frameworks used.

JavaScript

Fun sticky notes application built with vanilla javascript and using local storage to store your notes.

JavaScript

Created a simple task list dashboard application with Chakra UI, a component library with production ready components.

React

Playing around with SASS library - testing variables, mixins, partials, maps, lists, loops, functions and more.

CSS

A website landing page with a header, hero section, cards and footer built with React and Styled Components.

React

Created a products dashboard with Material UI, a component library with production ready components.

React

In this project, I have built out a basic blogging website using the 11ty static site generator.

Site Generators

Testing out supercharged css variables, design tokens and components with Open Props.

HTML

Testing out the Shoelace Style highly customisable ui web component library using their CDN.

HTML

A simple website displaying posts from the JSON placeholder website using the Next JS framework.

React

Simple demonstration of a single web page where you scroll and the sections snap to point.

CSS

Created a basic WordPress website to display my graphic design projects - logos, flyers, banners, merch and more.

Site Generators

Created a Vue JS Vitepress documentation website to display data analysis projects - sql, tableau, excel and python.

Vue

A Vue JS APP - single page expense tracker application using local storage for data persistance.

Vue

Playing around with W3 CSS using the CDN. This is an alternative to Bootstrap. Small, fast and easy to use.

Framework

Built a basic blog site using the 11ty site generator. YouTube series by Kevin Powell.

Site Generators

Fun drag and drop sortable list using javascript, css and html.

JavaScript

Modern responsive landing page with a navbar, hero section, social icons and a video playing in the background.

HTML

Here a few examples using CSS to create some basic animations on a web page.

CSS

Here a few examples using CSS to create linear and radial gradients on some block level div elements.

CSS

Using the JQuery JavaScript library to select and animate various html elements on a webpage and styling css.

Framework

Created a single page application(spa) using the HTML template tag and vanilla javascript.

HTML

This is an mobile first responsive landing page for a website using the bootstrap css framework.

Framework

Created a custom tooltip web component using vanilla javascript, shadow dom, shadowroot, templates and slots.

JavaScript

Created a simple layout with the Daisy UI Component library with sprinkling of Tailwind CSS.

Framework

The Vue JS library using CDN links showing dynamic components - home, about and contact page with routing.

Vue

Playing around with html document object model (dom) and changing elements using javascript.

JavaScript

Using the JQuery JavaScript library to select and traverse various html elements on a webpage and adding a class.

Framework

Playing around with the Vue JS library using CDN links. 3 examples - product page, data binding and dynamic pages.

Vue

Multiple responsive layouts using css grid - 12 col, masonry, portfolio, multi col and the holy grail examples.

CSS

Simple demonstration of a responsive layout using css grid - header, aside, main, footer and navigation areas.

CSS

CSS Flexbox Crash Course from Traversy Media - hero section, nav bar and cards.

CSS

From Front End Mentors - we need to create a coloured testimonial section using css grid.

CSS

Here we create a modal with the html dialog element, javascript and Open Props css library.

JavaScript

Experimenting with the most popular CSS Framwork - Bootstrap CSS library using the CDN.

Framework

Lots of examples using CSS Flexbox - row, gap, column, wrap, justify, align and items.

CSS

Here we create a pricing component showing available plans plus the best deal using css variables.

CSS

Lots of examples using CSS Grid - inline, gap, column, row, auto and more.

CSS

Playing around with javascript array methods (join, pop, push +) and iteration (map, filter, reduce +) plus more.

JavaScript

Playing around with the underscore js library to test out the useful functions and helpers.

JavaScript

A fun memory game using React JS. Keeps track of how many turns you take to complete.

React

Experimenting with the open source UI Kit CSS library using the CDN.

Framework

Experimenting with the open source Bulma CSS library using the CDN.

Framework

Some examples of React JS using CDN links. useState, useEffect, createRoot and vanilla js.

React

A simple demonstration on how to use the parsley js validation library to validate a website form.

JavaScript

Playing around with plain old CSS - selectors, pseudo classes, attributes, variables and more.

CSS

Demonstrating how to use local storage to store text data with a simple todo list application.

JavaScript

A small javascript project where you can filter a contact list of people by their name.

JavaScript

Completed the Net Ninja Gatsby JS tutorial to create a blog website then deployed to Netlify.

Framework

Some different ways of playing around with AJAX? Getting and displaying data from from a server!

JavaScript

React JS single page application SPA - task tracker where you can add and delete tasks.

React

A test blog website using JSON Placeholder posts API as the dummy datasource - add, delete and view posts.

React

A simple auto complete tool to filter out world countries. Use country name or abbreviation.

JavaScript

Using vanilla Javascript, HTML and CSS we can build a pounds to kilogram weight conversion calculator.

JavaScript

A few examples using the standard for loop and the ForEach loop to output some arrays.

JavaScript