Hi, my name is

Chris Sutcliffe.
Front-end Web Developer.

I create responsive websites that concentrate on the users' experience by providing intuitive navigation and a clear indication of the purpose and benefits of the site.


A Product Landing Page

Photo of Landing Page Web site

Technologies: HTML, CSS


Requirements: Build a Product Landing Page that includes a form element that requires a valid email address as input, includes an embedded product video, uses at least one media query, and utilises CSS Flexbox at least once.

Method: I created a responsive design utilising CSS Flexbox as a flexible layout tool to distribute and align items in the menu, footer, about, and deals sections. I implemented a media query for correct display on smaller screens. The design is my own, as is the artwork, and this applies to all featured projects including this web site, unless otherwise stated.

A Product Landing Page

Screenshot of the Fake Financial Website

Technologies: HTML, CSS

The Odin Project

Requirements: Build a landing page using the provided design photos as a guide. One of the images was a screenshot of the entire website, and the other included information about the fonts and colours that were chosen. Although we were allowed to add our own content and customise the page, the finished project had to resemble the original design as closely as possible.

Method: To design a page for a company that provides financial services, I used CSS Flexbox for the header and navigation components and CSS Grid to provide the Project and About sections structure and symmetry. The design pictures can be found together with code. NOTE: The main 'hero' image is provided by Unsplash as 'free-to-use'.

A Technical Document

Photo of a Technical Web Page

Technologies: HTML, CSS


Requirements: Build a Technical Document that allows for navigation between document sections; the navbar must always be visible; the document must contain code examples together with explanations; and the document must contain at least one media query.

Method: I created a document based on my GitHub Wiki Page and used CSS positioning to provide an 'always available' navigation pane. I also added a media query to allow for smooth scrolling.

A Survey Form

Photo of a Survey Form web page

Technologies: HTML, CSS


Requirements: Build a Survey Form to collect user input, including a name, a valid email address, and a valid integer number. The page should provide an error message for incorrect inputs. Additionally, the form should include at least one drop-down element, two radio buttons, a series of checkbox elements, a textarea, and a submit button.

Method: I chose a subject that was familiar to me and created a form, leveraging valid HTML form elements to create the functionality and CSS to describe the page presentation.


Photo of the author

I am a developer who is an ex-pat from the UK with a love of learning and creating things combined with the self-discipline to be task- and customer-focused which I attribute to my years of military service.

I like learning new things and solving challenges, and my enthusiasm only grows the more I learn.

Technologies I have learned so far on my web development path:

HTML 5 Logo
CSS 3 Logo
Javascript Logo
GitHub Logo


Visit My Github Profile
Visit My freeCodeCamp Profile
Get in touch

It's as easy as clicking a button.

Let's have a conversation...