Re learn the front end, introduction to ten thousand words, HTML+CSS + responsive Web Design

Responsive web design certification | freeCodeCamp.org

Reminder before viewing: I'm good at using Ctrl+F. I don't want to be detailed, but to understand. I gave links to examples or documents for some incomprehensible contents, and some small games I recommend. I hope I can give you three links 💕

🍓Basic HTML

From here on, if you don't want to see the basic HTML and CSS, you can skip it.

DOCTYPE

<!DOCTYPE html>
<html>
   
	<head>
        <!-- Web page description -->
    </head>

    <body>
        <!-- The content of the web page (displayed to users), all of the following contents are written in body in -->
    </body>
    
</html>

h1~h6 p img br comment

<h1>Hello</h1>
<h2>CatPhotoApp</h2>

<p>I'm a p tag!</p>

<img src="https://www.bit.ly/fcc-relaxing-cat" alt="a cat">

<br>

<!-- notes -->


<!-- main, header, footer, nav, video, article, section and others -->
<main> 
	<h1>Hello World</h1>
	<p>Hello Paragraph</p>
</main>

a

<!-- Jump between pages -->
<a href="https://www.freecatphotoapp.com">cat photos</a>


<!-- Jump in page -->
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>


<!-- #As placeholders, pictures as links -- >
<p>Click here to view more
    <a href="#">
        <img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat.">
        cat photos
    </a>
    .
</p>

list

<!-- Unordered and ordered list -->
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

input

Input is an input text box with different type attributes. Placeholder is used as a placeholder to display the content when it is not entered.

<input type="text">
<input type="text" placeholder="cat photo URL">

form button

Form is the form that sends data to the server.

required indicates that it must be filled in before submission.

<form action="https://www.freecatphotoapp.com/submit-cat-photo">
	<input type="text" placeholder="cat photo URL" required>
    <button type="submit">submit</button>
</form>

label radio checkbox div value

The button is wrapped with label, and for is required to indicate the button id

Radio stands for radio selection, and checked stands for default selection

<label for="indoor">
    <input type="radio" id="indoor" name="indoor-outdoor" checked> Indoor
</label>

<label for="outdoor">
    <input type="radio" id="outdoor" name="indoor-outdoor"> Outdoor
</label>

checkbox is a multi selection box

div is a content partition element, which is a general container for wrapping other elements.

<div>
    <label for="1">
        <input type="checkbox" name="personality" id="1"> 1
    </label>

    <label for="2">
        <input type="checkbox" name="personality" id="2"> 2
    </label> 

    <label for="3">
        <input type="checkbox" name="personality" id="3"> 3
    </label>
</div>

When the button is selected, the data of indoor outdoor = indoor, i.e. value, will be submitted in the form

<label for="indoor">
    <input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor
</label>

🍒Basic CSS

style color

<style>
    h2 {
		color: red;
    }
</style>

<!-- or -->

<h2 style="color: red;">CatPhotoApp</h2>

class

An HTML element can have multiple class es

<style>
    .red-text {
        color: red;
        background-color: silver;
    }
</style>

<h2 class="red-text">CatPhotoApp</h2>

font

Browse Fonts - Google Fonts

<link
    href="https://fonts.googleapis.com/css?family=Lobster"
    rel="stylesheet"
    type="text/css"
/>

<style>
    p {
        font-size: 16px;
        font-family: monospace;
        font-weight: 200;
    }
    
    h2 {
        font-family: Lobster, "Open Sans";
    }
</style>

size border

<style>
    .smaller-image {
        width: 100px;
    }
    
    .thick-green-border {
        border-color: green;
        border-width: 10px;
        border-style: solid;
        border-radius: 10px; 	/* 50% */
    }
</style>

<img class = "smaller-image thick-green-border"  
     src="https://bit.ly/fcc-relaxing-cat"  
     alt="A cute orange cat."
>

id

An HTML element can only have one id

<style>
    #cat-photo-form {
        background-color: green;
    }
</style>

<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
	<button type="submit">Submit</button>
</form>

padding margin border

The rectangular space occupied by each HTML element is controlled by these three important attributes: inner margin padding, outer margin margin and border.

padding is used to control the size of the gap between the element content and the border.

margin is used to control the border distance between the element's border and other elements.

If margin is set to a negative value, the element will take up more space.

.red-box {
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    
    /* Clockwise assignment */
    padding: 20px 40px 20px 40px;
}

.blue-box {
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
    
    margin: 20px 40px 20px 40px;
}

attribute selectors

/* [attr=value] */

[type='radio'] {
    margin-top: 10px;
    margin-bottom: 15px;
}

em rem

Relative to the unit length, their actual values will depend on the values of other lengths.

em relative to the font size of the text in the current object.

rem is only the HTML root element.

Introduction to differences between px, em and rem (runoob.com)

.red-box {
    background-color: red;
    margin: 20px 40px 20px 40px;
    padding: 1.5em;
}

body class id important

You can inherit styles from the body

<style>
    body {
        background-color: black;
        color: green;
        font-family: monospace;
    }
</style>

<h1>Hello World</h1>

class overrides the CSS style of the body.

The class order declared in the < style > tag is very important, and subsequent declarations will overwrite the previous declarations. The second declaration always takes precedence over the first declaration.

The id selector always takes precedence over the class selector.

Inline styles take precedence over id selectors.

To ensure that your CSS style is not affected, you can use! important .

