I learned a lot from the Building a Cat Photo App Free Code Camp tutorial. The tutorial taught me how to put items into a list, both with bullet points and numbers. Additionally, I learned how to create a short form to collect information. This tutorial taught me how to use the input element to create interactive controls in the form of checkboxes. Even though I had worked with Sublime Text and coding web pages before, I had never worked with this kind of coding. It took me a while to grasp it, mainly because the code felt overwhelming. There are many elements one has to input in order to create a checkbox.

This tutorial taught me a lot about how to code css to style a website. I learned how to add an image to the background of a website and apply a style to a designated element or class. From the tutorial, I learned how to align text and images, apply a font style to text, and pad the elements. I did have trouble with the classes. The addition of periods before the class name confused me and took some time to get used to it. I also had trouble following the tutorial to add a background image in my own webpage. This was because the code used a url for the link.

From this tutorial, I better learned about the layout of a web pages element along with how to create a canvas and frames. The tutorial helped to give a visualization of what comprises a web page. It provide a look at how an element is divided into four categories, a margin, border, padding and the content. This helps since it gave me a better idea of what, and where, the border and padding are at. I also learned how to use a div element to create both a canvas and frame for an html web page. While working with the css, I had trouble giving the frame element a solid black border. It was because I did not realize both needed to be under the same shorthand with no coma in between the solid and black. I also had difficulty with the overflow property, still unsure what it does. I got confused by the filter property, but that was because I misread it. It was resolved after I realized what it actually said.

I leared a lot from both the flexbox tutorial and the grid tutorial. Through both tutorials, I learned more about how to use flex and grid css elements to make a page more visually appealing. The flexbox tutorial taught me how to use the object-fit property to tell an image to fill an img container and crop to fit the space. It also taught me to use the flex-wrap property to wrap items to the next row or column, depending on what it desired. With the grid tutorial, I learned small things not covered in the previous tutorials, like putting text into a block quote. Along with going through grid properties and styles I knew in advanced, the tutorial also taught me new properties and stylings like how to putting columns into an element. It also taught me how to use minmax function to make the columns responsive on any device. During both tutorials, I was confused when they would reference elements and properties that were not discussed in previous tutorials and expected me to know. This happend with the @media rule and blockquote. There was also some confusion with the content property since I was unaware that apostrophes needed to be placed at each end of the parentheses, and the spacing between either apostrophe and parenthesis. Setting a property to none was annoying, since depending on the property it required either being set to 0 or none, with no indication of which it was.