There is also a style-guide.md file containing the information you'll need, such as color palette and fonts. You will find all the required assets in the /images folder.
BAR GRAPH BUILDER FREE PRO
If you would like the design files (we provide Sketch & Figma versions) to inspect the design in more detail, you can subscribe as a PRO member. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin. You will find both a mobile and a desktop version of the design. Your task is to build out the project to the designs inside the /design folder. Want some support on the challenge? Join our Slack community and ask questions in the #help channel. Bonus: See dynamically generated bars based on the data provided in the local JSON file.
See hover states for all interactive elements on the page.View the optimal layout for the content depending on their device's screen size.See the current day's bar highlighted in a different colour to the other bars.View the bar chart and hover over the individual bars to see the correct amounts for each day.So you can use that to dynamically add the bars if you choose. We provide the data for the chart in a local data.json file. So if you've got something you'd like to practice, feel free to give it a go. You can use any tools you like to help you complete the challenge. Your challenge is to build out this bar chart component and get it looking as close to the design as possible. To do this challenge, you need a decent understanding of HTML, CSS and JavaScript. Thanks for checking out this front-end coding challenge.įrontend Mentor challenges help you improve your coding skills by building realistic projects. Frontend Mentor - Expenses chart component
0 kommentar(er)