Priority order:
!important > style="" > #id > .afterClass > .class > body

<style>
    body {
        background-color: black;
        font-family: monospace;
        color: green;
    }

    .pink-text {
        color: pink !important;
    }

    .blue-text {
        color: blue;
    }

    #orange-text {
        color: orange;
    }

</style>

<h1 class="pink-text blue-text" id="orange-text" style="color: white;">Hello World!</h1>

color hex

Hexadecimal coding uses six hexadecimal characters to represent color. The two characters are a group, representing red (R), green (G) and blue (B) respectively.

It can be abbreviated into three numbers, representing the three primary colors of red (R), green (G) and blue (B).

#FF0000 and #F00 are identical colors.

<style>
    .red-text {
        color: #FF0000;
    }
    
    .green-text {
        color: #0F0;
    }
    
    .blue-text {
        color: rgb(0, 0, 255);
    }
    
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="green-text">I am green!</h1>

<h1 class="blue-text">I am blue!</h1>

var

Changing multiple values at once through CSS variables

--penguin-skin: gray;

background: var(--penguin-skin);

The alternate value is not used to enhance browser compatibility, nor is it applicable to IE browser.
Instead, it is used to let the browser display a color when it can't find your variable.

background: var(--penguin-skin, black);

browser fallbacks

Provide a browser degradation scheme to avoid browser compatibility problems.

For example, IE browser will ignore the background color because it does not support CSS variables.

Provide another broader value before the declaration. The old browser will downgrade to use this scheme, and the new browser will override the downgrade scheme in the subsequent declaration.

<style>
    :root {
        --red-color: red;
    }
    .red-box {
        background: red;
        background: var(--red-color);
        height: 200px;
        width:200px;
    }
</style>

<div class="red-box"></div>

:root

CSS variables are inheritable, just like ordinary properties.

When you create a variable, the variable is available in the selector where you create the variable. At the same time, it is also available in the descendant selector of this selector.

: root is a pseudo class selector. Variables created in: root are available globally, that is, they take effect in any selector.

If the same variable is created in the element, the value of the variable acting on the whole page will be overwritten.

:root {
    --penguin-belly: pink;
}

.penguin {
    --penguin-belly: white;
}

@media

CSS variables can simplify the way media queries are defined.

When the screen is smaller or larger than the value set by the media query, the element style using this variable will change as long as we update the value of the variable.

:root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
}

@media (max-width: 350px) {
    :root {
        --penguin-size: 200px;
        --penguin-skin: black;
    }
}

🍑Applied Visual Design

text-align width height

The text align attribute in CSS can control the alignment of text:

text-align: left; Default, text left justified
text-align: right; Align text right
text-align: justify; You can align both ends of text except the last line, that is, the left and right ends of each line are close to the edge of the line
text-align: center; Center text

h4 {
    text-align: center;
    height: 25px;
}

p {
    text-align: justify;
}

.fullCard {
    width: 245px;
}

strong u em s

Strongbold text, the browser will automatically add this style to the element: font weight: bold;
u underline the text (which may confuse text and links? Avoid use), and automatically add: text decoration: underline;
em emphasized text (italics), automatically added: font style: italic;
s adds a strikeout to the text, and automatically adds: text decoration: line through;
Hrcreate horizontal lines

<div class="cardText">
    <h4><s>Google</s>Alphabet</h4>
	<hr>
    <p>
        <em>Google was founded by Larry Page and Sergey Brin while they were 
        <u>Ph.D. students</u> at 
        <strong>Stanford University</strong>
        .</em>
    </p>
</div>

rgba

RGB values can be taken between 0 and 255.

alpha value, i.e. transparency, can be between 0 and 1, where 0 represents complete transparency and 1 represents complete opacity.

h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
}

box-shadow opactiy

The box shadow attribute in CSS is used to add shadows to elements. You can add multiple shadows separated by commas:

offset-x the horizontal offset of the shadow
offset-y the vertical offset of the shadow
Blur radius
Spread radius shadow spread radius
color
Two radii are optional.

The opacity property is used to set the transparency of the element, preferably between 0 and 1.

#thumbnail {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 
        		0 6px 6px rgba(0, 0, 0, 0.23);
}

.links {
    text-align: left;
    color: black;
    opacity: 0.7;
}

text-transform

value	result
lowercase	"transform me"
uppercase	"TRANSFORM ME"
capitalize	"Transform Me"
initial	Use default values
inherit	Use the text transform value of the parent element.
none	*Default: * do not change text.

h4 {
    text-transform: uppercase;
}

font

font-size
Font weight font weight
Line height (line spacing)

p {
    font-size: 16px;
    font-weight: 200;
    line-height: 25px;
}

:hover

Pseudo classes are keywords that can be added to selectors to select elements in a specific state.

You can use the: hover pseudo class selector to select the hover state of a hyperlink.

<style>
    a {
        color: #000;
    }

    a:hover {
        color: blue;
    }
</style>

<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>

position

In CSS, all HTML elements are boxes, which is commonly called box model.

Block level elements automatically start with a new line (such as title, p, and div), and the elements in the line (inline) are arranged after the previous element (such as img and span).

By default, the element is laid out in this way, which is called the normal flow of the document, and CSS provides the position attribute to override it.

The attributes of the offset in each direction are left, right, top and bottom, representing the direction away from the original position.

