Hey Ya’ll,
Just finished the first part of the HTML & CSS Series. Learned so much. But so much to practice. I’m thrilled to be making this career switch but I ran across a huge problem (or perhaps a minor one that someone can help me with please)
Everytime I try to run my code with live server, it always used to open my code into my desired website with the colors, and animations but now, it’s just opening a blank page with the heading and dry wording. I can’t seem to figure out why VS Code is not opening my Live Server correctly.
I have attached a screenshot as well. Thank you
Hi,
Can you share a screenshot of your VsCode so that we’d be able to see if you linked the css style sheet correctly?
Hey,
I have attached the necessary screenshots
Thanks for your help
I keep getting this page when i open live server from that HTML terminal
Hello,
My apologies for so many posts. I tried troubleshooting my own problem and almost got there but i still don’t know what to do after
Here’s what i’m getting now after linking the CSS sheet properly
How about images? are you linking them to document correctly?
Are you getting all the images from the source project (Images Folder)or is there any image that you’re getting from an absolute path(sites like Unsplash)?
For the landing page, you don’t have index.html (index.htm) in root folder. Otherwise, you need change the Live Server to point to one of the HTML file. You can try rename one of the HTML file to index.html.
For the images, you probably need to check the img src path. Try to see you can access http://localhost:5500/Images when Live Server is running.
My apologies for the late message.
I almost have it working but there’s something I must have mis-clicked which is causing the webpage to not display the background or text or the proper formatting.
Here’s a screenshot of the full code with the matching CSS File:
Could you explain a little more ? I am still new to the coding scene.
So, I labelled my main HTML file “Welcome Page (Batman Theme).html”
I then linked it with this:
< link rel=“stylesheet” href=“Welcome Page Batman CSS.css” >
Is there something I am missing?
Please refer to the screenshot in my other reply
=)
You defined the src path of the images directly as if they are in the root of your project.
So, you need to include Images Folder at the beginning of your src path you’re defining, for instance: Images/menu.png and then you’ll be good to go.
Okay. I think i understand what you are saying so far but I have one more question
In this screenshot, i have coupled all the pictures under the “Images/New Design Concepts” as listed on the left hand. How would i put this as the path to the images so the html terminal can access this path? Here’s a screenshot
New Design Concepts/25615.png
But this is not a very good naming convention for images folder, it’s better to choose a short and more concise naming convention for images you’re putting in a folder as well as a more descriptive name for image itself (For the sake of SEO & Accessibility) like Designs/User.png for instance
Okay that makes more sense.
Thanks so much for replying Asad. I appreciate your help brother
