This weeks learning goal was to work on some algorithms to grow my problem solving skills and to work on little projects with a focus on developing a skill.
The Project
This week I decided to try a calculator in react. Since I have heard of this coming up often as a beginner friendly project. Once again CSS grid is in the mix. I can honestly say I am enjoying this learning process.
Let start with the basic.
What is CSS Grid.
To put it simply. It is a systems of columns and rows used to build different layouts and segments of a web page.
In the picture above we can get just an idea of what outlines we can build with this tool.
Calculator Grid
In the photo above we can see. Our buttons are line up in columns and row and our = button is spanning across the button on the bottom row.
In this layout we have our C and 0 span across multipole rows
In this layout we see our AC, 0, and = button all change in size and design.
While all of these calculators function the same. CSS grid allows us to build and customize the look and design.
To our liking.
I hope you attempt CSS Grid. Having the freedom to create columns rows, and where we want things to go before we adding the functionality to them is one of the most enjoyable parts of coding.
I hope this helps peak your curiosity and you learn and experiment with CSS grid as well and as always happy coding.
👨🏿💻👨🏻💻👩🏾💻👨🏻💻
Top comments (0)