This course is designed to guide you step by step in completing the Shop.co e-commerce website. Using intermediate-level HTML, CSS, and JavaScript, you’ll build a user-friendly and visually engaging interface that delivers a smooth shopping experience.
Javascript Frontend DevelopmentFrontend Development
1 temas
Shop.co DevelopmentNew Description
20 lecciones
Create a Basic HTML Structure for the HomePageSet up the fundamental HTML elements (header, main, footer) for the landing page. Ensure a clear and logical structure that will serve as the foundation for the page.
Design the Header SectionCreate a visually appealing header with a logo, navigation links and login call to action buttons. This should provide the user with an understanding of how to navigate the website.
Implement the FooterImplement the footer section that provides essential information and easy navigation for users at the bottom of each page.
Implement the Hero SectionCreate a visually appealing hero section with a headline, subheadline, image and a call to action button. The hero section should capture the user's attention and clearly convey the page's main message.
Implement Promo BannerImplement the banner inside the Header as seen in the attached image and figma design. This is a marketing tool designed to get conversions. Users should be able to close the section by clicking the corresponding icon.
Implement the Brands and Partners SectionDevelop a "Trusted Brands" section to enhance user trust and boost brand confidence. This section will showcase our association with reputable brands, reinforcing our credibility and encouraging users to engage with our platform.
Create the New Arrivals SectionImplement the showcase of product cards. This is so that customers can easily discover the latest products and trends, enhancing their shopping experience. Each product card should have an onclick navigation function with their id's to the product detail page with th Design it so that both the product cards and the product container modules can be reused.
Create the Top Selling SectionNotice that this section is pretty similar in design with other product preview sections. While implementing this section, you can reuse the product card and product preview modules you've created while designing the New Arrivals section.
Browse By Dress Style SectionThis section will feature a "Browse By Dress Style" category, allowing customers to easily navigate and explore different dress styles available in our collection. The cards should include navigation attributes onclick.
Create the Testimonial SectionThis is a slider section that features customer testimonials, highlighting positive experiences and feedback regarding our products and services. While implementing look for possible built-in functions in javascript that calculates the width of elements to slide.
Implement the Newsletter SectionSection implements a Newsletter sign-up feature, encouraging customers to subscribe for updates, promotions, and exclusive content. The input field's type is an email and you can also create an active class that triggers when the button is clicked for improving user reactivity.
Implement the Hero Section of the Product Detail PageNavigation to product detail pages are done with the id of the specific product so that we can retrieve the id from the url and render the requested product. Include a functioning image switcher as shown in the design. This section will display specific details about the product, such as size, price, color, and quantity. Users will be able to add the product to their cart directly from this section.
Create the Reviews Section in the Product Details PageThis section will implement a customer reviews feature on the product details page, allowing users to read and submit feedback on products. By adding this reviews section, we aim to build trust with potential customers and foster a sense of community around our products.
Implement the You Might Also Like SectionSection must include product cards that are similar to the currently selected one. This is so that customers can easily discover the latest products and trends, enhancing their shopping experience.
Implement the Details SectionHere you will present the user with a more detailed outlook on the features of the product. Anything unavailable in the API response can be either dynamically generated or...
Implement the FAQ sectionImplement the FAQ section as per the design. (update this ticket to make it more descriptive).
Implement the Cards Grid in the Categories PageList the Cards in a grid. The category will be taken from the URL and it should be displayed. Make sure links from the other pges link to this page.
Implement Sorting and Pagniation on the Category pageImplement Sorting and Pagniation on the Category page (update desc)
Implement the Filters Section on the Category PageImplement the Filters Section on the Category Page (dec to be updated)