value	describe
absolute	Generate an absolutely positioned element, which is positioned relative to the first parent element other than static positioning. The position of the element is specified by the "left", "top", "right" and "bottom" attributes.
fixed	Generates fixed positioned elements that are positioned relative to the browser window. The position of the element is specified by the "left", "top", "right" and "bottom" attributes.
relative	Generates a relatively positioned element that is positioned relative to its normal position. Therefore, left:20 adds 20 pixels to the LEFT position of the element.
static	Default value. Without positioning, the element appears in the normal flow (ignoring the top, bottom, left, right or z-index declarations).
sticky	Sticky positioning, which is based on the position where the user scrolls. It behaves like position:relative; When the page scrolls beyond the target area, it behaves like position:fixed;, It will be fixed at the target position.
inherit	Specifies that the value of the position attribute should be inherited from the parent element.

relative

When the positioning of an element is set to relative, you can specify the relative offset of the element under the current document flow page through CSS.

This will not change the position of the element in the layout, nor will it affect the position of other elements.

h2 {
    position: relative;
    bottom: 10px;
    left: 15px;
}

absolute

Absolute positioning will remove the element from the current document stream, and the surrounding elements will ignore it.

The positioning of the element refers to the nearest ancestor element. If its parent element does not add a positioning rule (the default is position: relative;), the browser will continue to look until the default body tag.

<style>
    #searchbar {
        position: absolute;
        top: 50px;
        right: 50px;
    }
    section {
        position: relative;
    }
</style>
<body>
    <section>
        <form id="searchbar">
            <label for="search">Search:</label>
            <input type="search" id="search" name="search">
            <input type="submit" name="submit" value="Go!">
        </form>
    </section>
</body>

fixed

fixed positioning is a special absolute positioning that positions elements relative to the browser window.

The same as absoult is that it is used with CSS offset attribute and also removes elements from the current document stream. Other elements will ignore its existence, so you may need to adjust the layout of other locations.

The biggest difference: fixed positioned elements do not move as the screen scrolls.

#navbar {
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    background-color: #767676;
}

float

Set the float attribute of the element. The floating element is not in the document flow. It floats to left or right until its outer edge touches the border containing the box or another floating box.

It is usually necessary to use the width attribute to specify the horizontal space occupied by floating elements.

#left {
    float: left;
    width: 50%;
}
#right {
    float: right;
    width: 40%;
}

z-index

You can use the z-index attribute to specify the stacking order of elements.

The value of z-index is an integer, and the elements with large values will be superimposed on the elements with small values.

.first {
    background-color: red;
    position: absolute;
    z-index: 2;
}
.second {
    background-color: blue;
    position: absolute;
    left: 40px;
    top: 50px;
    z-index: 1;
}

center horizontally

You can use display: block; Change the in-line element img into a block level element and center the picture horizontally.

<style>
    div {
        background-color: blue;
        height: 100px;
        width: 100px;
        margin: auto;
    }

    img {
        display: block;
        margin: auto;
    }
</style>

<div></div>
<img src="https://gitee.com/mancuojie/typo/raw/master/202109080155881.png" alt="🦔">

Color

Color model - Wikipedia

When two colors are just at both ends of the color ring, the two colors complement each other. Two complementary colors will turn gray after mixing.

After selecting the main color, select two colors adjacent to its complementary color on the color ring to match it. This collocation has both contrast and harmony.

hsl

Hue, Saturation, Lightness

Hue value is the angle value from 0 to 360 degrees corresponding to the color in the color ring.

Saturation refers to the purity of color, that is, the proportion of gray in color. The higher the saturation, the less the proportion of gray and the purer the color; On the contrary, it is completely gray. The value range of saturation is 0 to 100 representing the percentage of gray.

Brightness determines the brightness of the color, that is, the proportion of white or black in the color. Among them, 100% brightness represents pure white, 0% brightness represents pure black, and 50% brightness represents the color selected in the hue.

hsl() makes it easier for CSS to change color tones. For example, adding white to a solid color with l can bring up a lighter tone; Adding black creates a deeper tone. In addition, you can also change the depth and shade of the color by s adding gray to the solid color.

The default background color of all elements is transparent. You can adjust the hue and shadow by modifying the saturation and brightness.

<style>
    header {
        background-color: hsl(180, 90%, 35%);
        color: #FFFFFF;
    }

    nav {
        background-color: hsl(180, 80%, 25%);
    }

    nav ul {
        margin: 0px;
        padding: 5px 0px 5px 30px;
    }

    nav li {
        display: inline;
        margin-right: 20px;
    }

</style>

<header>
    <h1>Cooking with FCC!</h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Classes</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

linear-gradient

The first parameter specifies the direction of the color transition -- its value is angle.

90deg represents a vertical gradient (from left to right), and 45deg represents a diagonal gradient (from lower left to upper right).

Other parameters specify the order of gradient colors.

div {
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
    background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}

Repeating linear gradient() repeats the specified gradient.

There are many parameters. This test only uses angle value and color code.

div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
        90deg,
        yellow 0px,
        blue 40px,
        green 40px,
        red 80px
    );
}

background

The background attribute supports using the url() function as the attribute value

We can introduce texture or style images through links.

<style>
    body {
        background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
    }
</style>

transform

When the pseudo class is used to select the specified state of an element (such as hover), we can easily add interaction to the element through the transform attribute.

scale

Used to change the display scale of elements.

