0

I'm a total newbie at CSS and HTML and I have just started trying my first CSS challenge. Namely, this one.

The "Best Solution" is this:

:after{width:70;content:'Hello World

However, I'm pretty confused by this and other solutions listed on the page. I get that the goal is to make your code as short and clean as possible, but is this kind of format acceptable in actual web development? As in, should I do this sort of code in practice? I get that the code achieves the outcome for this particular challenge, but I find it strange that certain characters such as apostrophes, semicolons and brackets are missing. I don't want to be learning this the wrong way or doing general bad practice.

I made the following solution which again gives me the outcome required (though I don't know if it's good coding or if in an actual website development situation it would cause issues):

.box:before {
content:"Hello World";
word-spacing: 200px;
text-align: center;
}

Why does the challenge's "Best Solution" do something different from this?

TylerH
  • 20,799
  • 66
  • 75
  • 101
monstermind
  • 21
  • 4
  • It looks fine. Best solutions are those that are readable and maintainable. The shortest solution isn't often the best one. And yes, the CSS should be syntactically correct. The browser will work out wrong CSS but it's certainly not good practice. – Adam Jan 17 '23 at 11:36
  • 2
    Challenges usually aren't really meant to teach you the technology. They are intended as a challenge to those who are already familiar with it. – gre_gor Jan 17 '23 at 11:38
  • You might be able to ask Termani Afif himself. He's regularly on Stackoverflow https://stackoverflow.com/users/8620333/temani-afif – Adam Jan 17 '23 at 11:40
  • 1
    Posting a question here is how you would ask him, @Adam. – Cody Gray - on strike Jan 17 '23 at 11:42
  • 1
    the "best solution" is nothing but the one using the shortest code that solve the challenge. Nothing more. I never had in mind to made an academic website to teach coding. It's a website for "fun" to practice CSS and try to solve challenge while learning new tricks. Your solution is also fine but uses more code, that's all (and it already provided by other so you most likely won't see you name listed there because I only accept new solutions) – Temani Afif Jan 17 '23 at 11:52
  • 1
    Thank you for answering my question, everyone! And thank you for the explanation and site creation, @TemaniAfif. I think I understand how to utilise the challenges better now that I understand how the solutions get sorted. I've been learning coding on a different site and have been looking for ways to practice some output as I go, so yours is a very helpful site. Much appreciated! – monstermind Jan 17 '23 at 22:08

1 Answers1

-2

I can't access the solutions but it seems like a part is missing as well as the class selector(if it's vanilla css)

:after{width:70;content:'Hello World

Is not valid.

.box:after{width:70;content:'Hello World';}

Is valid. Note that it's usually recommended to use ::after unless you want to support older browsers. The inline formatting is usually not recommanded either. Ideally you would have something like

.box::after {
width:70;
content:'Hello World';
}

So your reasonning is correct.

altho
  • 210
  • 1
  • 10