Task 11: Mobile Web Page layout practices

For the crowd:

Have a certain HTML and CSS base, want to try mobile development

Difficulty:

in

Important Notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

• HTML and CSS practices for mobile development
• Mastering the methods and differences of mobile web development in page architecture and layout
• Learn how to debug a mobile Web development page

Task description

• Implement a mobile-side web page that is consistent with the design (click to view)

Task considerations

• This task involves only HTML and CSS
• Implemented pages and designs are basically consistent across iOS safari,,android browsers
• HTML and CSS code structure clear, specification
• Try the flex layout in CSS 3 where it fits
• The ability of students can be realized after the implementation of less, sass or stylus and so on to achieve again

Task Collaboration recommendations

• Team focused discussion, clear the topic requirements, ensure that the team each to the subject of cognitive consensus
• Practice of accomplishing tasks individually
• Cross-review other people's code, suggesting that everyone see at least one team member's code
• Discuss each other and finally synthesize a copy of the best code within the group to submit

Online learning Resources

• MDN: Mobile Web Development
• MDN: Controlling layouts in mobile browsers using viewport META tags
• What is the difference between mobile front-end development and WEB front-end development?
• Alloyteam Mobile Development Specification Overview
• 20 key points to note for mobile/mobile front-end development
• W3cplus Responsive Technical Resources
• Talking about mobile Web development
• Alloyteam Mars
• Getting Started with mobile web development
• Mobile Development Resource Collection
• The Mobile WEB Handbook
• MobileWeb Adaptation Summary
• Mobile front end has to understand the HTML5 head header tag

Task 11: Mobile Web Page layout practices