Question

Hello!

I'm getting this assignment wrong according to the cengage software. The code looks right to me but apparently it is not. May someone please take a look at it and let me know what I'm doing wrong. I just can't seem to find the error. I'm attaching the question below and below that I will attach my code. I appreciate any help you could provide.

The book is: HTML5, CSS3, and JavaScript, 6th edition, Bundle

Thanks

QUESTION:

General Flex

Go to the tf_styles4.css file. Note that Marjorie has placed all of her styles in the tf_designs.css file and imported them into this style sheet. You will not need to edit that style sheet file, but you might want to view it to become familiar with her style rules.

Go to the General Flex Styles section. Within this section, you’ll create a flexible display layout that varies in response to changing screen widths.

In the General Flex Styles section create a style rule for the page body that displays the body as a flexbox oriented as a row, wrapping content to a new line as needed.

Section Elements

The page content is divided into two section elements with IDs of #left and #right. The left section does not need as much of the screen width. Create a style rule for the left section that sets its growth and shrink rates to 1 and 8 respectively and sets its basis size to 130 pixels.

The right section requires more screen width. Create a style rule for the right section that sets its growth and shrink values to 8 and 1 and sets its basis size to 351 pixels.

Next, you’ll create a flexbox for the section element with class of .tips that contains an article and a biographical aside, which will be displayed either in two columns or in a single column depending on the screen width. Add a style rule that displays the class of tips section elements as flexboxes in the row direction with wrapping.

Article Elements

The articles within each tips section need to occupy more of the screen width. Create a style rule for article elements that lays them out as flex items with a growth value of 2, shrink value of 1, and a basis size of 351 pixels.

Aside Elements

The biographical asides within each tips section need to occupy less screen space. Create a style rule for aside elements that lays them out as flex items with a growth value of 1, shrink value of 2, and a basis size of 250 pixels.

Navigation List

Finally, the horizontal navigation list at the top of the page will also be treated as a flexbox. Create a style rule for the ul element within the horizontal navigation list displaying it as a flexbox in column orientation with wrapping. You do not have to define the sizes of the flex items because the width and height are set in the tf_designs.css style sheet.

Vertical List

Go to the Mobile Devices section and create a media query for screen devices with a maximum width of 480 pixels

For mobile devices the vertical list of links to archived parenting tips should be displayed in several columns at the bottom of the page. Within the media query you created in the last step, add the following style rules to

• display the ul element within the vertical navigation list as a flexbox in column orientation with wrapping. Set the height of the element to 240 pixels.
• give the section element with an ID of #left a flex order value of 99 to place it near the bottom of the page.
• give the body footer an order value of 100 to put it at the page bottom.

Navigation List

Marjorie wants to hide the navigation list at the top of the page when viewed on a mobile device unless the user hovers (or taps) a navicon. Using the technique shown in this tutorial, add the following style rules to set the behavior of the navicon within the media query for mobile devices:

• Display the navicon by creating a style rule for the a#navicon selector to display it as a block.
• Hide the contents of the navigation list by adding a style rule that sets the display of the ul element within the horizontal navigation list to none.
• Display the navigation list contents in response to a hover or touch by creating a style rule for the a#navicon:hover+ul, nav.horizontal ul:hover selector that sets its display value to block.

Media Query

Go to the Tablet and Desktop Devices section. Create a media query for screen devices with a width of at least 481 pixels. Under the wider screens, the contents of the horizontal navigation list at the top of the page should be displayed in several columns. In order to have the list items wrap to a new column, add a style rule to the media query that sets the height of the ul element within the horizontal navigation list to 160 pixels.

MY CODE:

/* Import Basic Design Styles Used on All Screens */

@import url("tf_designs.css");

/* General Flex Styles */
body{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
section#left{
-webkit-flex:1 8 130px;
flex: 1 8 130px;
}
section#right{
-webkit-flex:8 1 351px;
flex: 8 1 351px;
}
section.tips{
display: -webkit-flex;
display: flex;
-webkit-flex-flow:row wrap;
flex-flow: row wrap;
}
section.tips article{
flex-grow: 2;
flex-shrink: 1;
flex-basis: 351px;
}
aside{
flex-grow: 1;
flex-shrink: 2;
flex-basis: 250px;
}
nav.horizontal ul{
display: -webkit-flex;
display: flex;
-webkit-flex-flow:row wrap;
flex-flow: row wrap;
}

/* ===============================
   Mobile Devices: 0 to 480px
===============================
*/
   @media screen and (max-width:480px){
nav.vertical ul{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
height: 240px;
}
section#left{
-webkit-order: 99;
order: 99;
}
footer{
-webkit-order: 100;
order: 100;
}
a#navicon{
display: block;
}
nav.horizontal ul{
display: none;
}
a#navicon:hover+ul,nav.horizontal ul:hover{
display: block;
}
}

/* ============================================
   Tablet and Desktop Devices: 481px or more
============================================
*/
@media only screen and (min-width:481px){
nav.horizontal ul{
height: 160px;
}
}

Answer 1

Working code implemented in HTML & CSS and appropriate comments provided for better understanding.

Here I am attaching code for all files:

• tf_tips.html
• tf_styles4.css
• tf_designs.css
• tf_base.css
• tf_print2.css

tf_tips.html:

<!DOCTYPE html>
<html>
<head>
<title>Trusted Friends: Education Tips</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="tf_base.css" rel="stylesheet" media="all" />
<link href="tf_styles4.css" rel="stylesheet" media="screen" />
<link href="tf_print2.css" rel="stylesheet" media="print" />
</head>

<body>
<header>
<img src="tf_logo.png" id="logo" />
<nav class="horizontal">
<a href="#" id="navicon"><img src="tf_navicon2.png" /></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Center</a></li>
<li><a href="#">Teachers</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Tuition</a></li>
<li><a href="#">Aid</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Curriculum</a></li>
<li><a href="#">After School</a></li>
<li><a href="#">Summer Camp</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Parenting Tips</a></li>
</ul>
</nav>
<h1>Parenting Tips</h1>
</header>

<section id="left">
<h1>Archive</h1>
<nav class="vertical">
<ul>
<li><a href="#">Sep 2017</a></li>
<li><a href="#">Aug 2017</a></li>
<li><a href="#">Jul 2017</a></li>
<li><a href="#">Jun 2017</a></li>
<li><a href="#">May 2017</a></li>
<li><a href="#">Apr 2017</a></li>
<li><a href="#">Mar 2017</a></li>
<li><a href="#">Feb 2017</a></li>
<li><a href="#">Jan 2017</a></li>
<li><a href="#">Dec 2016</a></li>
<li><a href="#">Nov 2016</a></li>
<li><a href="#">Oct 2016</a></li>
<li><a href="#">Sep 2016</a></li>
<li><a href="#">Aug 2016</a></li>
<li><a href="#">Jul 2016</a></li>
<li><a href="#">Jun 2016</a></li>
<li><a href="#">May 2016</a></li>
<li><a href="#">Apr 2016</a></li>
<li><a href="#">Mar 2016</a></li>
<li><a href="#">Feb 2016</a></li>
<li><a href="#">Jan 2016</a></li>
</ul>
</nav>
</section>

<section id="right">

<section class="tips">
<article>
<header>
<h1>Learning through Play</h1>
<p>by Sandra Turner-Davis, Ph.D.</p>
</header>
<p>Young children struggle to understand the world and their role in it.
How does a child, as young as 4, make sense of the sensations that form
their daily lives? The answer may not be what you think it is. It is clear
that for a child, the most effective teacher is <em>play</em>.</p>
<p>And perhaps the most effective form of play is role-playing in which a child
pretends to be someone else: a mother, a father, an astronaut, or a
football star. Role-playing gives the child the ability to see the world from
another perspective. In a caring and nurturing environment,
role-playing can teach empathy and respect.</p>
<p>As the child grows, play can become more involved and complex. Playful
interactions with others become more common with shared imaginations and
roles. In cooperation with friends, children begin to make sense of their
world and work through their fears and anxieties.</p>
<p>Parents: turn off the television and the Internet and join in
the fun. There are few more rewarding experiences than playing with your child;
through your play, you teach, your child learns, and sometimes your
child teaches you too. </p>
</article>

