1.
he Referer HTTP header contains information about the address or URL of a page
that a user might be visiting from. This information can be used in analytics to
track how many users from your page visit freecodecamp.org, for example. Setting
the rel attribute to noreferrer omits this information from the HTTP request. Give
your a element a rel attribute set to noreferrer.
2.Now you are ready to start putting together the grid layout. CSS Grid offers a
two-dimensional grid-based layout, allowing you to center items horizontally and
vertically while still retaining control to do things like overlap elements.
Begin by creating a main selector and giving it a display property set to grid.
3.Now you can style the layout of your grid. CSS Grid is similar to Flexbox in that
it has a special property for both the parent and child elements.
In this case, your parent element is the main element. Set the content to have a
three-column layout by adding a grid-template-columns property with a value of 1fr
94rem 1fr. This will create three columns where the middle column is 94rem wide,
and the first and last columns are both 1 fraction of the remaining space in the
grid container.
4.Use the minmax function to make your columns responsive on any device. The minmax
function takes two arguments, the first being the minimum value and the second
being the maximum. These values could be a length, percentage, fr, or even a
keyword like max-content.
Wrap each of your already defined values of the grid-template-columns property in a
minmax function, using each value as the second argument. The first argument should
be 2rem, min-content, and 2rem respectively.
5.To add space between rows in the grid layout, you can use the row-gap property.
Give the main selector a row-gap property of 3rem.
6.One option is the grid-column property, which is shorthand for grid-column-start
and grid-column-end. The grid-column property tells the grid item which grid line
to start and end at.
Create a .heading rule and set the grid-column property to 2 / 3. This will tell
the .heading element to start at grid line 2 and end at grid line 3.
7.The CSS repeat() function is used to repeat a value, rather than writing it out
manually, and is helpful for grid layouts. For example, setting the grid-template-
columns property to repeat(20, 200px) would create 20 columns each 200px wide.
Give your .heading element a grid-template-columns property set to repeat(2, 1fr)
to create two columns of equal width.
8.The object-fit property tells the browser how to position the element within its
container. In this case, cover will set the image to fill the container, cropping
as needed to avoid changing the aspect ratio.
9.If you wanted to add more social icons, but keep them on the same row, you would
need to update grid-template-columns to create additional columns. As an
alternative, you can use the grid-auto-flow property.
This property takes either row or column as the first value, with an optional
second value of dense. grid-auto-flow uses an auto-placement algorithm to adjust
the grid layout. Setting it to column will tell the algorithm to create new columns
for content as needed. The dense value allows the algorithm to backtrack and fill
holes in the grid with smaller items, which can result in items appearing out of
order.
For your .social-icons selector, set the grid-auto-flow property to column.
10.Your .text element is not a CSS Grid, but you can create columns within an
element without using Grid by using the column-width property.
Give your .text selector a column-width property set to 25rem.
11.The ::first-letter pseudo-selector allows you to target the first letter in the
text content of an element.
Create a .first-paragraph::first-letter selector and set the font-size property to
6rem. Also give it a color property set to orangered to make it stand out.
12.A quote is not really a quote without proper quotation marks. You can add these
with CSS pseudo selectors.
Create a .quote::before selector and set the content property to " with a space
following it.
Also, create a .quote::after selector and set the content property to " with a
space preceding it.
13.The gap property is a shorthand way to set the value of column-gap and row-gap
at the same time. If given one value, it sets the column-gap and row-gap both to
that value. If given two values, it sets the row-gap to the first value and the
column-gap to the second.
14.The place-items property can be used to set the align-items and justify-items
values at the same time. The place-items property takes one or two values. If one
value is provided, it is used for both the align-items and justify-items
properties. If two values are provided, the first value is used for the align-items
property and the second value is used for the justify-items property.
Give the .image-wrapper selector a place-items property set to center.
15.Start with a @media query for only screen with a max-width of 720px. Inside,
create an .image-wrapper selector and give it a grid-template-columns property of
1fr.
This will collapse the three images into one column on smaller screens.
16.
