I feel like I have spent hours of my life WASTED away on the Responsive Web Design course, just to come to a halt in the road, thanks to a bug. I know I am not wrong, because I have over 10 years of CSS experience, I am simply taking this course for the purpose of the verifiable certificate for a job… I don’t understand how anyone has graduated from this program as it is impossible. It asks me to add a second CSS class to an image element (inline). I add this class in different ways (as the first one out of the two different classes called, as the 2nd one, and even before AND after the alt tag… ). What’s funny is, every single time I switch one class with the other (in the list of two classes with a space in between), and click on “test”, it says that I need to define the OTHER class that comes second as if it isn’t in there, and the visual output only shows the FIRST of the two classes defined, no matter which one I put as the first in the list of two. This is getting extremelely annoying because this bug is not the only one I have come across where I had to put things in a particular order that should not matter, and spend more than 10 minutes trying to figure out how the course wants the exact output… there are so many bugs on these courses that I am constantly worried that I may have wasted hours on a course for nothing. Please fix these issues! Thank you!
If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
Thank you.
Are you the owner? If not please allow this to be unresolved so he can see it and hopefully fix these issues. I did click on Ask a question before going to the forum. I did many different things before resulting to this. Thank you.
I don’t see any other posts created by your account. It doesn’t look like you used the Ask for Help button and created a forum post. It is impossible for us to see what is happening without your code.
also just an fyi, i dont have a question… i am reporting a bug and asking for it to be fixec so i can get my certificate. Thank you
We can’t verify or help you solve your bug unless you actually show your code.
all you have to do is simply go to the Responsive web design course about creating a thick green border… you will see there is a bug there. THanks agian
Please show us your code. I can pass the challenge just fine myself, so we need more details to determine your issue.
Challenge link for those attempting to help troubleshoot: https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-borders-around-your-elements
I find that hard to believe… I literally created 2 different accounts and used 2 different computers, a tablet, and two phones (iphone and android) and used 3 different web browsers
This challenge does not check for the order of classes.
If you share your code with us we can try to figure out why it isn’t passing and help write a formal bug report if they are failing incorrectly.
Tell us what’s happening:
Describe your issue in detail here.
**Your code so far**
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
}
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image" "thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back." ></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36
Challenge: Add Borders Around Your Elements
Link to the challenge:
This is not valid syntax for adding multiple classes.
This syntax is incorrect.
If you look at the lesson:
Remember that you can apply multiple classes to an element using its
classattribute, by separating each class name with a space. For example:
<img class="class1 class2">
You have separated the class names into two different values instead of separating them with a space.
You can also get a hint that the syntax is wrong by the lack of green box around the cat image. If you look at my screenshot above, a literal green border surrounds the cat image when your syntax is correct.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.