Broken images are ugly. But they don’t always have to be. We can use CSS to apply styles to the img element to provide a better experience than the default. To understand how we can style broken images, there are two facts about the way the img element behaves that we need to understand first...
Over the past 5 months, I have been doing Udacity’s Senior Web Developer Nanodegree. For my final Capstone project (I've graduated now! I had to create my own web application that would function just as a native mobile application would, using all I learned throughout the Nanodegree ...
In order to launch an Angular application, we need to bootstrap it. Bootstrapping is a way for us to tell Angular where to start running our application....
We all know that accessibility is important. The problem is, it is not always clear what exactly we can do to make our sites more accessible. The Web Accessibility Initiative created some Web Content Accessibility Guidelines (WCAG) targeted at us, web content developers, to create more accessible websites...
The negation pseudo-class, :not, can be incredibly useful. It allows us to target elements based on what attributes they don't have, rather than what they do. This helps us avoid writing extra, increasingly specific, rules in an attempt to override previous ones. ...
In this tutorial, I'm going to go over how to setup a new Angular 2 project. We will be using the following - Typescript, Angular (version 2.0.0), and Angular CLI (version 1.0.0-beta.15). ...
Design Front-End Development Project Management
Modé, the founder of the Studio of Modé, and I worked on the design together, and I developed the website on a combination of Wordpress and Shopify. The website is divided into three main parts - Modé's portfolfio (SEE), the studio and gallery space (STUDIO), and the online shop (SHOP). A key aspect of the design of the website was to make it seem as minimal as possible, despite the large amount of information avaiable. It was particularly important to have the website completely accessible on all devices due to the younger audience.
Front-End Development Design Project Management
This is a Progressive Web Application I designed and built for my blog, bitsofcode. I built this application using plain JavaScript, making use of modern web APIs such as Service Worker, IndexedDB, and the Push API to emulate the features of a native mobile application. I wrote a series of articles on how I built this application, starting with how I used Service Worker to make it "Offline First".
Design Logo
This was a design I did as a single-day project during a short course. The brief I was given was that “Supper Club” was a “five day night-time street food meetup” who was looking for a “one page site to advertise forthcoming Supper Club events”. The requirements for the website included: A Supper Club identity, the event duration and location details, a sign up form, and social links. I designed both the Supper Club logo and the one page website.
Formhack is a "hackable sass-based form reset". Although there are standard css resets for forms out there, I wanted to create one that I could easily customize for any site, without having to worry about cross-browser compatibility and differences.
A workflow for building HTML emails using Gulp. It comes with a default MailChimp-supported template.
An embedabble widget to display up-to-date data from caniuse.com. Displays feature support data for multiple versions of the 10 major browsers. Configurable, reliable, and fully responsive.
A collection of front-end development features not supported by Opera Mini and some crowdsourced workarounds for them.
Have a question? Ask me anything.