<style>
    div {
        width: 70%;
        height: 100px;
        margin: 50px auto;
        background: linear-gradient(
            53deg,
            #ccfffc,
            #ffcccf
        );
    }

    div:hover {
        transform: scale(1.1);
    }
</style>

<div></div>

skewX skewY

skewX(): flips the selected element by the specified angle along the X axis (transverse).

skewY(): flips the element by a specified angle along the Y axis (vertical direction).

#top {
    background-color: red;
    transform: skewY(-10deg);
}

#bottom {
    background-color: blue;
    transform: skewX(24deg);
}

rotate

Rotate the element, positive clockwise, negative counterclockwise.

.heart {
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
}

Create Graphics

Crescent Moon

Create a round, transparent shape with blurred shadows and decreasing slightly to both sides.

As you can see, this shadow is in the shape of a new moon.

<style>
    .center {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: transparent;
        border-radius: 50%;
        box-shadow: 25px 10px 0 0 blue;
    }

</style>
<div class="center"></div>

Heart

Pseudo elements:: before and:: after can add something before or after the selected element.

It must be used in conjunction with content. This attribute is usually used to add content to elements, such as pictures or text.

The content attribute is still required, and its value can be an empty string when used to implement a shape.

<style>
    .heart {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: pink;
        height: 50px;
        width: 50px;
        transform: rotate(-45deg);
    }

    .heart::after {
        content: "";
        background-color: pink;
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        left: 25px;
    }

    .heart::before {
        content: "";
        background-color: pink;
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: -25px;
        left: 0;
    }
</style>

<div class="heart"></div>

Animation

Add animation to the element: the animation attribute controls the appearance of the animation, and the @ keyframes rule controls the changes in each stage of the animation.

@keyframes animate specific frames of duration (from 0% to 100%) with CSS rules.

8 attribute values	explain
animation-name	The name used to set the animation, that is, the name used in @ keyframes.
animation-duration	Specifies how many seconds or milliseconds the animation will take to complete
animation-timing-function	How will animation complete a cycle
animation-delay	Sets the delay interval before the animation starts
animation-iteration-count	Defines the number of times the animation is played
animation-direction	Specifies whether the animation should play backwards in turn
animation-fill-mode	Specifies the style to be applied to the element when the animation does not play (when the animation is completed, or when the animation does not start playing with a delay)
animation-play-state	Specifies whether the animation is running or paused

<style>
    div {
        height: 40px;
        width: 70%;
        background: black;
        margin: 50px auto;
        border-radius: 5px;
        position: relative;
    }

    #rect {
        animation-name: rainbow;
        animation-duration: 4s;
    }

    @keyframes rainbow {
        0% {
            background-color: blue;
            top: 0;
            left: 0;
        }
        50% {
            background-color: green;
            top: 50px;
            left: 25px;
        }
        100% {
            background-color: yellow;
            top: 0;
            left: -25px;
        }
    }
</style>

<div id="rect"></div>

fill-mode

value	describe
none	Do not change the default behavior.
forwards	When the animation is complete, the last attribute value (defined in the last key frame) is maintained.
backwards	For the period of time specified by the animation delay, the start attribute value (defined in the first key frame) is applied before the animation is displayed.
both	Both forward and backward fill patterns are applied.

<style>
    button {
        border-radius: 5px;
        color: white;
        background-color: #0F5897;
        padding: 5px 10px 8px 10px;
    }

    button:hover {
        animation-name: background-color;
        animation-duration: 500ms;
    }

    @keyframes background-color {
        100% {
            background-color: #4791d0;
        }
    }

</style>

<button>Register</button>

iteration-count

nimation-iteration-count	describe
n	Defines the number of times the animation is played.
infinite	Specifies that the animation should be played indefinitely.

<style>
    .back {
        position: fixed;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        animation-name: backdiv;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }

    .heart {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: pink;
        height: 50px;
        width: 50px;
        transform: rotate(-45deg);
        animation-name: beat;
        animation-duration: 1s;
        animation-iteration-count: infinite
    }

    .heart:after {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        left: 25px;
    }

    .heart:before {
        background-color: pink;
        content: "";
        border-radius: 50%;
        position: absolute;
        width: 50px;
        height: 50px;
        top: -25px;
        left: 0;
    }

    @keyframes backdiv {
        50% {
            background: #ffe6f2;
        }
    }

    @keyframes beat {
        0% {
            transform: scale(1) rotate(-45deg);
        }
        50% {
            transform: scale(0.6) rotate(-45deg);
        }
    }

</style>
<div class="back"></div>
<div class="heart"></div>

timing-function

✿ cubic-bezier.com

A mathematical function called Cubic Bezier function is used to generate the velocity curve.

value	describe
linear	The speed of the animation is the same from beginning to end.
ease	Default. The animation starts at a low speed, then speeds up and slows down before it ends.
ease-in	The animation starts at low speed and ends at high speed.
ease-out	The animation starts at high speed and ends at low speed.
ease-in-out	The animation starts and ends at low speed.
cubic-bezier(n,n,n,n)	Enter your own value in the cubic Bezier function. Possible values are values from 0 to 1.

The cubic Bezier function contains four points in the 1 * 1 grid: p0, p1, p2 and p3.

Where p0 and p3 are fixed values, representing the starting and ending points of the curve, and the coordinate values are (0, 0) and (1, 1).

You only need to set the x and y values of the other two points, which determine the shape of the curve and the speed curve of the animation.

