Day 6: 100 days of code

There will be less content today as I am busy with academics.

Don’t forget to use the flex-wrap:wrap

In my last some of the projects, I have to change almost the entire code in media queries so that my website look good on an mobile device….


This content originally appeared on DEV Community and was authored by Gaurav-Shekhawat

There will be less content today as I am busy with academics.

Don't forget to use the flex-wrap:wrap

In my last some of the projects, I have to change almost the entire code in media queries so that my website look good on an mobile device. This can be avoided to a great extent by using:-

flex-wrap: wrap;

So, use it wisely whenever needed.

Bootstrap Basics

  • Bootstrap is a css library, which consists of code written by someone-else, taking care of all the styles and responsive web design. To use it in our projects, go to Bootstrap and copy the css link inside of your html file.
  • To use any-functionality of bootstrap, just link bootstrap with your html, and then just specify in the class of your html tag, what you want to do with that element, among some classes given in bootstrap website.

For example, if you want to design a warning button:-

<button class = "btn btn-warning">  Warning  </button>

Now practice and get your hands dirty ..

Bootstrap column model

This is a bootstrap way to make sure that our web-pages are mobile responsive. In this model, bootstrap divides its page into 12 distinct columns.

Bootstrap column model in action

Large screen:-
ON large scrren

as we shrink the size of the screen down.
On small screen

  • Bootstrap also let us specify how many columns should an div take, depending on the size of the screen as small or large. Here is the example:-

IMage

This behaves as 4 div in 1 row on a large screen, and 2 div's in each row on a small screen.

large screen

small screen

SASS inheritance

Let's suppose we are designing 3 alert messages as below:-

alert pic
If we write it using nesting in sass, then in the output css, the code will be copyed in the css styling of all the alert, this will increase the size of our css to a large extent in long term. To solve this problem, we use inheritance.

Hence, the better solution of the above problem will be :-
better code using inheritance


This content originally appeared on DEV Community and was authored by Gaurav-Shekhawat


Print Share Comment Cite Upload Translate Updates
APA

Gaurav-Shekhawat | Sciencx (2021-08-18T20:08:23+00:00) Day 6: 100 days of code. Retrieved from https://www.scien.cx/2021/08/18/day-6-100-days-of-code/

MLA
" » Day 6: 100 days of code." Gaurav-Shekhawat | Sciencx - Wednesday August 18, 2021, https://www.scien.cx/2021/08/18/day-6-100-days-of-code/
HARVARD
Gaurav-Shekhawat | Sciencx Wednesday August 18, 2021 » Day 6: 100 days of code., viewed ,<https://www.scien.cx/2021/08/18/day-6-100-days-of-code/>
VANCOUVER
Gaurav-Shekhawat | Sciencx - » Day 6: 100 days of code. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/18/day-6-100-days-of-code/
CHICAGO
" » Day 6: 100 days of code." Gaurav-Shekhawat | Sciencx - Accessed . https://www.scien.cx/2021/08/18/day-6-100-days-of-code/
IEEE
" » Day 6: 100 days of code." Gaurav-Shekhawat | Sciencx [Online]. Available: https://www.scien.cx/2021/08/18/day-6-100-days-of-code/. [Accessed: ]
rf:citation
» Day 6: 100 days of code | Gaurav-Shekhawat | Sciencx | https://www.scien.cx/2021/08/18/day-6-100-days-of-code/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts