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.
Why isn’t my code working? When you write code, that is a question you will be asking yourself frequently. To find the problem, you will need to debug your code. Here are a few strategies to help you find the bugs in your code.
When you code isn’t working, try creating a few print statements. A simple message like “Got here!” can tell you if your code is doing what you expect it to. Whether you send the message to your window, page or console.log, simple print statements can help you determine find problems.
Run your code after making a small change
Small changes are easier to find problems than in code that you spent all day writing. When you make a bunch of changes at once, it can be difficult to figure out which one is causing the error. You may be forced to undo everything that you did and put it back one item at a time until you find the error.
Read the error message
Most error messages tell you what the problem is and where to look.
Copy the error message and search online for an answer
Sometimes you get an error message that makes no sense to you. By copying it and entering it into your favorite search engine, you may find the solution. Someone may written about it on Stackoverflow.com or their own blog.
Comment out the code
When you didn’t know exactly where the problem is, comment out your code and rerun. If it works, uncomment a line of code and run it again. Keep repeating until you find the problem.
Read your code
When you can’t find the error, read your code. Forwards. Backwards and out load if you need to. It may be as simple as a typo. If your missing a semicolon or using the wrong character, your code may compile and still not work. Use your eyes to double check your code.
Talk to someone about the problem
Sometimes, explaining the problem to another person can help you figure out the problem. If you can’t find a person to talk to, you can use the a rubber duck or action figure instead.
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: