The challenge I chose was the pricing component with toggle. It has three options: Basic, Professional and Master. You have to use a toggle switch to show the prices for Annually or Monthly.
How I Built It
What I Learned
The style guide defined colors in HSL and included a linear gradient. The linear-gradient is a CSS function that allows you to create a transition between two or more colors along a straight line. You can choose the direction or angle of the transition. For two of the buttons and toggle, the gradient moves from left to right. The professional plan card moves from top to bottom.
I used two structural pseudo-classes in CSS to create the design. The :first-of-type and :last-of-type selectors allow you to target the first and last occurrence of an element in a container.
Bootstrap has a toggle switch available. It was not customizable with CSS. You have to compile custom Bootstrap in order to change how it looks. I found CSS toggle solution that works like the design. I modified it to work with my CSS.
Frontend Mentor asks developers to post their solutions to their site. If you get stuck on a project, you can look at their solution to see how they approached it.
A notification bar is a horizontal bar that appears at the top or bottom of your website. You can display emergency messages or announcements to your visitors. Messages about closings, updates, news or sales offers.
How can you add a notification bar to your website?
It depends on how you want to do it. If you like to write code, you can make it yourself with HTML and CSS. If not, you can add a plugin or a third-party tool to your website.
1. Make your own
Are you using Bootstrap? Bootstrap has alerts. You can create your own bar with Bootstrap alerts. If you are using a different CSS framework, you can write your own.
You can choose to use a third-party tool like Getsitecontrol. They offer different ways of creating announcement bars for your website. You can add a sticky announcement bar or a slide-in banner that appears from the side.
Have you thought about the readability of your website? The colors you choose can impact how readable people find your website to be. If people can’t read your website, they may become frustrated and go somewhere else. How do you choose the best colors? By testing your color combinations for contrast.
What is color contrast?
Contrasting colors or complementary colors are from different segments of the color wheel. For example, red is a warm color and blue is a cool color. They appear on different segments of the color wheel which makes them contrasting colors.
By using contrasting colors in web design, you provide enough contrast between content and background so that your website is readable to as many people as possible. You want to make sure your buttons, body text, logos and other content has the right amount of contrast.
Not creative? It takes creativity to solve programming problems. Design is about solving problems, not making things pretty. You can learn UX Design. Design is a learned skill. You can get better at it.
How do you keep improving your skills? The same way you improve your programming skills. You learn about design principles, practices and tools. Then, you build something.
Understand design principles
Design principles help you to make websites and apps that are aesthetically pleasing, easy to use and behave the way the user expects them to.
Developers like their tools. You can find design tools that help you do tasks like wireframing, prototyping, animations and more. Which tools do you use? That depends on your needs and preferences. Here is a short list to help you find the tools that may work for you:
Choosing fonts for your project can be a challenge. How do you pick fonts that work? The fonts that you choose can either help or distract your users. You want to pick fonts that are easy to read and fit the personality or mood you want to convey.
Where do you start?
Pick fonts that match the purpose of your design
Whether you are creating a blog, tutorial, app or business website, you need to pick fonts that match the mood or personality of the project. Fonts can have distinct personalities or moods — casual, serious, playful or elegant.
Decide on a visual hierarchy
Fonts help you to design a typographic hierarchy. You decide how the fonts work together. The three levels we need to consider are primary, secondary and tertiary. The primary level is your headlines. Secondary is used for subheads, captions and pull quotes. The tertiary level is your main body text. These levels help users to scan quickly and focus on the information that they need.
Choose fonts that work with your project
No matter what type of project you are making different fonts work better than others. Fancy and decorative fonts may be a better choice on a blog than your business website.
Pick fonts that complement each other. Mix style, weight, size, spacing and color to achieve the desired effect. For example, pari a bold, chunky font with a tall, thin one.
Limit the number of fonts used
Try keeping the number of fonts to 2 or 3. If you design needs more, add one font at a time.
Use a font generator
A font generators can help you to pick out fonts or experiment with new ones.