Code Challenge #2: The Test of Characters

I’ve been a big fan Kushagra Gour since the early days of Webmaker – his CodePen-like code playground running as a Chrome Extension. I use it most days. More recently he teamed up Kushagra Agarwal to work on a new project ‘CSSBattle.dev‘ – a cool and original blend of CSS coding and golf. Be warned – if you know even a little CSS this can be very addictive.

Code Challenge #2: The Test of Characters

So, for our second Code Challenge, we’re partnering with CSSBattle to push your CSS skills. Your challenge is to write HTML and CSS in the ‘Editor’ panel that perfectly reproduces the SitePoint Logo graphic in the righthand ‘Target’ panel. Your result renders live in the central ‘Output’ panel. There’s a handy sliding panel on the Output that lets you compare your live rendering with the target image. Finally, when you think you have a good match with the target, hit the ‘Submit’ button to get your score. Open this CSSBattle in a new window Open this CSSBattle in a new window

Tips for CSSBattlers:

Images and SVG are not allowed.
Pixel perfect matches score much more than merely close matches
Once you have a 100% match, it’s all about reducing your character count. What can you cut?
CSSBattles aren’t about pretty code. You’d probably be amazed at what you can cut out of CSS before it breaks.

So, is this code you’d use in normal production? No, probably not, but that’s not the point. I’ve been using CSS for 20 years, yet I’ve learned a bunch of new things via CSSBattles from just trying crazy stuff I’d never usually have any reason to try.

Prizes

There are cash prizes awarded to the top 3 ranked competitors for this round ($50, $30, and $20) which concludes in about 3 weeks – but I have to say, the competition at the top is pretty tough. There has to be some Harry Potter incantations shrinking some of these top solutions! However, we’ve also put up 20 Premium Memberships for the top 20 finishers. Also, keep in mind, if you’re not quite up to battling for a top 3 spot, you can create your own mini-league of friends and colleagues to compete with bragging rights. Check it out and see how you go.

Frequently Asked Questions (FAQs) about Code Challenge 2: The Test of Characters

What is the purpose of the Code Challenge 2: The Test of Characters?

The Code Challenge 2: The Test of Characters is designed to test your understanding and application of HTML and CSS coding. It’s a practical exercise that allows you to apply the theoretical knowledge you’ve gained about these coding languages. The challenge involves creating a webpage layout using HTML and CSS, which helps in enhancing your coding skills and understanding of these languages.

What skills are required to complete the Code Challenge 2?

To successfully complete the Code Challenge 2, you need to have a basic understanding of HTML and CSS. HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and it’s used to display elements such as headings, paragraphs, links, and more on a webpage. CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in HTML. It’s used to control the layout of multiple web pages all at once.

How can I prepare for the Code Challenge 2?

To prepare for the Code Challenge 2, you should first ensure that you have a solid understanding of HTML and CSS. You can do this by reviewing online tutorials, reading relevant books, or taking online courses. Practice is also key in preparing for this challenge. Try to create simple web pages using HTML and CSS to get a feel for how these languages work. The more you practice, the more comfortable you will become with these languages, which will help you in the challenge.

What should I do if I encounter difficulties during the Code Challenge 2?

If you encounter difficulties during the Code Challenge 2, don’t panic. Try to break down the problem into smaller, manageable parts and tackle each one at a time. If you’re still having trouble, don’t hesitate to seek help. There are numerous online forums and communities where you can ask questions and get help from experienced coders. Remember, the goal of the challenge is to learn and improve your skills, so don’t be afraid to ask for help.

How will my work in the Code Challenge 2 be evaluated?

Your work in the Code Challenge 2 will be evaluated based on your understanding and application of HTML and CSS. The evaluators will look at how well you’ve structured your webpage, the cleanliness of your code, and how well you’ve applied CSS to style your webpage. They will also consider the functionality of your webpage – whether all elements are working as they should.

Can I use external resources during the Code Challenge 2?

Yes, you can use external resources during the Code Challenge 2. However, it’s important to remember that the goal of the challenge is to test your understanding and application of HTML and CSS. While external resources can be helpful, they should not be relied upon entirely. The challenge is a great opportunity to apply what you’ve learned and improve your skills.

What are some common mistakes to avoid in the Code Challenge 2?

Some common mistakes to avoid in the Code Challenge 2 include not properly structuring your HTML, not using CSS effectively to style your webpage, and not testing your webpage to ensure all elements are working correctly. It’s also important to avoid rushing through the challenge. Take your time to understand the requirements and plan your approach before you start coding.

Can I collaborate with others during the Code Challenge 2?

While collaboration can be a great way to learn and improve your skills, the Code Challenge 2 is designed to be an individual exercise. It’s important to complete the challenge on your own to truly test your understanding and application of HTML and CSS. However, if you’re stuck or need help, don’t hesitate to ask questions or seek advice from others.

How can I improve my skills after the Code Challenge 2?

After completing the Code Challenge 2, you can continue to improve your skills by practicing regularly. Try to create more complex web pages using HTML and CSS. You can also learn more about other coding languages and technologies. There are numerous online resources, tutorials, and courses available that can help you improve your coding skills.

What are the benefits of participating in the Code Challenge 2?

Participating in the Code Challenge 2 has several benefits. It’s a great way to apply what you’ve learned about HTML and CSS in a practical way. It also helps to improve your problem-solving skills, as you’ll need to figure out how to create a webpage layout based on the challenge requirements. Additionally, it’s a great way to showcase your coding skills to potential employers.