View a list of my completed projects:

Git Portfolio

Here is my git landing page, featuring a beautiful time lapse picture of the Aurora Borealis. This was my first GitHub page and also has a link to projects I've completed. This project includes the use of markdown, readme.md page, a brief bio and a theme.

HTML Tribute Page

Here is my HTML Tribute Page which is dedicated to Robert Plant, the lead singer of Led Zeppelin. This project includes a black and white color scheme, the float element, id use, external CSS, img-div with corresponding ids and target="_blank" link.

Applied Visual Design

Here is my Applied Visual design page; featuring animation keyframes, complementary color palette of orange/blue for aesthetic value to the images, font color and background. This project also includes importing a google font, class styles and CSS transform property.

Applied Accessibility Design

Here is my Applied Accessibility Design page, where I encorperated semantic HTML for screen readers to make the page accessible to any viewer. Each element on this page is tabbable including the table, form and all of the pictures!

Media Queries

Here is my Media Queries page, where I've encorporated 3 views from mobile, tablet to desktop. Starting with the "Mobile First" philosphy, I designed the page to change layout via media queries based on what's best for the screen size.

Media Queries Vacation Site

Here is my Media Queries Vacation Site, where I chose the state of Oregon to highlight as a vacation site. I used grid layouts, media queries, an embedded youtube video, tons of images, and a QR Code. There are also 2 internal links to make this site full.

Flexbox Design Patterns

Here is my Flexbox Design Patterns page, where I experiemented with common flexbox designs. I used an orange and black palette because the due date was near Halloween. Different Flexbox designs were used such as .parent and .child elements, row rearranging and equal sized columns.

Flexbox Product Landing Page

Here is my Flexbot Product Landing page complimenting the Asus laptop brand. Media queries were used, changing the layout depending on the screen size by using Flex Box. This project features lorem ipsum filler text, images re-sizing with the screen size changing and grid reordering / break points.

CSS Grid Layout

Here is my CSS Grid Layout wireframe that is responsive and uses Skelaton grid system as well as the Responsive Boiler plate I learned the importance of using xs, sm, md and lg column sizes and how they impacted the page.

CSS Grid Portfolio Page

This page is the portfolio page consisting of a bunch of projects I've completed using HTML5, CSS3, Bootstrap, Javascript, Wireframes, Skelaton, Media Queries, Flexbox and more!

Bootstrap Design Page

Here is the bootstrap page where I display a certificate from Free Code Camp showing I've completed learning elements of Bootstrap. This includes Bootstrap classes for buttons, forms, ids, images and more.

Bootstrap Resume

Here is my online Resume totally coded with Bootstrap. I utilized different column classes dependant on viewport size, used table styling, progress bars, icons and drop down menus.

QR code
© 2020 Lauren Clark , Contact