True rookie here! Can someone check out my CodePen link and please help!

HTML & CSS
1

Hello, for some reason when I save an image and then put it in my html code it errors when looking at the webpage. However, when i copy the image url (location); it works fine.

Next question, I cannot figure out how to get my list to present horizontally above the “Kansas Jayhawks” header. Here is my CodePen address: http://codepen.io/ROOTZ/ and if it would help for me to paste my code in another comment I would be more than happy to.

Any help would be greatly appreciated.

Thanks,
ROOTZ

2

Hi there. Unless you have a CodePen Pro account, you can’t store images on their site, so any relative link to an image can’t work. An image URL like this:

<img src = "images/KU.jpg" />

can only work if there is an /images/ folder in the same folder as the page displaying the image, which can’t be the case on CodePen, but is the norm for pages on your own server.

If you’re referring to this Pen, there are simple ways to make a list sit horizontally, but I really think you need to learn some more basic principles about HTML and CSS before diving into all that.

It would be worth looking at some introductory materials like books, courses etc. to make sure you have the foundations in place. Otherwise you’ll drown in confusion with this stuff.

3

There are a couple of things I’d suggest looking at on the pen you have up:

  1. You don’t need to include the HTML markup for anything other than the <body> content; so no need to include the <!DOCTYPE>, <HTML, <head> tags, or their respective closing tags - that all helps keep your pen less verbose.
  2. All of the <style> content can go in the CSS window, rather than mixed in with the HTML. Again, this helps keep things readable, and gives you “separation of concerns” (HTML = structure, CSS = presentation, JavaScript = interactivity).

Let us know if you need any more pointers.

1 Like
4

When using Codepen, do as Chris says and ignore things like doctype, head and style.
But when you come to make a real html document, things need to be structured properly.
The style tags should be within the head. Anything you see on-page should be within the body, so the image and h1 should be in there.
I could pick a few other faults, but of course you are a rookie after all, so do as Ralph says and seek some learning materials and find out how to get it right. If you need any more help, just ask.

5

Yep, I should have made clear, my post was referring to the Codepen presentation only.

6

If you edit your Codepen and then when you’re happy with it, you can use the Export zip facility and the doctype and head section will be added back for you. :slight_smile:

4 Likes
7

Now I never knew that…

1 Like
8

Thanks for all the help/advice everyone! I am currently taking a web design course on Udemy and just wanted to see how well I could create a simple web page with what I have learned so far. I will most definitely try to stick to the beginner aspects of design and continue to learn them.

p.s. This site is awesome because lord knows I need help!
Thanks,
ROOTZ

9

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