User:Garycrobinson/Sandbox/Wiki MTC Homework 4



Wiki Homework and Practice for HTML/CSS lessons (self effort)




HTML/CSS Lesson 1 on Home


HTML is the foundation of the Internet - Wikitext is the primary code used on the Wiki.



HTML/CSS Lesson 2 on Introduction


Only some informational items in this lesson



HTML/CSS Lesson 3 on Headers


Kentucky Genealogy History Vital Records Birth Certificates

NOTE: the coding above was defined as NOWIKI to show the coding without acting on it and messing up the Table of Contents

HTML headers -- able to change text color, background color, etc. Does not provide edit boxes next to the header. Wikitext headers -- allows edit boxes next to the headers. Does not allow changes to the text color, background color, etc.



HTML/CSS Lesson 4 on Lists


 Birth Certificate Land Records Probate Records</li> Census</li> Vital Records</li> </ul>

<ol> World</li> North America</li> United States of America</li> State of Missouri</li> Jackson County</li> </ol>

Wikitext - code is simpler (* for bullet, # for numbers) - not able to change parameters HTML - code is more complex - able to change parameters (bullet point style, size, color, etc.)



HTML/CSS Lesson 5 on Nesting Lists
</DIV>

<ul> Fruits</li> <ul> Strawberries</li> Grapes</li> Peaches</li> </ul> Vegetables</li> <ul> Peas</li> Carrots</li> Corn</li> </ul> <li>Nuts</li> <ul> <li>Cashews</li> <li>Peanuts</li> <li>Almonds</li> </ul> <li>Grains</li> <ul> <li>Wheat</li> <li>Rye</li> <li>Barley</li> </ul> </ul>

Only unordered lists can be nested in unordered lists. The same for ordered lists. The list types can not be mixed. Wikitext - simpler to use. Can't change parameters within the coding. HTML - more complex to use. Can make changes to the parameters within the coding

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 6 on Comments
</DIV>

This exercise is exactly the same as the Comments Lesson in the Wikitext. The coding is the same.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 7 on Paragraphs
</DIV>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 8 on Fonts - Changing
</DIV>

<p style="font-family:Comic Sans MS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-family:Lucida Grande">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-family:Impact">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 9 on Font Size
</DIV>

<p style="font-size:20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-size:28px">LLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 10 on Font Colors
</DIV>

<p style="color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="color:green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 11 on Font Bold-Italics
</DIV>

<p style="font-weight:bold">LLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-style:italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="font-weight:bold; font-style:italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 12 on Padding
</DIV>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="padding-bottom:25px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 13 on Margins
</DIV>

<p style="background-color:lightgreen; padding:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="background-color:lightblue; padding-left:20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. <p style="background-color:lightcoral; padding-top:25px; padding-bottom:25px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 14 on Borders
</DIV>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 15 on width and Height
</DIV>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 16 on Alignment
</DIV>

I Love Wikitext I Love Wikitext I Love Wikitext

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 17 on Tables
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 18 on Tables-Borders
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 19 on Tables-Widths
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 20 on Tables-Captions
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 21 on Tables-Column Labels
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 22 on Tables-Cells
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 23 on Tables-Rows
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 24 on Tables-Placement
</DIV>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 25 on Tables-Sorting
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 26 on Tables-Scrolling
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 27 on Tables-Column Only
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 28 on Tables-Column Spans
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 29 on Tables-Row Spans
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 30 on Infobox - Creating
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 31 on Infobox - Placing
</DIV>

This same exercise was completed in the Wikitext lessons so it will not be repeated here.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 32 on Infobox - IF function
</DIV>

NOTE TO SELF --- it is much easier and understandable to do the If Function in HTML than in Wikitext. There is less coding around the If statement.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 33 on Sidebars
</DIV>

This is the coding for the Sidebar template

This is the inserted sidebar template and the added parameters

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 34 on Navboxes
</DIV>

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 35 on Position - Relative
</DIV>

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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 STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 36 on Position - Absolute
</DIV>

<div style="position:absolute; top:0px; left:0px; width:200px; height:75px; border:2px solid green; background-color:orange"> <div style="position:absolute; top:0px; left:0px; width:200px; height:75px; border:2px solid green; background-color:orange"> <div style="position:absolute; top:25px; left:150px; width:200px; height:75px; border:2px solid green; background-color:orange">

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightsalmon; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

HTML/CSS Lesson 37 on Miscellaneous
</DIV>

This lesson has some useful tips and hints to refer back to going forward.

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Display Horizontal
</DIV>

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Horizontal Spacing
</DIV>

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Box Sizes
</DIV>

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Flex Wrapping
</DIV>

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Display Vertical
</DIV>

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item A Item B  Item C  Item D  Item E  Item 5

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Centering Text
</DIV>

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Miscellaneous Horizontal
</DIV>

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

<div style="display:flex; flex:1; align-items:center; justify-content:center; border-left:1px solid black; border-bottom:1px solid black; border-right:1px solid black; background-color:lightblue">Item 1 <div style="display:flex; flex:1; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:beige">Item 2 <div style="display:flex; flex:1; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:lightgreen">Item 3 <div style="display:flex; flex:3; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black"> <div style="display:flex; flex:1; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:lavender">Item 4 <div style="display:flex; flex:1; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:lightpink">Item 5

<DIV STYLE="border-bottom-left-radius:30px; text-align:left; margin-left:5px; border:5px solid black; background-color:lightgreen; width:60%; padding:10px; box-shadow:10px 10px 5px #888888">

Flexbox Lesson --- Miscellaneous Attributes
</DIV>

<div style="flex:1 display:flex; align-items:center; justify-content:center; height:150px; border:1px solid black">Peter <div style="flex:1 display:flex; align-items:center; justify-content:center; height:150px; border:1px solid black">James <div style="flex:1 display:flex; align-items:center; justify-content:center; height:150px; border:1px solid black">John