<aside>
<h1>Sandra Turner-Davis, Ph.D.</h1>
<p> <img src="tf_photo4.png" /> Dr. Turner-Davis is a popular freelance author,
speaker, and curriculum specialist. She has served as the director of Early
Education at the University of Indiana, where she also served on the governor's task
force examining education challenges in the inner city.</p>
<p>Dr. Turner-Davis has authored 11 books on education and co-authored more than 25
parent and teacher resource books. She was the keynote speaker at
the 2016 <a href="http://www.example.com/mec.html">Midwest Educator's Conference</a>
and has appeared numerous times on CNN, Fox News, and PBS.</p>
</aside>
</section>
  
<section class="tips">
<article>
<header>
<h1>Raising a Reader</h1>
<p>by Diane Haberstadt</p>
</header>
<p>Reading is the key to education and love of reading will lead to a love of
learning. Consider the following tips to help cultivate a love
of reading in your child.</p>
<ol>
<li><strong>Talk the Talk</strong> Reading is about words, so help grow your
child's vocabulary through active and imaginative conversation.
The larger the vocabulary, the greater the opportunity for
exciting and meaningful reading.</li>
<li><strong>Book It</strong> Do you have books in your house? Your child won't
read without books and a nice library shows your commitment to reading.
By the way, does your child see you reading?</li>
<li><strong>Make it Loud</strong> The first step to reading is reading aloud
to your child. Build happy memories by sharing your favorite classics and
don't be afraid of long books. Children can handle big books that take
weeks &mdash; or even months &mdash; to finish.</li>
</ol>
<p>Cultivating a love for reading is a gift that keep giving throughout your
child's life and into his or her adulthood. Read about it.</p>
</article>
<aside>
<h1>Diane Haberstadt</h1>
<p><img src="tf_photo5.png" /> Diane Haberstadt is an author, speaker,
teacher, and above all, a busy mom of three. She is a co-creator of Science
Discovery World's <a href="http://www.example.com/s21.html"> Science 21</a>,
an interactive program helping children learn about the science of the 21st
century. She is also the author of the popular book
<a href="http://www.example.com/raise.html"> Raising the Inquisitive Child</a>.
</p>
<p>Diane is on the board of Intervision Schools, working to bring Web and
Internet technologies to inner-city schools and centers.</p>
</aside>

</section>
  
</section>

<footer>
Trusted Friends &#8226; 3450 Regency Lane, Carmel IN
</footer>
</body>
</html>

tf_styles4.css:

@charset "utf-8";

/* Import Basic Design Styles Used on All Screens */

@import url("tf_designs.css");

/* General Flex Styles */

body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

section#left {
flex-basis: 130px;
flex-grow: 1;
flex-shrink: 8;
}

section#right {
flex-basis: 351px;
flex-grow: 8;
flex-shrink: 1;
}

section.tips {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

section.tips article {
flex-basis: 351px;
flex-grow: 2;
flex-shrink: 1;
}

section.tips aside {
flex-basis: 250px;
flex-grow: 1;
flex-shrink: 2;
}

nav.horizontal ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}

/* ===============================
   Mobile Devices: 0 to 480px
===============================
*/

@media only screen and (max-width: 480px) {
nav.vertical ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 240px;
}

section#left, footer {
order: 99;
}

footer {
order: 100;
}

a#navicon {
display: block;
}

nav.horizontal ul {
display: none;
}

a#navicon:hover + ul, nav.horizontal > ul:hover {
display: block;
}
}

/* ============================================
   Tablet and Desktop Devices: 481px or more
============================================
*/

@media screen and (min-width: 481px) {
nav.horizontal ul {
height: 160px;
}
}

tf_designs.css:

@charset "utf-8";

/* =============================================
   Base styles used by All Screens
=============================================
*/

/* HTML and Body Styles */

html {
background: url(tf_back1.png) center center / cover no-repeat fixed;
height: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}

body {
box-shadow: rgb(51, 51, 51) 5px 0px 15px, rgb(51, 51, 51) -5px 0px 15px;
margin: 0px auto;
min-width: 320px;
max-width: 1024px;
width: 100%;
}

