Module 15.5: HTML, CSS, Bootstrap Bonus
1. Create a Three Column Multiple Rows Layout
Sometimes you have to face some complex layout that won’t be easy for you to plan. Take a look at the following photo which you will be making right away,
So, generate the idea behind this, there are 3 columns and each column has some rows. The Grid Layout method is perfect for this. First, create a row and 3 columns of 4 sizes each, and then inside that column create more rows (how many you need depending on the collage). Inside those rows place the images. There are some problems that you can face. Image can exceed the place it is placed, rows and columns don’t have spaces among them. As a solution, you can use the “img-fluid” class to solve the image problem and use gutter to space among the columns. For spacing the rows in between, either you can use gutter or can use some bottom margin to leave some spaces easily.
At last, Just think of it as a whole and plan accordingly how can you nest the rows and columns inside it. Moreover, if it’s more complexed then you can add more rows and columns to create the structure.
Hopefully, you go my point.
2. Nested Row & Column Layout With No Gutter
Create one more layout structure for a better understanding of this kind of Layout.
Have a look at this picture,
Again think, how can you make this kind of Structure using row and column layout,
First of all, there are two columns. In the second column, there’s two-row and in the first one, there’s three-column. Look carefully there are no spaces between them at all, so you’ve to use gutter zero (g-0) to remove those spacing. and also you’ll find the output quite unfamiliar because of the image height. Set the first-part image equal to 500px using CSS, the side-part to 400 px, and the bottom-part to 100px to achieve this layout.
Yes, You’re done.😊😊
3. How to Debug CSS & HTML Using Devtool
Open your previously created “leader-board-css3" file to exploring debugging.
Inspect the elements. Now, on the left tab, you’ll get HTML codes and on the right side, you’ll get the CSS-related information. You can hover your mouse to any element to see their information and click to see the related codes in the HTML section. You can easily add any classes in there to see the immediate effect and also it can be added in the CSS portion too. And in the computed tab, you will be able to see all of the box model-related information right away. Moving to the layout tab, Here all the layout-related information will be available. Just try out things here to see the changes which will help you to debut more easily and efficiently causing less time than before.
Don’t refresh the page otherwise you’ll lose the changes you’ve made. Though it can be saved somewhere in your machine that’s another topic to discuss (If you’re interested in it more, then search on google by “Chrome Workspace” ).
One more important thing to add, you can try out the different flex and grid properties here with just simple clicks.
4. Practical Use of Pseudo Element before and after
You haven’t used that much pseudo-element beforehand. There are lots of use cases of it. Let’s create something using the “before-after” pseudo-element.
Go to any quote-related website, you’ll see there they have used some quotation marks before and after each quote. it may not be fancy just some text but you can do so in a more fancy way using this pseudo-element. Have a look at this,
To do that write some quotes inside your body tag using <blockquote> tag. and style this tag using pseudo-element “before”, “after”. Add attributes inside those style rules like this,
you’ll see that the quotation mark became fancier than before. Without that, there’re other practical uses of this pseudo-element like while making a form you can indicate the required field using the asterisk (✳) mark which can be done by using these pseudo-elements.
Open command prompt and type “node - -version”. If you get some number,
then you’re good to go, if not then you’ve to install “node” for your machine from here,
Download | Node.js
After installing “node” check again. Now open a file in your “VS Code” named “intro.js” and write “console.log(7);” and save it. Open the terminal and type “node intro.js”, press enter. You’ll see the number you typed inside
Optionally you can do one more thing to run your “.js” files easily without writing explicit commands. To do that just from the left tab go to the Run
and Debug and select node.js and you’re good to go. Now just make changes and click on the Run and your file will be executed automatically.
To work it for all the .js files configure the “launch.json” file (if you don’t find the launch.json file just create one from the Run and Debug section, you’ll find that there). Comment out the following line and add this line instead.
Now it will work for all of the .js files you create. You even don’t need to select the node.js environment each time.