Basic webpage set up

Excuse the basic nature of my question. I am very new to this world and through all my Googling I may have only confused myself further. 

I want to create a VERY basic webpage for the purpose of practicing code. I want to have an index.html file and styles.css file (javascript at some point later too but not for now)

How do I get from launching Rider for the first time to the point where I have this basic framework waiting for me to have a play around? Unless I am missing something very simple!

I can't seem to find a tutorial for this online. All the training videos I have watched start from the point where the project framework is already set up and it is a generic IDE being used usually too. 

Many thanks and apologies in advance!!

1 comment

Hello Lee,

JetBrains Rider is primarily designed for .NET development, but you can use it for web development too. Here's a step-by-step guide to set up a basic webpage project with an `index.html` and `styles.css` file in Rider:

1. Launch JetBrains Rider:

• When you first open Rider, you'll see the Welcome screen.

2. Create a New Solution:

• Click on New Solution.
• From the list on the left, choose Empty Solution.
• Name your project, for instance, "BasicWebpage".
• Choose a location for your project.
• Click Create.

3. Add an HTML File:

• Once your solution is open, right-click on the project name in the Solution Explorer (by default on the left side of the screen).
• Switch to File System view.
• Right-click your solution root folder, click Add and then choose HTML file.
• Name the file index and click OK.

4. Add a CSS File:

• Right-click on the solution root folder again in the Solution Explorer.
• Click Add and then choose File.
• Name the file styles.css and click OK.

5. Link the CSS File to Your HTML:

• Open the index.html file.
• Inside the <head> tags, add the following line to link to your CSS file:
    <link rel="stylesheet" type="text/css" href="styles.css">

6. Start Coding!:

• You can now begin adding HTML content to your `index.html` file and styling rules to your styles.css file.

7. Preview Your Webpage:

• To see how your webpage looks, you can simply right-click on the index.html file in the Solution Explorer and choose Run ‘index.html’.

You should visit MDN Web Docs to get started from basic web development concepts, practice your skill with the guidance. 

I hope this helps you get started!


Please sign in to leave a comment.