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 Microverse (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?
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 Tresor Moise. 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 Github when he pushes some of our work. (if you are not laughing now, then you did not get the joke). When we started learning CSS3, dude said he loved FLEX, then all of a sudden, he said he had broken up with FLEX and was now a playboy because he loved GRID and BO0TSTRAP as well. Just last week, he insisted he was a bad boy because he could push to the MASTER branch on Github.
Enough about him already. I actually intend to write about the biggest thing I have learned this Month.
Before MICROVERSE, I had used BOOTSTRAP on a few projects, I had never taken time to understand the reasoning behind its construction. All I had to do was download the BOOTSTRAP files and link them to my HTML page.
By the way, did you know BOOTSTRAP was developed by a team at TWITTER as a framework to encourage consistency across internal tools? Oh yeah, it was. You can read all about it HERE.
BOOTSTRAP
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
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.
@for $i from 1 through 12 {
$width: percentage($i / 12);
.col-#{$i} {
width: $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,
<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">Your Dedicated Mentors & Career Coaches</span>
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. <br> <br>
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 ➞
</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
@media screen and (min-width: 1200px) {
@for $i from 1 through 12 {
$width: percentage($i / 12);
.col-#{$i}-xl {
width: $width;
}
}
}For large screens with width ≥ 992px
@media screen and (max-width: 1200px) {
@for $i from 1 through 12 {
$width: percentage($i / 12);
.col-#{$i}-lg {
width: $width;
}
}
}For medium screens with width ≥ 768px
@media screen and (max-width: 992px) {
@for $j from 1 through 12 {
$width: percentage($j / 12);
.col-#{$j}-md {
width: $width;
}
}
}For small screens with width ≥ 576px
@media screen and (max-width: 768px) {
@for $j from 1 through 12 {
$width: percentage($j / 12);
.col-#{$j}-sm {
width: $width;
}
}
}