Sharing my struggle of starting frontend mentor

I started using frontend mentor to make projects and improve my HTML+CSS skills after the guidance of wonderful people like @vikramvi and @stephenmutheu

NOTE:

  • I like to ask questions like an absolute beginner (even though I am a professional software engineer) as it helps me rediscover ways I never knew before.
  • I do feel really silly for the above (very sorry for any inconvenience I caused anyone)
  • The love and support of this community inspite of all this has completely blown me away and I love it.

I joined the discord server and found the challenge-roadmap section so I started with the QR code project and downloaded the file

Then I went through the README.md which is where I am supposed to start but was a bit overwhelmed.

there are 2 major problems i faced:

  • As a beginner we are supposed to put the code on GitHub
  • and we should figure out how to write the HTML and CSS code locally (but I act like I only knew how to use the freeCodeCamp online editor)

I did make sure to ask for help on discord about these 2 points and got great guidance for point 1 but a little less for or point 2.

Since the explicit instructions were a bit incomplete for point 2, I had to to google out “how to use visual studio code” and later FINALLY able to code

It was a real struggle to make a folder, organise the files, know how to use VS Code with the LiveServer extension, try to see a preview etc etc

All this could have been avoided if I just watched a freeCodeCamp VIDEO on writing html locally (my bad)

In the end I managed to code the project in a day at the expense of my health sitting all day long but I will now put the code and other files on GitHub.

here’s the link to the code

1 Like
  • Don’t worry, we all have went through the learning curve , difficulties as you’re facing
  • It’s like a hockey stick graph, pretty slow for first few months and then northward graph.

I suggest few more tips from my learning experiences

  1. watch some YT videos of building simple projects and re-do yourself along. Search “simple html css projects for beginners” in YT or similar terms

  2. Later stop YT video, do step yourself and see how author has done it later

There are loads of nice authors who has put up tons of projects building videos online.

Hope now you understand why I said leave JS for now and concentrate only on HTML and CSS :wink:

Further questions are always welcome

1 Like

Start following “Pomodoro Technique” as it’s best for once mental and physical health while doing any kind of job.

1 Like

Another technique, I had followed which helped me a lot; is breaking down tasks into smallest chunk possible and start solving one by one

e.g. button should be matching as per design

  • how to set button height ?
  • how to set button width ?
  • how to color button ?
  • how to position button ?

etc etc

once you finish a sub-task and put a checkmark against that task and see how great your brain feels :slight_smile:

2 Likes

You are correct. I use pomofocus.io to combine pomodoro + small tasks. It is a very useful website.

But the issue that I have is many times I get so deep in work that I feel like going on till I feel tired or something interrupts me. I try to break this habit but its tough

I mix between 20, 25, 45, 60 and 90 mins depending on how I feel to work

Yes I understand now how much I am missing.

I was feeling good about my concepts until I saw the more professional designs we can make with HTML and CSS

1 Like

It sounds like you might be interested in helping improve the resouces to make them more accessible to beginners. freeCodeCamp is built primarily by volunteers who focus on anything from language translation, to curriculum planning, to code architecture. We’d love for you to share your expertise and experience by contributing to the project. When you find ambiguous wording, a place where links to another resource is missing, etc, then you can open a GitHub Issue and, if you’re feeling up to it, create a PR.

2 Likes

Thank you!! Thats so awesome @ArielLeslie ! :heart_eyes:

I’ll take a look and try helping out where I can