chrisinportugal Portfolio

projects.

A Product Landing Page

Technologies: HTML, CSS

freeCodeCamp

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

Technologies: HTML, CSS

freeCodeCamp

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

Technologies: HTML, CSS

freeCodeCamp

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.

about.

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: