By doing this exercise I learned how to use basic coding to create a website. I learned that almost all elements have to have closing element as a pair to them. The exception would be img and input self closing elements. I learned how to set lists on the website (li), including ordered list(ol). I finally understood the difference between element, attribute and value. I also learned how to add an image and provide a source where it was taken. I learned how to create footer. The part about radio buttons and checkboxes was a little bit more confusing, and I am not sure if I would be able to replicate it as for now.
By doing this exercise I learned how to You can use CSS to set the color, font, size, and other aspects of HTML elements. I definitely feel more comfortable coding compared to a couple of weeks ago. I learned how to use margins and paddings to control the space between lines. The hr element was a new concept to me, but I like how it helps to separate sections. I learned about selectors and how to use them to group and change features of similar elements. I also applied many concepts that I learned from previous weeks, like including an image or a link to the website. In the freeCodeCamp, everything seemed pretty easy, but I don't think I would be able to recreate this Cafe Menu without all steps.
By doing this exercise I used CSS and the Box Model to create my own Rothko-style rectangular art pieces. The process and coding were similar to what I did before. I learned more about margins and paddings that control space between lines. I didn't know before that you can just list several properties like color and side to the same element on the same line. The new concept was the filter property. I used it to create a blur in my painting. I also learned how to rotate boxes by using the transform property. I didn't know that minus stands for the direction opposite to the clockwise. I definitely feel more comfortable using CSS to change the design of websites.
By doing this exercise I used CSS and Flexbox to build a responsive photo gallery webpage. Flexbox helps you design your webpage so that it looks good on any screen size. To do it I forst make the element a flex container by giving an element display property of flex. Then I set an explicit flex-direction of row. I also set the flex-wrap property to wrap to allow the items to wrap to the next row or column. I gave my gallery selector an align-items property with center as the value and gave an object-fit property and set it to cover. I've added row-gap and column-gap so pictures would not stick to each other. And added some design to the pictures. The Flexbox concept is not fully clea to me yet, but I am sure after practicing it a little bit more, it should be easier.
By doing this exercise I learn how to use CSS Grid, including concepts like grid rows and grid columns. CSS Grid gives control over the rows and columns of the webpage design. This project was very interesting, and the end result was very impresive. It is great to see that I am able to code a website like this. I learned about LAZY attribute that tells the browser not to fetch the image resource until it is needed. Also LAZY loaded elements will not load until the NON-LAZY elements are loaded. I also learned how to create a query and put the selector inside of it. Overall, building the grid is still a little bit challanging for me, but other concepts learned in previous weeks seem to much easier now.