Exercises 1

1.Creating Column Layouts

Utilize the 12-column layout to create the following layouts:

1. Create a three-column structure with their widths occupying 50%, 16.66%, and 33.33% of the total width of the container. Wrap the columns inside a single row, and place the row in a container. Do not define new CSS classes. Use the existing ones to create the layout.

See the Pen Three-column Layout by oscar (@nopity) on CodePen.

2. Create a four-column layout with widths of 25%, 50%, 8.33%, and 41.67% of the container. Using a class selector, define a new CSS rule for row. Add the following styles to it:
– Set the top and the bottom padding to 5 px
– Set the left and right padding to 10 px using the shorthand notation
– Align the text to the left and underline the text within the columns

See the Pen Four-column layout by oscar (@nopity) on CodePen.

3. Exploring Frameworks

In the above discussion, we mentioned the names of several popular frameworks: AngularJS, Bootstrap, and Skeleton. Now, explore the similarities and differences between these popular frameworks currently in the market. 1

Comparing the following three frameworks, list any three common features and three major differences between them. Use the table provided below as a template to enter your answers.

Exercises 3

Creating Column Layouts
Replicate the task from the previous exercise, this time using the Skeleton framework. Let’s summarize the tasks once again.

Create a two-column structure occupying equal widths within the container. Inside the second column, create another container and divide it into two columns with 16.66% and 33.33% of the total width of the inner container. Make use of the shorthand column widths notation for creating the nested columns.

Do not define new CSS classes. Use the classes provided by Skeleton to create the layout. Make appropriate use of the container and row CSS classes.

Form Handling
To make our lives easier, let’s replicate a stripped-down version of a form we created in one of the previous exercises. This will help us to identify the differences between forms rendered using standard CSS and the framework. Create an HTML form and add the following elements according to the specifications of the Skeleton framework, as previously discussed:

Answer:

See the Pen Skeleton Framework Test by oscar (@nopity) on CodePen.

Exercises 4

1.To learn more about the 12 columns grid system, read and try the example provided in the examples/grid.

Answer:

self-explanatory

2.Open the examples/jumbotron and try to add a new row with some columns.
Answer:
self-explanatory

3.Examine the rest of the examples to gain more confidence on class names, the examples/theme example will demostrate you all the components. Answer:
self-explanatory