Blog 2

With the countdown of having only 72 hours to complete this assignment, I felt like I couldn’t do it. With the workload of tutorials being over 2 hours long, it felt neverending. Of course, because of other assignments, I had about 24 hours to complete the code and the blogging aspect of the assignment. At this point in the semester, I already understood the basics of Visual Studio Code. I became more comfortable by practicing typing the boilerplate and other codes that I knew would assist me in understanding the code like the back of my hand. With this in mind, I knew that I would be able to complete the site page on my own. While in VS Code, I found myself using a lot of shortcuts to get to VS Code back and forth from my browser. this helped me shave down some of the time I used to complete the assignment. Having a Macbook made that easy. It became natural to do tutorials without having the pause and double check with my language because I familiarized myself with all that I needed to know.  Since I already learned the basis of the boilerplate before this assignment, I wanted to learn how to wrap tools a bit more efficiently. I’d also like to grasp the understanding of shortcutting a duplicate in VS Code. 

The different CSS that has to be written based on the different card choices is because of the layout which it needs in the supported browser.  

The .card-main and the .card-feature-hero pinpoint two separate aspects of the webpage. It is important because while some of the design might change via the css, the .html stays the same. being able to group and differentiate the similarities between the different layouts are important for uniformity and consistency on the webpage.

Nesting a grid was one of the most difficult things that I did, based on the amount of collapsing that had to be done based on the sub categories in col-8 and col-4 of the flexbox assignment. Once the Gridlex.css file was added, it was easy to add the <div class= “grid”>, as long as there was something to put inbetween it; 

aA screenshot showing the visual representation of having a class grid along with the various columns.

In this case, the <div class= “col-8”> was made in between the “grid” div class, and the “grid” was placed in a container. The <div class= “card card-main”> was added in the “col-8” div as well as the “col-4”, to ensure they stayed inside of the grid, as well as having the option to keep the code intact with the previous adjustments made to the style, as well as paragraph arrangements and adjustments to the page layout.

Leave a comment

Your email address will not be published. Required fields are marked *