Web development: Restart part 1

So I have been following a course on web design by Andrei Neagoie in Udemy. It's so far been good. It seems to follow the style of introducing you to some tags, selectors, concepts and expect you to expand upon that knowledge by googling yourself. It also has exercises to practice upon like setting up layout etc. What I like about the course till now is that introduces you to a lot of free resources on the net, many of which I was unaware of, Such as flexbox froggy, an educational game that helps you practice flexbox. It is just for beginners and gives you some introduction to the concepts. I also got introduced to a site called waitbutwhy.com, It's a bit random but it seemed pretty cool.

I have been practicing creating layouts, I created one that came to my mind - An "NGO" Website. 

I used CSS Grid to position all the elements and also used width to control the sizes of each div element(filled with text). I used width because otherwise, each div element I used will expand to the full size of its placeholder cell in the grid as it just contains some text. I also tried the same with bootstrap, out of bother I found bootstrap a little bit more organized to implement, using classes to implement layout seemed easier, but that's just my personal opinion. From what I saw in the course, it seemed like Andrew was discouraging the use of bootstrap and encouraging the use of CSS Grid and Flexbox.

Here is the code I used in CSS grid version of this website

CSS code:

.container
{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.article1
{
	grid-column: span 2;
	justify-self: end;
	width: 50%;
}
.article2
{

}
.center
{
	text-align: center;
	border-bottom: 1px solid grey;

}

.main
{
	background-color: rgba(0,255,0,0.4);
	justify-self: center;
	width: 50%;
	grid-column: span 2;
}

The classes above are defined to my div tags used to segregate the text.

The "display:grid" activates Grid system. "grid-template-columns" divide the content into two columns. Then I used "grid-column" to span the first and third element("article1") to both columns and set their widths as 50%. Then using justify-self I aligned them the way I wanted.

Here is the HTML part of corresponding code:

<div class="container">
		<div class="article1">
		<div class="center">
			Heading
		</div>
			Lorem ipsum dolor sit 

		amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
		
	
		<div class="article2">
		<div class="center">
			Heading
		</div>
			Lorem ipsum dolor sit 

		amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
		
	
		<div class="article1">
		<div class="center">
			Heading
		</div>
			Lorem ipsum dolor sit 

		amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
		<div class="main">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>

	</div>

If you want to know how I built the navigation bar, there is an excellent tutorial on this website:

https://www.w3schools.com/css/css_navbar.asp