Assessment needed for Fundamental CSS comprehension

MDN Learn
#1

Hi! My name is Flor and I’m new to HTML and CSS. This project would be my first one. My problem with it is not on the content or the instructions, but in the linking of the HTML with the CSS and the image.

This is what my code looks like: https://codepen.io/mariaflor/pen/WNRdreX
And this is how the files are saved on my computer.

files
files1365×598 46.8 KB
index files
index files1365×590 48.1 KB
style files
style files1362×590 43.6 KB

Also, I had to create two index documents, one as “index.html” and the other one as “index.txt”, since I wasn’t able to open and keep on editing the HTML document once it was saved as “.html”. Is this okay?

Thanks for reading <3

#3

I didn’t explain it on the post, but when I open the “index.html” file, the project looks raw and doesn’t include the image and doesn’t applies the CSS.

#4

Hi @mariaflor,

NIce work on Codepen :sunglasses:
I believe you are asking why your local version does not work?
I noticed a few things

  1. Your folders dont need to be named .css or .html
  2. Your HTML file does need to be called “index.html” or any other name provided the .html is attached to it.
  3. Your CSS file does need to be called “style.css” or any other name proviced the .css is attached to it.
  4. on the head area of your HTML file put in the below code. Note that the first “/” section is to the CSS folder.
<link href="style/style.css" rel="stylesheet">

On the getting started with CSS section there is an some guidance on adding CSS to your document. Have a look at as well. Let me know if you need further clarity on what I have just shared. Always happy to help a fellow traveller.

#5

Hi @Ran! Thanks for taking the time to answer me :smile: I changed the folders’ names, and could link the stylesheet thanks to the link you shared. I still can’t link the picture but I’ll leave it as it is and keep on working with other projects.
Again, thanks a lot for your reply :star_struck: Have a nice weekend!

#6

Hi @mariaflor

Happy to help.
Your picture is in the same folder as the index so no need for the forward slach i.e. “/” in the code that you use

      <img src="/flor.jpg" alt="A picture of Flor - a ginger-haired woman with a pearl necklace and earrings">

You will probably have to resize the picture if it is too big. Use Paint on your windows machine, if you do use windows. Also use this MDN resource on to look at how they use the CSS to resize the size and width. Also if you want to put some background image or style look at the MDN resource on Backgrounds and borders.

Have a great weekend and keep learning away.

#7

Hi again, @Ran :slight_smile: I removed the slach but no changes were seen. I’ll have a look at those documents and see if I can fix it.

Great weekend for you too and thank you!