Some time ago, I took on a project with Chen Xiang. Because it was the first time to do a project, I couldn't help but be unfamiliar with some of the project . The cycle was one month, and then it was changed to half a month due to the needs of customers, and suddenly it became more nervous ... Finally, despite the daily "harassment" of customers, the front-end page was written in less than half a month (mainly because of simplicity :D ).
This project is a small second-hand trading website. The main front-end knowledge is: Bootstrap, CSS3, HTML, JS .
After analyzing the needs of customers, it is mainly divided into several simple functions: publishing products, browsing products, dividing product areas, user login, and posting messages. As a second-hand trading website, customers did not ask for online purchases, and they did not pay attention to the purchase function when writing the front-end.
Preliminary preparation:
1. Color matching : The customer did not put forward clear color matching requirements, so he chose a blue color as the main color of the entire website. Hex Color: #337AB7;
2. Logo : The customer did not ask for a logo , and he also found a logo on www.iconfont.cn
3. Documents :
Bootstrap Framework : The main framework for web pages
Filter plug-in : a classification plug-in for the product browsing section
4. Idea: I saw the homepage of the Wuhan University ACM Association before, and I like this design style, and this modular design style is also used in this website.
Website production:
1. Homepage : The fence system using the Bootstrap framework is used. After this application, the fence system can be used more proficiently. Each module adds CSS3 transition and pseudo-class: hover to increase the dynamic effect, which is more useful for user experience.
2. Product browsing page : Using the Filter classification plug-in, by adding corresponding attributes to the product block, it can have a specific label, and when the corresponding label is clicked, it can be automatically filtered and displayed.
3. Product details page : It is divided into two parts: pictures and text. The text block has title, introduction, price, seller information. The picture is a preview of the product browsing page. There is a quick comment box below, you can leave a comment on this product.
4. Registration page & login page & release page : Bootstrap 's form control is used to make the design more convenient and easy to use. Add form validation to the corresponding input tag to make the data received in the background more complete.
Comprehension:
When writing the entire web page, due to the rush of time, I changed it from one month to half a month at the beginning. In addition, the customer is always urging, and he keeps asking us to show him the effect every day, which really makes me speechless, and He doesn't know what kind of effect the client wants, and it's really annoying to do so. Maybe this is the reason why programmers hate customers so much ... The requirements are not clear, but fortunately Chen Xiang's requirements analysis is very clearly written, so I know what to do. It also made me reflect on my own shortcomings. When working on projects, I must communicate with customers more. Communication can reduce a lot of useless workload. Only after good communication can we fully express what customers want. Communication is sometimes more useful than writing code. This is the end of the first project. I hope more people can browse the website of the second song I made.
2018.5.6