Tell us what’s happening:
Describe your issue in detail here.
I believe I have fulfilled all tests yet when I run my code, errors 3, 4, and 12 keep occurring. I’ve had a colleague who has passed all tests for this challenge look it over and they can’t find the source of the errors either.
P.S. Ignore the lack of a navbar I guess since I’m only allowed 2 links.
Your code so far
<main id="main-doc"><header id="css_documentation">
CSS Documentation
</header>
<section
class="main-section"
id= "Introduction"
<header>
Introduction
</header>
<article>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. In this article you'll discover 5 cool things you can do with CSS!
</p>
</article>
</section>
<section
class= "main-section"
id= "Grids"><header>
Grids
</header>
<article>
<ul>
<li> Rows
</li>
<li> Columns
</li>
<p>
Grids are an excellent tool for adding spice to the creative design of a website. The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
</p>
<article>
To get started you must define a container element as a grid with
<code> display: grid
</code>
Set the column and row sizes with
<code> grid-template-columns </code>
and
<code> grid-template-rows
</code>
Then place its child elements into the grid with
<code>
grid-column
</code>
and
<code> grid-row
</code>
<p>
If you are further advanced, the calc() function provides a great complementary method to improve the application of grids. Unfortunately, the use of fluid grids has become synonymous with errors. The introduction of the calc()function has looked to iron out a lot of these issues.
</p>
</article>
</section>
<section
class= "main-section"
id= "Flexbox"><header>
Flexbox
</header>
<article>
<p>
Before the Flexbox Layout module, there were four layout modes:
<ul>
<li>
Block, for sections in a webpage
</li>
<li>
Inline for text
</li>
<li>
Table, for two-dimensional table data
</li>
<li>
Positioned, for explicit position of an element
</li>
</p>
<p>
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
The flexbox properties are supported in all modern browsers.
</p>
<p>
To start using flexbox you must first define a flex container:
</p>
<code>
< div class = "flex-container">
</code>
<code>
< div > 1 </ div >
</code>
<code>
< div > 2 </ div >
</code>
<code>
< div > 3 </ div >
</code>
</article>
</section>
<section
class= "main-section"
id= "Units"><header>
Units
</header>
<article>
<p>
The CSS units available are pretty cool, starting by the relative ones: percentage, em, rem. The em and rem are relative to the font-size, and the percentage is relative to the parent. Interestingly enough, you can have block elements with widths in em and the font-size they're based on in percentage, then it can reach to a point where there's no parent.
</p>
<p>
Then you have absolute units, like px which is the most used one, but you also have units that are based on physical measures, starting with Points (pt) which is 1/72 of an inch, and or picas (pc)(12 points). These are the less common one, but Quarter millimeters (q), millimeters (mm), centimeters (cm), or inches (in) are used in our everyday life, and on the web is quite useful when you need to print something that has a specific size.
Then there's these two that deserve a codepen, ex, ch: Respectively these are the height of a lower case x, and the width of the number 0. These are not as commonly used or well-supported, and I only see them being used when you have text content using a monospace font.
</p>
<p>
Here's an example of how you can set different length values using CSS units:
</p>
<code>
h1 {
font-size: 65px;
}
</code>
<code>
p {
font-size: 30px;
line-height: 40px;
}
</code>
</article>
</section>
<section
class= "main-section"
id= "Viewport_units"><header>
Viewport units
</header>
<p>
Viewport units are the vw (viewport width) and vh (viewport height), and they're a percentage of the viewport, meaning when a block element has a width of 60vw it means this element will have a width of 60% of the device's browser window width (in other words, its viewport width).
</p>
<p>
The only issue is, when your content grows a scroll bar will eventually appear, and this will change the vw value, which could cause a side scrolling. What people usually do is to overflow-x: hidden on the container, then this problem won't happen.
</p>
<p>
Here's an example of how you can use viewport units to achieve a fullwidth background image section:
</p>
<code>
.fullsecreen {
width: 100%;
height: 100vh;
padding: 40vh;
}
</code>
<code>
.a {
background: url('path/to/image.jpg')center/cover;
}
</code>
</article>
</section>
<section
class= "main-section"
id= "Filters"><header>
Filters
</header>
<article>
<p>
CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.
</p>
<p>
To use the CSS filter property, you specify a value for one of the following functions listed above. If the value is invalid, the function returns “none.” Except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34).
</p>
<p>
To change all images to black and white (100% gray) simply enter this code in CSS:
</p>
<code>
img{
filter: grayscale (100%);
}
</code>
</article>
</section>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36.
Challenge: Build a Technical Documentation Page
