And you say learning to code is hard…You say code is not a woman’s thing…You even imply that women are lazy when it comes to tech commitment okay, you are staring at a woman who never quits. This is my ever first tech article, and I am almost new to programming. I started (this is a referral link) one Month ago. If you are familiar with Microverse, you will understand what it means. I have to be on my laptop every day from 3:00 pm to 1:00 am UTC+1. It seems like a nightmare for someone just starting out her tech carrier, right? Microverse Not this girl! This has been the most exciting one month of my life. Apart from learning how to think and work like a techie, I have also met the most interesting family, nerds and all. One such people is my coding partner . This guy says the funniest of things. During our second week of school, I told him I was going to a party during the weekend, and he asked me to go along with my laptop so I could pull from when he pushes some of our work. (if you are not laughing now, then you did not get the joke). When we started learning , dude said he loved , then all of a sudden, he said he had broken up with and was now a playboy because he loved and as well. Just last week, he insisted he was a bad boy because he could push to the MASTER branch on Tresor Moise Github CSS3 FLEX FLEX GRID BO0TSTRAP Github . Enough about him already. I actually intend to write about the biggest thing I have learned this Month. Before , I had used on a few projects, I had never taken time to understand the reasoning behind its construction. All I had to do was download the files and link them to my page. MICROVERSE BOOTSTRAP BOOTSTRAP HTML By the way, did you know was developed by a team at as a framework to encourage consistency across internal tools? Oh yeah, it was. Y . BOOTSTRAP TWITTER ou can read all about it HERE BOOTSTRAP is a directed at responsive, mobile-first . It contains - and (optionally) -based design templates for , , , , and other interface components. Bootstrap free and open-source CSS framework front-end web development CSS JavaScript typography forms buttons navigation Bootstrap’s grid system is built with FLEXBOX and allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: Bootstrap columns (W3schools) The grid system is responsive, and the columns will re-arrange automatically depending on the screen size. You just, however, have to make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns). How they achieved this algorithm is what I will be talking about on this write-up. While working on our last project on HTML5 and CSS3, my coding partner and I were introduced to Saas, one of CSS preprocessors. SaaS (Syntactically Awesome Style Sheets) Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. It is basically CSS with Superpowers. This was the CSS tool we used to develop an algorithm that defined our web page into 12 columns. @ $i from through { $ : ($ / 12); #{$i} { : $width; } } for 1 12 width percentage i .col- width CSS compilation results: { : ; } { : ; } { : ; } { : ; } { : ; } { : ; } { : ; } { : ; } { : ; } { : ; } { : ; } { : ; } .col-1 width 8.33333% .col-2 width 16.66667% .col-3 width 25% .col-4 width 33.33333% .col-5 width 41.66667% .col-6 width 50% .col-7 width 58.33333% .col-8 width 66.66667% .col-9 width 75% .col-10 width 83.33333% .col-11 width 91.66667% .col-12 width 100% If i were to use any of these classes in my HTML, that element will take up the width assigned to that class. For example, Your Dedicated Mentors & Career Coaches In addition to your coding partner and stand-up team, you’ll also get mentors and a career coach to support you in your journey at Microverse. From reviewing your code and answering tough questions to helping you negotiate job offers, you’ll be in good company as you go through the program. Learn more about the support you will receive ➞ < = > div class "child1 d-f f-space col-11 m-auto p-b" < = > div class "col-6 a" < = = = > img src "./images/mentors.png" class "responsivo" alt "" </ > div < = > div class "col-5 b" < = > p class ".p p-bottom text-secondary text-c" < = > span class "text-microthird d-block font-bold p-t" </ > span < > br < > br </ > p </ > div </ > div Vs code of our project The <div> element that contains the image will take up 50% of the browsers width (col-6) and the <div> containing the <p> tag will take up 41.67% of the browsers width (col-5) . The result: extract from our project You can further add media queries to tell your code how to behave on screens of a certain width: For extra large screens, with widths > 1200px @ screen and (min-width: 1200px) { @ from 1 through 12 { : percentage( / ); #{ }-xl { : ; } } } media for $i $width $i 12 .col- $i width $width For large screens with width ≥ 992px @ screen and (max-width: 1200px) { @ from 1 through 12 { : percentage( / ); #{ }-lg { : ; } } } media for $i $width $i 12 .col- $i width $width For medium screens with width ≥ 768px @ screen and (max-width: 992px) { @ from 1 through 12 { : percentage( / ); #{ }-md { : ; } } } media for $j $width $j 12 .col- $j width $width For small screens with width ≥ 576px @ screen and (max-width: 768px) { @ from 1 through 12 { : percentage( / ); #{ }-sm { : ; } } } media for $j $width $j 12 .col- $j width $width
