-
🌱 I’m currently learning C# and .NET to prepare for job opportunities in the upcoming new year.
-
🔭 I’m also actively looking for opportunities to apply my existing knowledge and experience.
- HTML
- CSS
- JavaScript
- React
- Flutter
react+ts for little components practise
🌱 I’m currently learning C# and .NET to prepare for job opportunities in the upcoming new year.
🔭 I’m also actively looking for opportunities to apply my existing knowledge and experience.
Project brief
In this challenge, you will combine some of the components you have built in previous challenges into a storefront page for a fictional e-commerce platform.
As this challenge is a combination of other sections or components, you should build them first to ensure all states and requirements are covered.
Implementation requirements
The requirements that each component has to fulfill remains the same - you should refer to them in their individual briefs and ensure that their functionality remains intact after integration:
Navbar (E-Commerce)
Product Details Section
Product Specifications Section
Product Grid Section
Footer (Multi-column)
On the page level
Page layout rules: Apply standard page margin and padding rules as per the design specifications. Take note of the spacing between sections as well.
Static copy and asset alignment: While the component used remains the same as the list above, some of the assets, icons or copy might have changed. Ensure they are aligned, especially for the sections with static content and assets.
Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
Cross-browser and device compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari, and for all stated device breakpoints.
Dynamic content integration
While some of these sections may have been implemented previously, ensure the dynamic content update is working correctly after the integration:
Navbar: Display the current number of items in the cart and update in real-time as users add or remove items from their cart.
Product Details: Based on the current product, display the correct details corresponding to name, images, prices, reviews, variants and features (in the accordion)
Shopping Cart: When the user adds any item to cart, the number shown on the shopping cart icon should increase accordingly
Product Specifications Section: Should display the Product Specifications for this product. For this challenge, all the products should show the same Product Specifications section as per the design.
"In this collection" Section: Show latest created items from the current product's collection, minus the current product on the product details page.
https://www.figma.com/design/6YUC4dz3pY6HbvOBXaKKPf/product-details-section-figma?m=dev&node-id=0-1
Project brief
In this challenge, you will develop a card featuring a user testimonial, including a profile image, name, username, and the testimonial body.
Implementation requirements
Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox and Safari.
[Stretch goal] Handle long strings: In reality, the person's name and testimonial can be extremely long. The UI should be able to accommodate extremely long strings by either wrapping to the next line, truncating, or both.
[Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
[Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper alt tags for images.
for react components display
Project brief
In this challenge, you will develop a blog card featuring editorial content, including an article cover image, a content category tag, a title, a brief description, and a call-to-action (CTA) link.
Implementation requirements
Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
Link interactivity: Implement and style links to reflect different states - normal, hover and focus.
Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox and Safari.
[Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
[Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary, using proper alt tags for images and ensuring that buttons can be navigated to and selected using keyboard controls.
figma link: https://www.figma.com/design/1LEv14PQb9bndJDto2Vpa2/blog-card-figma?m=dev&node-id=2001-89
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.