The Coding Express

In last 5 articles of this web development series, we learned and understood the concept of CSS Grids which helps to create responsive layouts for web pages in very few lines of CSS. Now moving forward, we are going to see about styling various elements using transformations and animations. So let's begin... CSS Transforms CSS translations allow us to translate, rotate, scale and skew elements created in HTML using CSS. These transformations may change shape, position, size, and orientation of element. CSS transforms is mainly divided into 2D and 3D. 3D transforms make changes such that we feel them in 3 dimensions. CSS 2D Transformations Following are some of the commonly used 2D transformations: translate() rotate() scale() skewX() skewY() matrix() The translate() method This method changes the position of the element from its current position. The change in position is according to parameters given to translate() , where the first parameter represents ...

In the last article, we learned about grid gaps in CSS and also created basic CSS layout using CSS Grids which was responsive. Now as we have learned all basic properties to create our final CSS grid layout for our website layout. We are going to recreate the same layout as we created in  'Standard Website Layout' as we created without CSS Grids but the difference that it will be responsive. Let's do it... Standard Website Layout using CSS Grids This layout will contain: Header Three unequal columns Footer On smaller screens, the columns will stack on top of each other. We can visualize it by resizing the window of the browser OR by clicking here CSS button by resizing the width of output in Codepen window. I encourage you to try to write it yourself before seeing the code... See the Pen WDS77-1 by blackbird ( @blackbird98 ) on CodePen . Yeah... We have successfully created the standard responsive website layout using CSS Grids which you can use to c...

In the last article, we learned two main properties of CSS Grids which are display and grid-template-columns or rows. This two properties helped us to create a simple grid layout with just 3 lines of CSS code. Now let's see some other properties that will help us to create a perfect CSS grid layout. Grid Gaps The space between each column/row is called gaps.We can adjust the gap size by using one of these properties: grid-column-gap grid-row-gap grid-gap Here how we will use it: .container { display : grid; grid-column-gap: 50px ; } .container { display : grid; grid-row-gap: 50px ; } grid-gap is shorthand for this properties. .container { display : grid; grid-gap: 50px 100px ; } First Layout Now we are ready to create first full-fledged CSS Grid layout. Let's do it... See the Pen WDS76-1 by blackbird ( @blackbird98 ) on CodePen . See our responsive layout is ready. You can check it by changing the ...

In the last article, we learned about some important terms related to CSS Grids including grid container and grid items. Now in next few articles, we are going to learn various properties of this grid elements. Let's begin... display It defines the element as a grid container and creates a new grid formatting for its elements. Available values: grid - Creates a block-level grid inline-grid - Creates an inline-level grid subgrid - This is used to create nested grids. In this case, your grid container is itself a grid item of parent grid. .container { display : grid; } grid-template-columns grid-template-rows It defines the columns and rows of the grid with the space-separated list of values. Here values will decide the size of each row/column and space between them represent a grid line. Available values:   - Indicates the length and can be in percentage, px or any other valid unit   - Optional name of that line If you do not ...

In the last article, we learned about the need of using css grid and what it actually changes in designing web pages rather than using other positioning methods like float and inline-blocks. Now let's move forward to know some of the basic terms of css grids and understand it. Important Terms Before actually knowing how to create a grid layout let's clear our terminology about it. Grid Container It is the direct parent of all the grid items. This is the element on which display: grid is applied. In the given example, the container is the grid container. 1 2 3 4 5 <div class= "container" > <div class= "item" ></div> <div class= "item" ></div> <div class= "item" ></div> </div> Grid Items The children(direct) of the grid container. Here the item elements are grid items, but item1 isn't. 1 2 3 4 5 6 7 <div class= "container" > ...

Welcome back, guys...it's been almost a week since the last post in which I wrote down some of the best ways to practice HTML and CSS. Hope you have tried at least some of them including Free Code Camp. Now let's move forward learn some important things in CSS.  Till now we have created so many CSS elements but they all miss one common thing in them. They are not responsive. Yes, all the components look good on our desktop's full-size screen but if you look them on mobile devices, they are really bad. That's where CSS Grid comes into the picture... What is CSS Grid? CSS Grid Layout is the most powerful layout system available in CSS which will make layouts responsive.  It is a 2-dimensional system, meaning it can handle both columns and rows. You work with Grid Layout by applying CSS rules both to a parent element (Grid Container) and to that element's children (Grid Items). Introduction While learning CSS to place our elements on the page, we used ...

Hi everyone, it's been 2 days seen my last post. So sorry, for this gap...but it was really unavoidable. I was also thinking what to do next in our web development journey. So let's discuss what I was planning... The Plan In the last 70 days, we have learned complete HTML and lot of CSS with various examples and layouts. We have covered almost all basic CSS needed for web development but yes, a lot is remaining which includes: CSS Grid CSS Flexbox CSS Animations Responsive layouts and much more... But before going any further, I think we should practice what we have already learned so that we become perfect in what we know.  How to practice? According to me(and many others) there is no better way to practice web development than Free Code Camp. If you have never heard about, freeCodeCamp is a nonprofit organization that consists of an interactive learning web platform. It has small quizzes where you have to write a code which will be checked and if it is ...