In CSS, p1 and p2 are determined by (x1, y1, x2, y2).

Generally speaking, put a straight line in the coordinate axis with a range of only 1, and pull p1 and p2 from the middle (the value range of X axis is [0,1], and Y axis is arbitrary)

<style>
    .balls {
        border-radius: 50%;
        position: fixed;
        width: 50px;
        height: 50px;
        top: 60%;
        animation-name: jump;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    #red {
        background: red;
        left: 25%;
        /*animation-timing-function: linear;*/
        animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    }

    #blue {
        background: blue;
        left: 50%;
        animation-timing-function: ease-out;
    }

    #green {
        background: green;
        left: 75%;
        animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
    }

    @keyframes jump {
        50% {
            top: 10%;
        }
    }
</style>

<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>

🍏Applied Accessibility

img alt

alt attribute can help users understand the picture content when the picture fails to load or is not visible. Search engines also use it to understand the picture content and add it to the search results.

Screen readers can recognize the alt attribute and read the content to inform visually impaired users of the key information contained in the picture.

img still needs an alt attribute when the picture has a text description or just to beautify the page, but it can be set to an empty string.

For a picture with a title, you still need to add alt text, which helps search engines record the content of the picture.

<img src="importantLogo.jpeg" alt="Company logo">

Elements

HTML5 introduces a large number of new tags such as main, header, footer, nav, article and section, giving developers more choices and auxiliary functions.

By default, browsers render these elements in a manner similar to a normal div. However, using them where appropriate gives the markup text more meaning.

h1 ~ h6

Each page should have only one h1 tag that outlines the topic of the page.

Six title tags allow search engines to get the outline of the page.

main

The main tag is used to render the main content of the web page, and each page should have only one.

It has an embedded feature that allows assistive technology to quickly locate the body of the page.

If you see the "jump to main content" link at the top of the page, using the main tag will automatically enable the auxiliary device to have this jump function.

article

article is a segment label used to present independent and complete content. This tag applies to blogs, forum posts or news articles.

Delete all the surrounding context, the content is still meaningful, and make sure that the content can be used as a separate part.

article is used for independent and complete content, while section is used to group content related to topics, which can be nested as needed.

For example, if a book is an article, each chapter is a section.

When there is no connection between content groups, we can use div.

header

The header can present profile information or navigation links for parent tags, which is suitable for content that repeats at the top of multiple pages.

The header should be used in the body tag of the HTML document, which is different from the head tag containing page title and meta information.

nav

nav is also an HTML 5 tag with semantic features.

It enables screen readers to quickly identify the navigation information in the page. It is used to render the main navigation link in the page.

footer

The footer element also has semantic features, which can be quickly located by auxiliary tools.

It is located at the bottom of the page and is used to present copyright information or related document links.

audio

Audio tag is used to present audio content or audio stream. It also has semantic characteristics. Audio content also requires backup text for the deaf or hard of hearing.

The audio tag supports the controls attribute, which is used to display the browser's default playback, stop and other controls, as well as keyboard functions.

Note: the playback speed of audio clips may be too fast to understand, but this is the normal speed for screen reader users.

<audio controls>
    <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg">
</audio>

figure figcaption

The figure tag and the figcaption tag are used together to display visual information (such as pictures, charts) and their titles.

<figure>
    <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
    <br>
    <figcaption>
        Master Camper Cat demonstrates proper form of a roundhouse kick.
    </figcaption>
</figure>

label for

The text content of the label is usually the name or label of the form component.

These texts show the meaning of the component and improve the accessibility of the form.

The for attribute of the label tag binds the tag to the form component, and the screen reader will also read the attribute value of the for attribute.

In order to select the input box when clicking the label, the radio button input label can be nested in the label label label. Or use the for attribute to make it the same value as the id attribute of the form component.

<label for="email">Email:</label>
<input type="text" id="email" name="email">

<input type="submit" name="submit" value="Submit">

fieldset legend

The fieldset tag wraps the entire set of radio buttons and uses the legend tag to provide a description of the grouping so that screen reader users can read each option in the fieldset element.

When the meaning of options is clear, such as "gender selection", it is sufficient to use the label label containing the for attribute.

<form>
    <fieldset>
        <legend>Choose one of these three items:</legend>
        <input id="one" name="items" type="radio" value="one">
        <label for="one">Choice One</label>
        <br>
        <input id="two" name="items" type="radio" value="two">
        <label for="two">Choice Two</label>
        <br>
        <input id="three" name="items" type="radio" value="three">
        <label for="three">Choice Three</label>
    </fieldset>
</form>

input date

<label for="pickdate">Enter a date: </label>
<input type="date" id="pickdate" name="date">

time datetime

<p>
    Thank you to everyone for responding to Master Camper Cat's survey. 
    The best day to host the vaunted Mortal Kombattournament is
    <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>
    . May the best ninja win!
</p>

ScreenReader-only

Add some content that is only visible to screen readers, which can be implemented with CSS.

be careful:

display: none; Or visibility: hidden; Will completely hide the content, and the screen reader will not be able to access it.
If the value is set to 0px, such as width: 0px; height: 0px;， This means leaving the element out of the document stream, which also causes the screen reader to ignore the element.

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    top: auto;
    overflow: hidden;
}

High Contrast Text

The Web content accessibility Guide (WCAG) recommends a contrast of at least 4.5:1 for normal text.

Contrast is calculated by comparing the relative brightness values of two colors.

The contrast ranges from 1:1 (no contrast) of the same color to the highest contrast of 21:1 for white and black.

The contrast can reach 4.5:1 by darkening the darker color and lightening the lighter color.

In the color wheel, the darker colors are usually blue, purple, magenta and red, while the lighter colors are usually orange, yellow, green and cyan.

accesskey

HTML provides the accesskey attribute, which is used to specify the shortcut key to activate the element or make the element get focus.

Adding the accesskey attribute allows users using the keyboard to navigate more efficiently.

HTML5 allows this attribute to be used on any tag. This attribute is especially applicable to elements such as links, buttons, form components, and so on.

tabindex

When users use the keyboard to browse the page, elements such as links and form controls can automatically obtain focus, and the order of obtaining focus is consistent with the order in which they appear in the HTML document stream. Of course, you can make other tags (such as div, span, p, etc.) achieve similar effects by setting their tabindex attribute value to 0.

Note: tags with a negative integer (usually - 1) value of the tabindex attribute can also get focus, but you can't get focus through keyboard operations (such as tab key). Using the tabindex attribute can also make the CSS pseudo class: focus take effect on the p tag.

<div tabindex="0">I need keyboard focus!</div>

Set tabindex="1" for the element, and the keyboard will first focus on this element.

It then loops through the specified tabindex values (2, 3, etc.) and moves to the default value and the tabindex="0" item.

<input type="search" name="search" id="search" tabindex="1">
<input type="submit" name="submit" value="Submit" id="submit" tabindex="2">

🍉Responsive Web Design Principles

@media

You can adjust the layout of content according to different viewport sizes.

A viewport is the web content visible to the user in the browser. The viewport changes depending on the device accessing the web site.

p {
    font-size: 20px;
}

@media (max-height: 800px) {
    p {
        font-size: 10px;
    }
}

Responsive Image

Make pictures adaptive to device size:

Setting the max width value to 100% ensures that the picture does not exceed the range of the parent container.
Set the height property to auto to maintain the original aspect ratio of the picture.

<style>
    .responsive-img {
        max-width: 100%;
        height: auto;
    }

    img {
        width: 600px;
    }
</style>

<img class="responsive-img" 
     src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" 
     alt="freeCodeCamp stickers set">
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" 
     alt="freeCodeCamp stickers set">

Retina Image

Retinal images should be used for high-resolution screens: due to the difference in pixel density between "retinal display" and "non retinal display" displays, some images that do not consider high-resolution displays may not be clear enough due to "pixelation" when rendered on high-resolution displays.

The easiest way to make images appear correctly on a high-resolution display is to define their width and height values as half of the original values.

<style>
    img {
        /* The original size is 200px in width and height */
        height: 100px;
        width: 100px;
    }
</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" 
     alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">

vw vh vmin vmax

The window unit is the window size (width or height) relative to the device, and the percentage is the size relative to the parent element.

Two different window units are:

VW: for example, 10vw means 10% of the window width.
VH: for example, 3vh means 3% of the window height.
Vmin: for example, 70vmin means 70% of the smaller of the window's height and width.
Vmax: for example, 100vmax means 100% of the height and width of the window.

<style>
    h2 {
        width: 80vw;
        background-color: pink;
    }

    p {
        width: 75vmin;
        background-color: pink;
    }

</style>

<h2>Importantus Ipsum</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus
    massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet
    lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac
    habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem.
    Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida
    consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.
</p>

🍈CSS Flexbox

Play Flex Box Adventure – CSS Game to Learn Flexbox (codingfantasy.com)

Knights of the Flexbox table

Flexbox Froggy - A game for learning CSS flexbox

Flexbox Defense

Flexbox Zombies (mastery.games)

Adding the display: flex attribute to an element can turn it into a flex container, and then arrange the items of the element in rows or columns.

flex-direction

The property value is set to row or column to arrange all its child elements horizontally or vertically.

value	describe
row	Default value. The flex item will be displayed horizontally, just like a row.
row-reverse	Same as row, but in reverse order.
column	Flexible items are displayed vertically, just like a column.
column-reverse	Same as column, but in reverse order.

justify-content

Sometimes flex child elements cannot fill the entire flex container. You can tell CSS how to arrange flex child elements through different values of the justify content attribute.

The direction in which the child elements are arranged is called the main axis. For rows, the spindle runs horizontally through each item; For columns, the spindle runs vertically through each item.

value	describe Playit (runoob.com)
flex-start	Default value. Arrange items from the beginning of the flex container. Move items to the left for rows and to the top for columns.
flex-end	Arrange items from the end of the flex container. Move items to the right for rows and to the bottom for columns.
center	Flex child elements are centered in the flex container.
space-between	The items are centered along the main axis with a certain spacing between them. The first and last items are placed on the edge of the container. For example, in a row, the first item will be close to the left of the container, the last item will be close to the right of the container, and then the other items will be arranged evenly.
space-around	It is similar to space between, but the first and last items will not be close to the edge of the container, and the space between all items is evenly arranged.
space-evenly	The head and tail items will not be close to the edge of the container, and the space between all items will be evenly arranged.

align-items

In Flex container, the one perpendicular to the main axis is called cross axis. The cross axis of rows is vertical and the cross axis of columns is horizontal.

The align items attribute defines the alignment of flex child elements along the cross axis.

