Responsive CSS Grid Tutorial

In this video I go over how I use CSS Grid to make responsive layouts. I show you how to take Sketch designs to create the layout structure. Then I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then make the grid in CSS. I use grid-template-columns and grid-template-rows to define the number and size of each element and then I use grid-template-areas to define each block of the design.

Once the web design is completed I show you how to make this design responsive by adding an ‘@ media’ and defining the columns, rows and areas for the mobile view. Finally I apply CSS styling to the font, colors and alignment to make the final polished design.

View the Code here: https://codepen.io/angeladelise/pen/YzXLdyq?editors=1010

In this video I show you:

• 0:16 - How to get started with a Sketch layout design
• 1:11 - How to add grid lines
• 1:22 - How to define the columns
• 1:51 - What is FR
• 2:03 - How to define the rows
• 3:17 - The HTML code
• 4:24 - Display Grid
• 4:50 - How to create the columns with CSS
• 5:26 - How to create the rows with CSS
• 7:09 - How to use grid template area
• 8:05 - How to write grid template area in CSS
• 10:16 - How to add a column and row gap
• 11:02 - How to make this design responsive
• 13:40 - Add CSS variables
• 14:34 - How to add font styling
• 15:26 - Overview of CSS Grid

#css

What is GEEK

Buddha Community

13 Cool Simple CSS Grid layout examples

Collection of free hand-picked simple CSS grid examples. Also, it includes a bunch of front-end techniques, tips, and tricks for your future reference. Hope you will like these freebies and find them useful. Happy coding!

• Styling the last row of a grid with CSS selectors
• Grid Animation Effects
• Simple grid mixin
• Simple Grid CSS Grid
• Simple CSS Grid Hover
• Simple css Grid – Responsive
• Simple css grid system using scss
• CSS variables simple CSS grid
• Super Simple CSS Grid
• 3D Grid UI
• Aspect ratio Grid boxes with CSS Variables
• Simple grid system
• Simple Grid template

#layouts #css grid #grid #layouts #css #css grid layout

Theme Switcher with CSS Variables - Tutorial

Hello! For my last video of 2020, we are learning how to handle themes with CSS Variables, with a cool theme switcher from twitter. Enjoy!

Useful Links:
GitHub: https://github.com/redhwannacef/youtube/tree/master/theme-switcher

#css variables #css #tutorial #css variables - tutorial #css theme switcher

Responsive Footer Design using HTML, CSS & Bootstrap

Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.

As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.

Live Demo

#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen

9 Free CSS Masonry Grid Layouts

This is a collection of free CSS Masonry grids. I have found around the Codepen! This Masonry grid allows you to easily create grid layouts in HTML and CSS without having to program the whole thing in JavaScript. CSS Masonry grids are a great way to help layout elements in a grid-like format. If you need some inspiration for your next design layout, see the free CSS Masonry grids below.

• CSS Masonry Grid Animation Effects
• Using vanilla JS to implement masonry grid
• Bootstrap Masonry Grid Template
• Vanilla JS Masonry Grid Layout Method
• Responsive masonry grid made with ReactJS and flex-box
• Display Images On Your Website With The Masonry Grid (Vanilla JS)
• Create a Masonry Style Image Grid with Infinite Scroll in Vanilla JS
• Isotope & Fancybox Masonry image grid with good animation
• Build a CSS Masonry grid Layout with just HTML and CSS

#layouts #css grid #grid #css masonry #css #free

CSS Flexbox Tutorial in 30 Minutes | CSS Tutorial for Beginners

#css #tutorial #flexbox #css tutorial