Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 4 months ago

First time trying Javascript

Professora Bianca•140
@ProfessoraBianca
A solution to the Blog preview card challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What specific areas of your project would you like help with?

It was very hard to deploy this challenge on GitHub Pages...

After getting help from Frontend Mentor users, I managed to make the CSS work, but the Javascript still doesn't..

Anyway, I think it was pretty close this time :)

-UPDATE

Got it working on Vercel!!!!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • x-147•310
    @x-147
    Posted 4 months ago

    from the error, it is expecting a docs directory at root during build process: Error: No such file or directory @ dir_chdir0 - /github/workspace/docs

    you can create a /github/workspace/docs in your repo and see if it works.

    i've not worked with jekyll so not sure i can help you there, it is possible to complete this challenge without a static site builder.

    also index.html is pointing to the wrong css file, shown below is the correct file (style.css not styles.css)

        <link
          rel="stylesheet"
          type="text/css"
          target="_blank"
          href="assets/style.css"
        />
    

    the desktop css looks very good (and is working once you correct filename)

    mobile is a bit broken, but we can fix that after fixing the above. i personally did not create a mobile breakpoint for this challenge since the typography, spacing, dimensions for desktop also fits for mobile.

    Marked as helpful
  • Bernardo Poggioni•6,990
    @R3ygoski
    Posted 4 months ago

    Olá Bianca.

    Sobre esse erro que você postou está acontecendo por causa de uma pasta chamada docs, veja esse trecho: Error: No such file or directory @ dir_chdir0 - /github/workspace/docs.

    Também pode ser erro de Renderização do SCSS, digo isso devido a esse trecho: Rendering: assets/css/style.scss Pre-Render Hooks: assets/css/style.scss Rendering Markup: assets/css/style.scss github-pages 232

    E sem contar que seu index.html está apontando para um local errado, ele aponta para um assets/styles.css mas o seu arquivo de css se chama assets/style.css.

    Bom vou continuar analisando, quando eu chegar em alguma conclusão eu editarei esse comentário, ou talvez adicione um novo.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub