Help On where to code First Project

Hello.
I am new to freeCodeCamp. I am going to start my first challenge But I don’t know where to start coding HTML and CSS and where to see the resulting page each time i modify.
I didn’t understand how can i insert an external css file.
I really need help to understand how to use these resources before I start to code my first tribute page project.
Thank you

Hi @Bhanu_TheLearner,

Welcome to FCC :slight_smile: I used CodePen for my projects, a great website where you can type code and then immediately see changes.

See this line from the Responsive Web Design Projects - Build a Tribute Page instructions:

  • You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js .

By ‘fork’, they mean click the link, and then click the button on the top navbar that says ‘Fork’. You will need an account set up to save your work.

There’s a box each for HTML, CSS, and JavaScript. You type your code in the relevant box and it will show up in the display. If you fork the above, it will already come with some code. Don’t delete that - if you click the button on the top left in the right window (it looks like three lines), it will allow you to run tests to see if the tribute page (and other future projects) passes all tests.

In CodePen, the way you access external stylesheets/frameworks is by clicking Settings -> CSS/JavaScript -> Add External Scripts/Pens (and add whatever it is you want, e.g. Bootstrap).

Hope this helps. Let me know if anything is unclear.

I would also like to add that you can download sublime text or visual studio code (both free software) and code directly into either. These are good as, from what i understand, these are actual environments that most software/web developers use to program in - so its practical.

Only caveat I guess would be that you need to refresh your open web page each time you make a change to see those changes. Alternatively, you could use f12 or the development tool to make changes in real time that you can see take affect, then add those changes to your actual document that you are working in.

Hope this helped!