![]() Read more about our recommended and trusted hosts. You can host your site using one of these solutions or any of our other trusted providers. Only move on to the next section once you're happy you've completed the area you're working on.Īs mentioned above, there are many ways to host your project for free. ![]() Start adding styles to the top of the page and work down.Write out the base styles for your project, including general content styles, such as font-family and font-size.Writing your HTML first can help focus your attention on creating well-structured content. Before adding any styles, structure your content with HTML.This step is crucial to help you think ahead for CSS classes to create reusable styles. Look through the designs to start planning out how you'll tackle the project.There are a number of ways to do this, and we provide some recommendations below. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. Configure your repository to publish your code to a web address.If you're not sure how to do this, have a read-through of this Try Git resource. Creating a repo will make it easier to share your code with the community if you need help. Initialize your project as a public repository on GitHub.Below is a suggested process, but do not feel like you need to follow these steps: ![]() Building your projectįeel free to use any workflow that you feel comfortable with. 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. 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. See hover and focus states for interactive elements.View the optimal layout depending on their device's screen size.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 product preview card component and get it looking as close to the design as possible. To do this challenge, you need a basic understanding of HTML and CSS. Thanks for checking out this front-end coding challenge.įrontend Mentor challenges help you improve your coding skills by building realistic projects. Frontend Mentor - Product preview card component
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |