First SCSS Project! Help is needed! Please!

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Illyaas, I'll try to help you out here, mainly with the live site issue.

  I just cloned your repo and ran it locally to see what's the issue; everything looks fine when I ran it on the server, but when I tried to build it, I get an error about postcss. It looks like you have the PostCSS CLI tool in your package.json, but you don't have PostCSS as a dependency yet, so just try running npm install postcss -d and then run npm run build again. I didn't really have issues after that, so I pushed the repo and deployed it on Vercel, which you can access here: https://sunnysidetest-five.vercel.app/ (btw, it looks really good, great job!). I'll keep the site up until you're able to deploy.

  About changing the color of the SVG, what I did was instead of importing it as an img, I added it into my HTML as a svg by copying the code (which can be accessed via VS Code easily if you click on the file name). After that, you can change the fill color of the path, which should look something like this:

  svg path {
     fill: #cccccc;
  }
  

  Good luck, hope this helps you out!

  Marked as helpful

  0

  ---

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @elaineleung Thank you so much! I tried again with netlify and changed the dist/ to public/ because I didn't have a dist/ folder and it worked! But I also understand what you mean because build didn't work on my computer so I don't actually know why it deployed. But thank you for that , I can install post-css on my next project. I hope it works and my Mac doesn't have another crisis.

  And thanks for the solution for the svg! I didn't think of that.

  Could you pls check if my live site works for you because I am still not convinced it actually works cos I don't know why it works lol.

  Thank you!

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @Illyaas4Show It works fine now, well done, and I'm glad you figured it out! 🙂

  Also, you can try using Vite.js (which also supports plain JS projects); I think its setup is a lot simpler. I used it for a React project with Sass and it was such a breeze to use.

  Marked as helpful

  0

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @elaineleung Thank you very much for the help! Since you are a very knowledgable person, I could use the chance to ask you a few important questions (if you don't mind :) )

  • Do you think that it would be a good idea to learn a lot more about using terminal for things like github? because I have been finding it really easy to use the desktop version but I don't know if that is the best for med.

  • Is there anything that I need to think about when using media-queries?

  • Is there any thing in general I should know as a front-end intermediate?(or beginner lol)

  • Would it be a good idea to make my portfolio website now or should I wait longer?(I am 16)

  Sorry for the excessive questioning, I have learn everything on my own and I am very eager :)

  Thank YOU!

  1

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @elaineleung Also I will check out the Vite.js to see if it is easier

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @Illyaas4Show No worries, glad to help!

  About the command line, yes I definitely think that's something all developers should learn even when there are desktop interfaces and plugins that can be used. Using it for GitHub is a good way to start learning about CLI, because you'll almost always need the command line when you go beyond learning HTML and CSS (e.g., learning React). It can be daunting at first even when using it for GitHub, but once you learn it and have everything set up, you might find it's not as hard as you thought.

  About media queries, I think the key is just to start mobile first almost always; usually one breakpoint is good enough, and that if you find yourself using too many, then chances are there's something in the code that's causing it not to be as responsive as it can be (like too many fixed widths used).

  About frontend development, there's no shortage of things to learn, and it's tempting to soak up everything available; I think the key is to keep experimenting while practicing the essential stuff over and over again.

  Lastly, sure, why not set up a portfolio? You may not need to promote yourself necessarily, but it's always good to have something to show others and also to keep as a record for yourself!

  I can be reached at Twitter @elaineclleung if you ever want to reach out and say hi :)

  0

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @elaineleung OK thank you!

  0