For a row, it defines the up-down alignment of elements; For columns, it defines the left-right alignment of elements.

Attributes	Description Playit (runoob.com)
stretch	Default value. Stretch the item and fill the flex container. For example, items in rows stretch from the top to the bottom of the container.
center	Center the item. For rows, center vertically (items are the same distance from the top and bottom); For columns, center horizontally (items are the same distance from the left and right).
flex-start	Align items from the beginning of the flex container. For rows, move the item to the top of the container; For columns, move the item to the left of the container.
flex-end	Align items from the end of the flex container. For rows, move the item to the bottom of the container; For columns, move the item to the right of the container.
baseline	Align along baseline. Baseline is a text related concept, which can be regarded as the lower baseline of alphabetic arrangement.

flex-wrap

In my understanding, truncation is like hard wrap, which is usually used in the software settings of JetBrains. It is used to set the maximum number of characters in each line. When you format the code Ctrl+Alt+L, a line break character will be forcibly inserted to form a line break in the display effect.

By default, the flex container resizes items and plugs them all together. For rows, all items will be in a straight line.

Use the flex wrap attribute to wrap items. This means that the extra child elements will be moved to a new row or column. The breakpoint at which a newline occurs is determined by the size of the child element and the container.

value	describe
nowrap	Default, no line breaks.
wrap	If the arrangement is based on behavior, the rows are arranged from top to bottom; If the arrangement is based on columns, the columns are arranged from left to right.
wrap-reverse	If the arrangement is based on behavior, the rows are arranged from bottom to top; If the arrangement is based on columns, the columns are arranged from right to left.

Child Elements

The above-mentioned attributes are applied to the flex container (the parent element of the flex child element). Here are some practical attributes of the child element.

flex-shrink

After use, if the flex container is too small, the child elements will automatically shrink.

When the width of the container is less than the sum of the widths of all child elements inside, all child elements will be automatically compressed.

The flex shrink of child elements accepts values as attribute values. The higher the value, the more compressed the element is compared to other elements.

For example, if the flex shrink attribute value of one item is 1 and the flex shrink attribute value of another item is 3, the latter will be compressed three times compared with the former.

flex-grow

Flex shrink adjusts the child elements when the container is too small.

Accordingly, flex grow adjusts the child elements when the container is too large.

If the value of the flex growth attribute of one project is 1 and the value of the flex growth attribute of another project is 3, the one with the value of 3 will be three times larger than the other.

flex-basis

The flex basis attribute defines the initial size of an element before it is adjusted using the flex shrink or flex grow attributes of CSS.

The unit of the flex basis attribute is the same as that of other attributes representing size (px, em,% etc.). If the value is auto, the size of the item adjusts with the content.

Three attribute values can be set together: for example, flex: 1 0 10px;

The project property will be set to flex growth: 1 flex-shrink: 0; And flex basis: 10px;.

The default setting is flex: 0 1 auto;.

order

By default, items are arranged in the same order as in the source HTML file.

The order attribute indicates the order of the child elements in the CSS flex container. Accept numbers as arguments, you can use negative numbers.

align-self

Align self allows you to adjust the alignment of individual child elements without affecting all child elements.

The settable value is the same as that of align items, and it overrides the value set by align items.

This attribute is useful because none of the alignment adjustment attributes such as float, clear, and vertical align can be applied to flex child elements.

🍍CSS Grid

Grid Garden - A game for learning CSS grid (cssgridgarden.com)

Play Grid Attack – CSS Game to learn CSS Grid (codingfantasy.com)

CSS Grid Cheat Sheet (alialaa.github.io)

By setting the value of the attribute display to grid, the HTML element can become a grid container.

In CSS grid, the parent element is called container, and its child element is called items.

grid-template

rows columns

.container {
    display: grid;
    
    /* Add two columns in the grid container, both 50px wide */
    grid-template-columns: 50px 50px;
    
    /* Add two rows in the grid container, both 50px wide */
    grid-template-rows: 50px 50px;
}

fr

In the CSS grid, you can use absolute units (such as px) or relative units (such as em) to define the size of rows or columns.

The following units can also be used:

fr: sets the proportion of columns or rows in the remaining space.
auto: set the column width or row height to automatically equal to the width or height of its contents.
%: adjusts a column or row to a percentage of its container width or height.

.container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;

    /* 
    The width of the first column is equal to its content width;
    The second column is 50px wide; The width of the third column is 10% of its container;
    In the last two columns, divide the remaining width into three equally, the fourth column accounts for two and the fifth column for one. 
    */
    grid-template-columns: auto 50px 10% 2fr 1fr;
}

grid-gap

.container {
    display: grid;
	width: 100%;
    
    /* Add 10px white space between all columns */
    grid-column-gap: 10px;
    /* Add spacing with a height of 5px to all rows */
    grid-row-gap: 5px;

    /* The first value represents row spacing and the second value represents column spacing */
    grid-gap: 10px 20px;
    /* Only one value means that it is all this value */
    grid-gap: 10px;
}

grid-column grid-row

All the above discussions revolve around the grid container.

The grid column and grid row properties are properties for the grid item itself.

In the grid, the imaginary horizontal and vertical lines are called lines. These lines are numbered from 1 in the upper left corner of the grid, and the vertical lines are counted to the right and the horizontal lines are counted downward.

