We all manage projects. Whether we are working on a team or independently, we have our part that needs to get done. Chris Ford, Project Manager at Reaktiv Studios shared her practical project management tips at WordCamp US in November 2019.
1. Projects are about people
Projects are about working and collaborating with people to achieve a goal or build something. It’s not about the technology. People are trying to do the best they can with the tools they have.
2. Work with people you like.
People don’t like to work with jerks. You don’t always get to choose who you work with. When you do, choose to work with people you like. Projects work out better when you work with people you like.
3. There is no such thing as a perfect project.
Something always happens. The client adds new features. Team members quit. Delays and other problems occur. When that happens, be flexible. Stay calm and do the best you can.
4. Measure what matters to you.
You can’t measure what matters to you if you don’t track it. Do you know how much time you spend on a task? Are you using a project management tool to keep track of team’s progress? There are plenty of tools like Harvest to help you collect and analyze your progress.
5. You will be wrong. It will suck.
You’ll make mistakes. Everyone does. Chris likes to say “The wrong mistake is the one you make more than twice.” Accept this and be ok with it.
6. Bad news doesn’t age well.
When you’re wrong, don’t hide it. It is better to tell people bad news right away than delay it.
7. Celebrate the small victories.
When you have a success no matter how small, celebrate it with your team.
8. Create a culture of helping.
Be helpful. Share knowledge and encourage helping others.
9. Take care of yourself.
Remember to take care of your team and especially yourself. Schedule time for breaks and whatever else your or your team needs.
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.