Unit 5, 6 CSS things donot update on webpage!

Doing work with Unit 5 (CSS) and next unit too, the webpage Tab beside IDE does not update, whatever i try to change color of background or text other than given in the examples nothing happens.
Now if come to webpage_address and do experiment here it only updates the text we give in heading or as content, the color, padding, border and more things donot seems updated.
I also raised that question but didnot get any reply.
Kindly help in solving this problem.

Can you send us a screenshot and the changes you are making in the css so we can check what might be happening?

Attached different three screenshots showing files present in the directory, webpages appearing different in browser and in IDE.

1.The IDE webpage presents the interface whose html file is not existing in the directory.
2.The browser’s webpage presents the interface not according to that given in the lesson while the html and css files are exactly downloaded from the lesson.
We are unable to find out the reason.

The html page is not displaying properly because you are not creating the files and running the server in the right folder. Here is what you should do.

  1. Copy the files indicated to webpage_ws/06-css-styling.
  2. Then run the http-server inside webpage_ws/06-css-styling.
cd ~/webpage_ws/06-css-styling
http-server --port 7000

After this, the webpage_address (in the IDE or browser tab) would show:

  1. Click on example-6.1.html to see the content.

Key takeout

  1. Never create any file outside the webpage_ws folder, or the server will not see it.
  2. Create every file in the specified subfolder of webpage_ws.
  3. Alway start the server in the folder containing the html file(s) you want to display.

Extra tips

  1. To get the changes you have to reflect in the IDE’s webpage, right-click on the page in the IDE and click “refresh frame” (Chrome) or “this frame → reload frame” (Firefox).

  2. When you run http-server in a given directory, it looks for an index.html file in that directory and automatically displays its content. If the file is not present, it lists all the files in that directory, as we see in this case.

Try renaming example-6.1.html to index.html and see this magic! Be sure to rename it back to avoid conflicts with other files you need to create in the chapter.

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.