The weekly assignments that followed Colt’s videos were helpful, although they initially caught me off guard. I had assumed that learning web design would involve only real time interaction with a professor, so adjusting to a more independent video-based structure took some getting used to. Colt’s teaching style made complex concepts easier to understand and… Continue reading Final Reflections

Final Project Link to compressed zip file: https://toni-annhenry.com/webdesign1/finalwebsitezip.zip Link to Google slide presentation: https://docs.google.com/presentation/d/1D11gsq5ZQxQ1E2__MBmsH4MsQmv_BCEAXKK49SfMCys/edit?usp=sharing I built my page using basic HTML to organize the main parts: the big main image with text, and a sidebar with small images (the carousel). In the CSS I used some helpful tricks. The sidebar with small images is fixed… Continue reading Toni’s Studio

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.

In my project, I made a Devil May Cry website using Bulma for the layout and Sass for customization. Here is what I completed: Completed Use Bulma to lay out the website Inserted images for the website Replace Bulma’s danger color with another shade of red by using Sass Adjust the image size in the… Continue reading Devil May Cry website Punchlist

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.

Stretch goals May 6 update

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

Kyle Dharam First draft I might make it informative about sharks with a clean, minimalistic layout. Figuring out the layout right now Using Bulma for this