.item5 {
    background: PaleGreen;
    
    /* Occupy the last two columns of the grid, that is, the part of column lines 2 ~ 4 */
    grid-column: 2 / 4;
    
    /* Occupy the last two lines */
    grid-row: 2 / 4;
}

Cell Attr

In CSS grid, the content of each grid item is located in a box called cell.

The following four element attribute values can be shared:

value	describe
stretch	By default, the content will occupy the width of the entire cell
center	Center and align contents in cells
start	Aligns the contents to the left of the cell
end	Align content to the right of the cell

justify-self

CSS / justify-self — DevDocs

Use the justify self property of the grid item to set the alignment of its contents along the horizontal axis within the cell.

align-self

CSS / align-self — DevDocs

Use the align self property on grid items to set the vertical alignment of grid items.

justify-items

CSS / justify-items — DevDocs

Using justify items for the grid container allows all grid items in the grid to be aligned horizontally.

Align all grid items in the grid in the set way.

align-items

CSS / align-items — DevDocs

You can align all grid items in the grid vertically.

Areas

grid-template-areas

You can combine some cells in the grid into an area and assign a custom name to the area.

This is achieved by adding grid template areas to the container:

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    
    /* Each word represents a cell, and each pair of quotation marks represents a row */
    grid-template-areas:
        "header header header"
        "advert content content"
        "footer footer footer";
}

grid-area

Use grid area for grid items and place elements in the corresponding area by referring to the name of the area you define.

.item5 {
    background: PaleGreen;
    grid-area: footer;
}

Grid area: n / N / N / N: represents the start of horizontal grid lines and the start of vertical grid lines respectively.

.item5 {
    background: PaleGreen;
    
    /* Placed on the 3rd and 4th horizontal grid lines
    And in the area between the 1st and 4th vertical grid lines */
    grid-area: 3/1/4/4;
}

repeat minmax

When using grid template columns or grid template rows to define the grid structure, you need to enter a value for each row or column added.

The repeat method specifies the number of times the row or column is repeated, followed by a comma and the value that needs to be repeated.
minmax is used to limit the size of mesh items when the mesh container is changed. You need to specify the allowable size range of mesh items.
The repeat method has the auto fill function: put as many rows or columns of the specified size as possible according to the size of the container. You can more flexibly layout by combining auto fill and minmax.
The effect of auto fit is almost the same as that of auto fill. The only difference is that when the size of the container is greater than the sum of the grid items, auto fill will continue to put empty rows or columns at one end, which will squeeze all grid items to the other side; Auto fit does not put empty rows or columns at one end, but stretches all grid items to the appropriate size.
If the container is not wide enough to place all grid items on the same row, the remaining grid items will be moved to a new row.

.container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;

    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    
    /* grid-template-rows: 1fr 1fr 1fr; */
    grid-template-rows: repeat(3, 1fr);

    grid-gap: 10px;
}

@media

@media (min-width: 300px){
    .container{
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "advert header"
            "advert content"
            "advert footer";
    }
}

@media (min-width: 400px){
    .container{
        grid-template-areas:
            "header header"
            "advert content"
            "footer footer";
    }
}

Grid within grid

Converting an element into a grid will only affect its child elements (that is, the direct descendants element). Therefore, setting a child element as a grid will get a nested grid.

<style>
    .container {
        font-size: 1.5em;
        min-height: 300px;
        width: 100%;
        background: LightGray;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr auto;
        grid-gap: 10px;
        grid-template-areas:
            "advert header"
            "advert content"
            "advert footer";
    }
    .item1 {
        background: LightSkyBlue;
        grid-area: header;
    }

    .item2 {
        background: LightSalmon;
        grid-area: advert;
    }

    .item3 {
        background: PaleTurquoise;
        grid-area: content;
        display: grid;
        grid-template-columns: auto 1fr;
    }

    .item4 {
        background: lightpink;
        grid-area: footer;
    }

    .itemOne {
        background: PaleGreen;
    }

    .itemTwo {
        background: BlanchedAlmond;
    }

</style>

<div class="container">
    <div class="item1">header</div>
    <div class="item2">advert</div>
    <div class="item3">
        <div class="itemOne">paragraph1</div>
        <div class="itemTwo">paragraph2</div>
    </div>
    <div class="item4">footer</div>
</div>

Posted by Res on Fri, 10 Sep 2021 20:29:47 -0700

Programmer Group

Re learn the front end, introduction to ten thousand words, HTML+CSS + responsive Web Design

🍓Basic HTML

DOCTYPE

h1~h6 p img br comment

a

list

input

form button

label radio checkbox div value

🍒Basic CSS

style color

class

font

size border

id

padding margin border

attribute selectors

em rem

body class id important

color hex

var

browser fallbacks

:root

@media

🍑Applied Visual Design

text-align width height

strong u em s

rgba

box-shadow opactiy

text-transform

font

:hover

position

relative

absolute

fixed

float

z-index

center horizontally

Color

hsl

linear-gradient

background

transform

scale

skewX skewY

rotate

Create Graphics

Crescent Moon

Heart

Animation

fill-mode

iteration-count

timing-function

🍏Applied Accessibility

img alt

Elements

h1 ~ h6

main

article

header

nav

footer

audio

figure figcaption

label for

fieldset legend

input date

time datetime

ScreenReader-only

High Contrast Text

accesskey

tabindex

🍉Responsive Web Design Principles

@media

Responsive Image

Retina Image

vw vh vmin vmax

🍈CSS Flexbox