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

M1D10: CSS Flexbox Part 3

Categories: 6-Month Journey, Study Notes

This is now the fourth course on CSS Flexbox I am taking. I first took the one from Udacity, then from Scrimba, and yesterday from Treehouse. So far, my top recommended is Scrimba for more hands-on approach, and Per did a really great job on simplifying the explanation even for complex topics. Then I recommend … Read More

M1D2: Introduction to HTML

Categories: Study Notes

Frontend Developer Roadmap Summary Here are a few more resources to add to your toolkit: HTML provides structure to the content appearing on a website, such as images, text, or videos. Right-click on any page on the internet, choose “Inspect,” and you’ll see HTML in a panel of your screen. HTML stands for HyperText Markup … Read More