UNDERSTANDING CSS GRID, FLEXBOX AND BOOTSTRAP by Sarah Chima @sarah_chima

Before we kick off the chat, a few ground rules:

✅ We’ll be asking our guest questions first before we open the ground for you to roll in your questions but before then, get your questions ready while you’re learning from her. #SCATweetChat.

✅ When it’s time for you to ask our guest your questions just make sure to include the hashtag ‘#SCATweetChat’.

SCA: Hi Sarah @sarah_chima It’s good to have you here. Please, introduce yourself.

Sarah: Hi, I am Sarah Chima Atuonwu, a software engineer and technical writer. I blog on Instagram @sarah_codes_.

SCA: Welcome Sarah 🤗

SCA: What are the essential skills for front-end development? As a front-end developer, what are the Front-end development technologies one should know?

Sarah: I think this is interwoven with the skills a front-end developer should have. Here’s a list: HTML, CSS, JavaScript, Git/Version Control, CSS preprocessor like Sass, Less, React/Vue/Angular, Bootstrap, Testing etc. The list keeps increasing these days.

SCA: What is the difference between CSS Grid and Flexbox?

Sarah: CSS grid is a two-dimensional layout system, you can use it to handle both columns and rows (horizontal and vertical display) while Flexbox is a one-dimensional system, handles either a row or a column.
Another difference is that CSS grid’s approach is layout-first while Flexbox is content-first.
So if you know the content of page first, you should opt for flexbox otherwise you should use CSS grid.

SCA: What are the similarities between Flexbox and CSS Grid?

Sarah: They are both CSS layout models that are used to build web pages.
While Flexbox is used for simple linear layouts, CSS grid is intended for large scale layouts that are not linear in their designs.

SCA: Insightful. What are the basics things to know when using bootstrap?

Sarah: Most people tend to use the Bootstrap Grid for their layouts and for responsive design. Other cool things that Bootstrap offers are the Bootstrap carousel, dropdown, responsive navigation menu, modals, breadcrumbs.

SCA: Are there any difference(s) between CSS and Bootstrap?

Sarah: CSS is a language that is used to style HTML documents, while Bootstrap is a component library that is built on CSS and JavaScript.
While you need to download Bootstrap or link a CDN to use Bootstrap, CSS is understood and rendered by the browser.

SCA: Thanks for elaborating. Does bootstrap use CSS Grid?

Sarah: No. Bootstrap 4 actually uses CSS Flexbox for their Grid system. This gives it an edge over using Grid for now. This is because Flexbox has more browser support than CSS grid.

SCA: Oh! Nice. In terms of browser support, which is preferable and why?

Sarah: I guess I answered it in the previous question 😃 For browser support, Bootstrap has more browser support and backward compatibility than CSS grid. That’s one advantage it has over CSS grid.

SCA: Alright 😊 When should one or three (CSS Grid, Flexbox, or Bootstrap) be used preferred to the other?

Sarah: In my opinion, you should use CSS Grid when:
— You have a large scale and complex layout design.
— You do not care about older browsers support.
— You want cleaner and more maintainable HTML code.

FlexBox:
— You have a simple linear layout.
— You know the content of the page and you want the content of the page to expand or shrink to fill available free space in a page.
— You need to build for older browsers.

Of course, there’s no hard and fast rule to this. You can use all of them in a project depending on the project’s requirements.
CSS Grid and flexbox are also great to use together. They both make building UI easier.

SCA: It’s been an insightful session so far, to round it up.

SCA: Which resources will you recommend for someone who wants to build their CSS or front-end skills?

Sarah: http://freecodecamp.org has a good frontend developer course. Developer Mozilla is another good resource.
http://css-tricks.com,http://www.smashingmagazine.com, http://bitsofco.de, my blog http://sarahchima.com/blog are also good resources.
I wrote an article on how to get better at CSS. Anyone can refer to it for more tips. https://dev.to/sarah_chima/having-a-good-relationship-with-css-f1e.

SCA: Great. It will be helpful to many.
We’re Sorry for the break in transmission. Twitter was down for almost an hour but we’re back 🤗 🤗
Let’s continue with the TweetChat 😊 The floor is now open for other questions don’t forget to include the hashtag ‘#SCATweetChat’.

Thank you very much Sarah for your time, it’s been an amazing and insightful session! It’s been exciting, enlightening and fun.
Thank you to everyone who followed this, do follow us for more series of #SCATweetChat.