p {
line-height: 1.4em;
margin: 10px;
}

header, footer {
width: 100%;
}

/* Body Header Styles */

body > header {
background: rgb(134,176,232);
}

body > header > img {
display: block;
width: 100%;
}

body > header > h1 {
background-color: rgb(52,55,52);
color: rgb(231, 255, 231);
font-size: 2em;
line-height: 2em;
text-align: center;
}

/* Header Navigation List Styles */

body > header > nav.horizontal {
background-color: rgb(117, 140, 72);
clear: right;
height: auto;
}

body > header > nav.horizontal > ul {
padding: 20px;
}

body > header > nav.horizontal > ul > li {
font-size: 1.2em;
height: 30px;
text-transform: uppercase;
width: 140px;
}

body > header > nav.horizontal a {
color: rgb(239,240,224);
}

/* Left Section Styles */

section#left {
background-color: rgb(221, 221, 221);
padding: 10px;
}

section#left h1 {
font-size: 1.5em;
margin: 0px 0px 15px 0px;
text-align: center;
}

section#left nav.vertical li {
background-color: rgb(207,200,101);
line-height: 30px;
margin: 5px;
text-align: center;
font-size: 0.9em;
}

section#left a {
color: rgb(51, 51, 51);
}

/* Right Section Styles */

section#right {
background-color: rgb(221, 221, 221);
}

/* Tip Section Styles */

section.tips {
background-color: rgb(245,240,142);
border: 3px solid rgb(91,107,90);
margin: 20px;
}

section.tips:first-of-type {
margin-bottom: 20px;
}

/* Section Article Styles */

section.tips article header {
background-color: rgb(91,107,90);
color: rgba(236,236,207,1.00);
padding: 10px 10px 0px 10px;
}

section.tips article header h1 {
font-size: 1.5em;
}

section.tips article header p {
font-size: 1.2em;
}

section.tips article ol {
list-style-type: disc;
padding-left: 30px;
}

section.tips article ol li {
margin-bottom: 20px;
}

/* Section Aside Styles */

section.tips aside {
background-color: rgb(207,200,101);
}

section.tips aside h1 {
font-size: 1.4em;
margin: 15px 0px 0px 10px;
}

section.tips aside img {
float: right;
margin: 0px 0px 10px 10px;
width: 40%;
max-width: 140px;
}

/* Navicon Styles */

a#navicon {
display: none;
}

/* Footer Styles */

body > footer {
background-color: rgb(117, 140, 72);
font-size: 0.9em;
text-align: center;
padding: 10px 0px;
}

tf_base.css:

@charset "utf-8";

/* Basic styles to be used with all devices and under all conditions */

article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}

address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, nav a, ol, p, section, span, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Set the default page element styles */

body {
line-height: 1.2em;
}

ul, ol {
list-style: none;
}

nav ul {
list-style: none;
list-style-image: none;
}

nav a {
text-decoration: none;
}

tf_print2.css:

/* Hidden Objects */

nav, body > header > h1, section#left, footer {
display: none;
}

/* Page Box Styles */

@page {
size: 8.5in 11in;
margin: 0.5in;
}

/* Header Styles */

header img {
display: block;
width: 100%;
}

/* Typography Styles */

article > header {
margin-bottom: 0.2in;
}

article h1 {
font-size: 24pt;
line-height: 26pt;
}

aside {
background-color: rgb(211, 211, 211);
margin-top: 0.3in;
}

aside h1 {
font-size: 18pt;
line-height: 20pt;
}

aside img {
width: 0.8in;
}

p {
font-size: 12pt;
margin-top: 0.1in;
margin-bottom: 0.1in;
}

/* Hypertext Styles */

a {
color: black;
text-decoration: none;
}

a::after {
content: " (" attr(href) ") ";
word-wrap: break-word;
}

/* Page Break Styles */

aside {
page-break-after: always;
}

ol, ul, img {
page-break-inside: avoid;
}

p {
widows: 3;
orphans: 3;
}

Sample Output Screenshots: