It is time for your first assignment in this course.
In the first assignment,
we're going to provide you with unstyled aboutus.html page.
The zip file containing that aboutus.html
page is available to you in the assignment instructions.
So you need to download the page and then move that page to your con Fusion folder.
Thereafter, you will apply
Bootstrap classes and the Bootstrap Flexbox grid to style the page,
then you move the page to the Con Fusion folder,
then you can view the page in your browser by typing
localhost:3000/aboutus.html and your light server build server up the aboutus.html page,
so this is the only way you can get to view the page.
So to begin with,
the page will look like this,
a completely Unstyle page which just contains content.
Now your job is to go through three tasks in order to format this page.
Let's look at the three tasks in more detail.
Your first task is to apply
the Bootstraps CSS and the Javascript classes to the aboutus.html
page so that this page will be instantly transformed into this page,
where as soon as you add the Bootstraps CSS and JavaScript classes,
the header and footer will automatically get formatted correctly,
because I have simply copied the header in the footer from the index.html page into
this page and I left all the Bootstrap formatting as such,
but the actual content of the page is still left unstyled.
So now, as the second task,
you're going to apply the Bootstraps Flexbox grid including the Container,
the rows and the column classes to
this content or the page so that you can style it properly.
Now, when apply the classes,
you're going to apply the row and column classes to the aboutus to just leave it as such.
Then you're going to apply the row and column classes to
this content so that this content occupies only half the screen,
and then you're going to apply the row and column classes to
this content so that have occupies the entire screen width.
So, choose the row and column classes correctly to apply to this.
You can use the custom CSS classes that we have already
implemented for the index.html by adding the style.css file,
also to style the content in this page.
So when you complete the second task,
your page will end up being styled like this.
So you can see that the aboutus page exists in its own.
Then Our History part,
notice that on a small to large screen size,
the Our History will occupy only half the screen width.
Then the Corporate Leadership part occupies the entire screen width in this case.
This is the second task that you need to complete in your assignment.
For the third task as you can see,
this content layout looks fine for larger screen sizes,
but when you go to the extra small screen size especially like this,
you notice that the content is too much in this section.
So what we would like to do is to use another Bootstrap class provided for us called,
[inaudible] and DSM block.
There is a link to the responsive classes in the assignment resources,
so you can check out the documentation for the [inaudible] and DSM block.
You need to apply those so that this description will be
hidden in the extra small screen sizes.
So when you the classes to this corporate leadership part,
the same content will now be laid out without the description,
so it will be hidden in the extra small screens size.
But when you go to the small the large screen size,
the content will become visible.
So you can notice that for the extra small screen size,
the content is hidden,
but for the small screen size,
that description content will be shown clearly.
So this is your third task in your assignment.
While you are at it, you can also apply the same classes to
the descriptions in our index.html page so that
the detailed descriptions for the content items will also be hidden in
the index.html page when it is viewed on extra small screen sizes.
This completes your first assignment.
Also, when you submit your assignment,
please take a full page screen shot of your layout
both in small to
extra large screen size and also on the extra small screen size,
and then include that as part of your submission.
To take a full page screenshot in Chrome,
you can use a Chrome extension that is available to us,
the link to the Chrome extension is provided in
the assignment resources that follow the assignment description.
After you complete your assignment,
in case you're saving your changes to a Git Repository,
please don't forget to commit the changes to
your Git Repository with the Message Assignment One.
