Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]-Free online video tutorial-php.cn

Community

Learn

Tools Library

AI Tools

Leisure

English

Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

Shangyouyou is a mall project that comprehensively applies HTML, CSS, and JavaScript technologies. It is suitable for beginners who are new to front-end to lay a solid foundation and accumulate project experience. The project has strong practicality. It not only sorts out and integrates basic front-end knowledge, but also provides a training ground for practical applications of more mainstream technologies in the future.

Elementary

css

html

js

28054 person learning

39class hour

08 hours 11 minutes 35 secondsTotal course duration

2023-01-17update

王林

Gold lecturer

A total of 180 courses Student180311 Lecturer rating5.1

有朋自远方来，虽远必诛！More>>

Course Introduction Course Outline Other Courses

You will learn：

Shangyouyou is a mall project that comprehensively applies HTML, CSS, and JavaScript technologies. It is suitable for beginners who are new to front-end to lay a solid foundation and accumulate project experience. The project has strong practicality. It not only sorts out and integrates basic front-end knowledge, but also provides a training ground for practical applications of more mainstream technologies in the future.

Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

Chapter1 Page Layout
expand retract

Section1 Project Description
duration： 05 minutes 15 seconds

Section2 Login registration layout construction
duration： 16 minutes 17 seconds

Section3 List layout construction
duration： 07 minutes 14 seconds

Section4 logo and search box
duration： 07 minutes 14 seconds

Section5 Product category navigation layout
duration： 07 minutes 19 seconds

Section6 Path navigation layout
duration： 07 minutes 33 seconds

Section7 Dynamic rendering of path navigation data
duration： 14 minutes 49 seconds
Chapter2 magnifying glass effect
expand retract

Section1 Magnifying glass layout construction on the left
duration： 13 minutes 27 seconds

Section2 Magnifying glass mouse move in and out effect
duration： 13 minutes 41 seconds

Section3 Move the magnifying glass mouse to realize the dragging effect of mask elements
duration： 16 minutes 11 seconds

Section4 Boundary control for mask element movement
duration： 06 minutes 53 seconds

Section5 Moving the magnifying glass achieves the effect of moving large picture elements in equal proportions
duration： 13 minutes 33 seconds

Section6 Magnifying glass thumbnail layout construction effect
duration： 12 minutes 50 seconds

Section7 Dynamic rendering of magnifying glass thumbnail data
duration： 09 minutes 06 seconds

Section8 Click on the thumbnail to change the image to a smaller or larger image.
duration： 19 minutes 15 seconds

Section9 Analysis on the principle of image carousel effect by clicking the left and right arrows on thumbnails
duration： 08 minutes 09 seconds

Section10 Calculate the distance of each picture movement and the distance of ul movement
duration： 17 minutes 28 seconds
Chapter3 Products on the right
expand retract

Section1 The layout of the detailed introduction of the upper part of the product on the right
duration： 24 minutes 04 seconds

Section2 Detailed explanation of the upper part of the product on the right introduces dynamic rendering of data
duration： 15 minutes 00 seconds

Section3 Product parameter layout construction for the lower half of the product on the right
duration： 10 minutes 12 seconds

Section4 Dynamic rendering of product parameter data in the lower half of the product on the right
duration： 17 minutes 04 seconds
Chapter4 Product parameters
expand retract

Section1 Click on the text color of the first row of product parameters for exclusive effects
duration： 16 minutes 22 seconds

Section2 Use closure functions to solve variable problems in events in loops
duration： 18 minutes 28 seconds

Section3 Implement layout construction of selection results
duration： 04 minutes 25 seconds

Section4 Click on the product parameters to dynamically add corresponding results.
duration： 18 minutes 38 seconds

Section5 Click the delete button to delete the corresponding parameter data
duration： 19 minutes 36 seconds

Section6 Package price change function
duration： 17 minutes 32 seconds
Chapter5 center left tab
expand retract

Section1 Shopping cart and purchase price layout construction
duration： 08 minutes 57 seconds

Section2 The overall structural layout of the middle left tab
duration： 13 minutes 12 seconds

Section3 Construction of the specific content layout of the middle left tab
duration： 10 minutes 05 seconds
Chapter6 center right tab
expand retract

Section1 Choose the overall structural layout to match on the right side of the middle
duration： 16 minutes 54 seconds

Section2 Select the package price linkage effect when the check box is selected in the collocation
duration： 15 minutes 57 seconds

Section3 Building the middle right tab layout
duration： 13 minutes 27 seconds
Chapter7 Right navigation bar
expand retract

Section1 Encapsulate a public tab function and call
duration： 18 minutes 38 seconds

Section2 Construction of the work part of the right navigation bar
duration： 09 minutes 56 seconds

Section3 Construction of the middle layout of the right navigation bar
duration： 15 minutes 39 seconds

Section4 Implementation of switching status by clicking on the right navigation bar
duration： 11 minutes 15 seconds

王林 Lecturer Other Courses

ElementaryComplete collection of interview questions in front-end disciplines (Season 1)

25797
Collection
ElementaryFlexible box + responsive page layout practice

9854
Collection
ElementaryMake a responsive website from scratch—Grid layout

19541
Collection
ElementaryThe most easy-to-understand HTML+CSS course in 9 days

49141
Collection
ElementaryBasic tutorial for getting started with Web front-end

267554
Collection
ElementaryWeb front-end development-Zero Basic Programming Admission Guide

74721
Collection
ElementaryFront-end basic HTML5+CSS3 from entry to proficiency (full version)

318851
Collection
ElementaryThe latest CSS3 tutorial is quick and easy to understand

24716
Collection
ElementaryCSS3 Flex flexible box model makes layout fly

31055
Collection
ElementaryLearn DIV+CSS layout in one day (five practical exercises)

11916
Collection
ElementaryHTML5+CSS practice project [Hand Knock Onmyoji official website]

12354
Collection
ElementaryMobile layout: HTML5+CSS3 advanced and enhanced version

138189
Collection

Start Learning

This course includes：

08 hours 11 minutes 35 seconds Watch videos anytime

0 Download Resources

Popular courses Latest courses

More>