Month 1 Day 16

Categories: 6-Month Journey, Journal

I feel like I am making progress on my Advanced CSS. I am still to finish the Codeacademy Lesson, then proceed with Scrimba to finish them all. I am taking multiple courses on this, because I wanted to watch different approaches. I take my Udacity Frontend Challenge, which I am still waiting for the final … Read More

M1D16: Codeacademy | CSS Grid Layout

Categories: 6-Month Journey, Study Notes

Introduction to Grids Using CSS, you can elegantly lay out elements on a web page. The Box Model and Display and Positioning explain some possible ways to style layout. The grid can be used to layout entire web pages. Whereas Flexbox is mostly useful for positioning items in a one-dimensional layout, CSS grid is most useful for two-dimensional layouts, providing many tools for … Read More

CSS Flexbox Cheatsheet – Codeacademy

Categories: Study Notes

CSS Flexbox The CSS display: flex property sets an HTML element as a block level flex container which takes the full width of its parent container. Any child elements that reside within the flex container are called flex items. Flex items change their size and location in response to the size and position of their parent container. … Read More

CSS Grid Cheatsheet – Codeacademy

Categories: Study Notes

Grid Template Columns To specify the number of columns of the grid and the widths of each column, the CSS property grid-template-columns is used on the grid container. The number of width values determines the number of columns and each width value can be either in pixels(px) or percentages(%). fr Relative Unit The CSS grid relative sizing … Read More

M1D15: CSS Grid Layout Part 4

Categories: Study Notes

Negative Grid Lines and Shorthand Syntax Grid lines also have negative indexes. You can reference grid lines starting from the far right or bottom edges of the grid, using negative line numbers. In this video, you’ll more line placement tips and a shorthand syntax for positioning items by line number. By setting the end value … Read More