This is my submission for the presentation on my site. Link to the google slide Link to the website Link to the site directory

In the example that was provided the div.hero-content-area is centered both vertically and horizontally because it is a flex item inside a flex container. The parent container probably uses ‘display: flex’ and also ‘justify-content: center’ to align the item horizontally, and in order to align it vertically it probably uses ‘align-items: center’.

The two flex container properties that affect the position of flex items along the main axis and the cross axis are ‘justify-content’ and ‘align-items’. ‘justify-content’ controls how flex items are distributed horizontally or vertically while ‘align-items’ controls how items are aligned perpendicular to the main axis. For ‘justify-content’ you can use values like ‘flex-start’, ‘center’,… Continue reading Flexbox

In CSS allows absolute positioning lets you position an element relative to the nearest ancestor. You are able to control the placement using top, right, left, and bottom properties. I was able to center an element inside another combined with the transform function here.

I’m part way through the exercises. The pattern for organizing a project is to keep separate CSS files from the index.html file. Also, there is often an img folder with all image files as there is a css folder with the style.css and eventually other files like my reset.css.

I forgot to post my setup and website, and all the exercises I have worked on throughout the course. My Setup Website

I found this design very appealing because of the use of an actual building/landmark you can find in New York being incorporated into the design and font for the text. The apple is also a nice reference. This design was very appealing to me because of how the water and the beaches were warped with… Continue reading Four Designs