Baidu front-end Technical College-Xiaowei College (HTML + CSS course tasks), Xiaowei css

Baidu front-end Technical College-Xiaowei College (HTML + CSS course tasks), Xiaowei css
Task 1: Basic HTML coding course overview

Job submission deadline: 04-24

Important

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

Understand the definition, concept, and development history of HTML

Understanding the meaning and usage of common HTML tags

Reasonable planning of HTML document structure based on design documents

Understand semantics and use HTML tags properly to build pages

Task Description

Refer to the example diagram (click to view) to complete the code compilation for an HTML page (no CSS, no style, but document structure)

Task precautions

You only need to write HTML code, and do not need to write CSS.

The sample image is for reference only and does not need to be completely consistent. You can set the image and text here.

Try as many HTML tags as possible

Online learning references

Common Web terms

Getting started with MDN HTML

Mooc html + CSS basic tutorial video

Task 2: Zero-Basic HTML and CSS coding (I) course overview

Job submission deadline: 04-24

Important

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

Make a reasonable HTML architecture for the design style, including but not limited:

• Understanding the meaning and usage of common HTML tags
  Reasonable planning of HTML document structure based on design documents

Understand semantics and use HTML tags properly to build pages

Master basic CSS coding, including but not limited:

• Understand the definition, concept, and development history of CSS
  Understanding the meaning and usage of CSS selectors

Measure the test taker's knowledge about how to define CSS styles, such as colors, fonts, backgrounds, borders, box models, and simple la S.

Task Description

Based on the code of the first task "zero-Basic HTML encoding", refer to the sample image (click to view) and add the CSS style code based on the Code in step 1.

Task precautions

You only need to write HTML and CSS code, and do not need to write JavaScript.

The sample image is for reference only and does not need to be completely consistent. You can set the image and text here.

Try different and more style settings as much as possible to practice various CSS attributes

Clear and standardized HTML and CSS code structure

Online learning references

Getting started with MDN HTML

Getting started with MDN CSS

Mooc html + CSS basic tutorial video

Task 3: three-column layout course overview

Job submission deadline: 04-24

Important

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Objectives

Understand the concept of HTML/CSS layout

Understanding the concept of the Box Model

Measure the test taker's knowledge about the concept of position and float and its usage in layout.

Task Description

Use HTML and CSS to implement a three-column layout based on the example image (click to view details.

The width of the left and right columns is fixed. The middle column is filled with full width based on the parent element. The outer box should be understood as a browser. The height of the background color # eee region depends on the highest height of the three child elements.

Task precautions

Try the effect of position and float to consider their similarities and differences and application scenarios.

Note the effects of different tests, especially in extreme cases.

Please replace the image and text content to reflect the characteristics of the team as much as possible.

Adjust the browser width. The effect of fixed width and adaptive width is always as expected.

Change the content length of the middle column to ensure that when the middle column is higher and the right column is higher, the height of the parent element is always the highest height of the child element.

All other identifiers are correctly implemented.

References

MDN: position: basic knowledge about the CSS position attribute

MDN: float: Basic knowledge about CSS float attributes

Learn CSS Positioning in Ten Steps: use specific examples to familiarize yourself with the position attribute

Clearfix hack: What is floating and how to clear floating

StackOverflow: Which method of 'clearfix' is best? : Clear the complete explanation of floating black Technology

Task 4: important instructions on locating and centering Problems

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Objectives

Practice of HTML/CSS layout

Deep understanding of position and other CSS attributes

Task Description

Implement the effect shown in the example image (click to open)

The gray element is vertically centered horizontally and has two 1/4 circles in the upper left corner and lower right corner.

Task precautions

Consider the vertical and vertical center solution in different situations (for example, the gray height varies dynamically based on the content.

Try a combination of various situations. The parent and child elements take different positions. Think about the true meaning of the values of the position attribute, especially the relative meaning of absolute.

Note the effects of different tests, especially in extreme cases.

Adjust the browser width. The gray element is always horizontally centered.

Adjust the browser height. The gray elements are always vertically centered.

Adjust the browser height and width, and the positioning of the yellow slice is always accurate.

All the other identifiers are correctly implemented, and one point is deducted for the wrong one.

References

The second part of the HTML and CSS advanced guide-detailed positioning: the desert teacher teaches you how to locate the problem thoroughly.

Centering in CSS: A Complete Guide: we have fully discussed the center solution in different situations. I suggest you think about it and then look at the answer.

Get HTML & CSS Tips In Your Inbox: Someone wrote a cheating tool to generate the center code, but you can see why.

Task 5: Zero-Basic HTML and CSS coding (2) Important description

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

Make a reasonable HTML architecture for the design style, including but not limited:

• Understanding the meaning and usage of common HTML tags
  Reasonable planning of HTML document structure based on design documents
  Understand semantics and use HTML tags properly to build pages
  Master basic CSS coding, including but not limited:

• Understand the definition, concept, and development history of CSS
  Understanding the meaning and usage of CSS selectors

Measure the test taker's knowledge about how to define CSS styles, such as colors, fonts, backgrounds, borders, box models, and simple la S.

Task Description

Based on the code of the first task "zero-Basic HTML encoding", refer to the sample image (click to view) and add the CSS style code based on the Code in step 1.

The black area at the head and bottom is always 100% wide

The right side of the page is fixed in width, and the left side is synchronized with the browser window.

The content width in each module on the left follows the overall width on the left and changes automatically.

10 images need to be completely displayed forever, so they will be scaled down from two rows to three or more rows, and may become one row as the width increases.

Task precautions

You only need to write HTML and CSS code, and do not need to write JavaScript.

The sample image is for reference only and does not need to be completely consistent. You can set the image and text here.

Try different and more style settings as much as possible to practice various CSS attributes

Clear and standardized HTML and CSS code structure

Online learning references

Getting started with MDN HTML

Getting started with MDN CSS

Mooc html + CSS basic tutorial video

Task 6: simulate important newspaper typographical descriptions using HTML and CSS

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

Deep understanding of settings of font, background, color, and other attributes in CSS

Further exercise CSS layout

Task Description

For more information about how to develop the page, see the design draft of the TPSs (click to download). The result is basically the same as that of the sample (click to view ).

For the font size and internal and external margins on the page, see the annotation graph (click to view details)

Fixed page width (fixed width)

Task precautions

You only need to write HTML and CSS code, and do not need to write JavaScript.

You can set pictures and texts in the design draft.

In Chrome, the entries in the annotation are perfectly implemented.

Competent personnel can try cross-browser compatibility

Students with the ability can try to use less, sass, and stylus after implementation.

Online learning references

Getting started with MDN HTML
Getting started with MDN CSS

Task 7: implement the page architecture and style layout of common technical products on the official website

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

Through the implementation of a common technical product official website, deepen the practical capabilities of HTML and CSS

Learn how to accurately change the design draft to the page without tagging

Task Description

Use HTML and CSS to implement the PSD file of the design draft (click to download). The effect is shown in figure (click to open)

The design draft has a certain width, which is the minimum width of the page. That is to say, when the browser window width is smaller than the design draft width, horizontal scroll bars are allowed, and the page content width remains unchanged, however, when the width of the browser window is greater than the width of the design draft, the width of some content on the page should be consistent with that of the browser window. The specific questions are not specified to see how you can judge.

Task precautions

You only need to write HTML and CSS code, and do not need to write JavaScript.

You can set pictures and texts in the design draft.

In Chrome, the font, layout, internal and external margins and other styles of the design draft are perfectly implemented.

Competent personnel can try cross-browser compatibility

Students with the ability can try to use less, sass, and stylus after implementation.

Online learning references

Getting started with MDN HTML

Mdn css getting started tutorial task 8: Important description of responsive grid (raster) Layout

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

HTML and CSS are used to implement a responsive 12-bar grid layout similar to BootStrap. The number of elements varies depending on the screen width.

Task Description

As shown in, you need to adjust the browser width to view the responsive effect. The red text in it is a description and does not need to be written in HTML.

Task precautions

The purpose of grid layout is to more effectively control the proportion of elements in webpages. For example, there is a message board module in a blog. On a relatively large screen, we hope it occupies 25% of the width on the right, and on a relatively small screen such as a mobile phone, we want it to be 100% in width and appear below the blog post. Grid layout is a way to achieve this requirement. It has the advantage of dividing all the widths into fixed columns (commonly used 12 columns) to control the element width more efficiently. This function can be implemented using HTML and CSS.

Take BootStrap's grid system as an example, DOM element class name is like col-md-4; col is the abbreviation of "column" column; md is the abbreviation of medium, suitable for scenarios where the screen width is greater than 768px; 4 is the meaning of the four columns. Therefore, the col-md-4 means that when the screen width is greater than 768px, this element occupies four columns.

Online learning references

Official BootStrap Website: If you have never used it, at least know what it is.

Bootstrap grid examples: Change the browser width, view the performance of different class name elements, and understand the role of the grid system. Then, you can view the corresponding CSS through the "review elements" and think about how the system is implemented.

BootStrap grid system with offset

Creating Your Own CSS Grid System: You can first think about how to implement it. If you have no idea, you can look at others' practices.

Task 9: Use HTML/CSS to implement a complex page

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

By implementing a complex page, we can deepen our practical capabilities for HTML and CSS.

Reuse and optimization of practical code

Task Description

Use HTML and CSS to implement the PSD file of the design draft (click to download). The effect is shown in figure (click to open)
The width of the entire page is fixed, but the blue navigation on the header is consistent with the browser width.

Task precautions

You only need to write HTML and CSS code, and do not need to write JavaScript.

You only need to implement the style of the tab. If you have the ability to implement the style, you can implement the Tab switch without using JavaScript.

All the drop-down menus (Select) must be implemented according to the design draft style. The drop-down style is customized, and the drop-down selection function is not required, but the style must be implemented.

In Chrome, the perfect implementation and design of all kinds of pictures, fonts, colors, la s, internal and external margins, and other styles in addition to text

Competent personnel can try cross-browser compatibility

Students with the ability can try to use less, sass, and stylus after implementation.

Online learning references

Getting started with MDN HTML

Getting started with MDN CSS

Task 10: Important Notes for Flexbox layout exercises

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

Learn how to use flex for layout and how to adjust the layout policy based on the screen width.

Task Description

As shown in (click to open), adjust the browser width to view the response effect. The red text is a description and does not need to be written in HTML.

Task precautions

You only need to write HTML and CSS code, and do not need to write JavaScript.
When the screen width is less than 640px, adjust the Flexbox attribute to achieve the effect of moving the fourth element to the front, rather than changing the border color and height of the first element.
Think about the similarities and differences between Flexbox layout and grid layout, and what scenarios are applicable respectively. You can search for others' conclusions. However, you must maintain a speculative attitude and cannot directly accept others' opinions.
Clear and standardized HTML and CSS code structure

Online learning references

Flexbox details: understand the meaning of Flexbox attributes
Illustration CSS3 Flexbox attributes: After reading these two articles, you can understand Flexbox more deeply.
Flexbox-quick Layout
Use CSS elastic box
MDN flex attributes

Task 11: important instructions on mobile Web Page Layout

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

HTML and CSS practices for mobile development

Measure the test taker's knowledge about the architecture and layout of mobile Web development pages.

Measure the test taker's knowledge about how to debug the mobile Web Development page.

Task Description

Implement a mobile Web page consistent with the design drawing (click to view)

Task precautions

This task only involves HTML and CSS

The implemented pages and design drawings are basically the same in iOS Safari and Android browsers.

Clear and standardized HTML and CSS code structure

Try to use the flex layout in CSS 3 where appropriate

Students with the ability can try to use less, sass, and stylus after implementation.

Online learning references

• MDN: mobile Web Development
• MDN: Use the viewport meta tag to control the layout in a mobile browser
• What is the difference between mobile front-end development and Web Front-end development?
• Alloyteam mobile development specifications Overview
• 20 key points for mobile phone/Mobile front-end development
• W3cplus responsive technical resources
• Introduction to mobile Web Development
• Alloyteam Mars
• Mobile WEB Development
• Mobile development resource set
• The Mobile Web Handbook
• MobileWeb adaptation Summary
• Html5 head labels that Mobile front-end has to understand

Task 12: learning about the new features of CSS 3

The course tasks of Baidu frontend Institute of Technology are designed by Baidu frontend engineers for students with different levels of knowledge on the frontend. We try our best to ensure the quality of the course content and the rationality of the learning difficulty, but even so, what really determines the course effect is your every thought and practice.

Most of the course's questions are not the only solution, which is consistent with our actual work. Therefore, our requirement is not only to achieve the effects of the design draft, but also to think more about different solutions, evaluate the advantages and disadvantages of different solutions, and then use the most elegant way to achieve in this scenario. Solutions that are not finally adopted by us can also help us to learn a lot. Therefore, the reference materials we listed may not be necessary to meet the requirements. Sometimes, the requirement for achieving a question is very simple, and there are even references, but the thinking and hands-on practices behind it are the most critical part of the task. When learning these materials, you need to think more, ask more questions, and question more. I believe that through communication with friends, you can learn more with less effort.

Task Purpose

Learn about the new features of CSS 3 and select some of them for practical exercises.

Task Description

Implementation examples (click to view details)

Task precautions

This task only involves HTML and CSS
Clear and standardized HTML and CSS code structure
In addition to the three small tasks in the task, try as many new features as possible in CSS 3.

Online learning references

• Graphic CSS3
• W3School CSS3 tutorial
• Mdn css 3