Help with CodePen?

1

I created the tribute web page for the first project and posted it on CodePen. Because I only have Internet access through my cell phone, I did this offline and pasted it into CodePen when I had it done.

It looks different in CodePen. I have three images in one row. I was able to resize them to have the same widths but not the same heights. In my own browser (Chrome), the three line up at the bottom and just are different heights at the top, but on CodePen, with exactly the same code, they line up at the top and hang to different bottom depths. I’ve tried using vertical: align but it has no effect.

There are other differences, too. For example, my font is the same in both versions, but it shows as larger and a bit less bold in CodePen.

Anyone have any ideas on how to fix the image alignment problem and any insights on why CodePen’s display is different?

1 Like
2

Just to clarify, are you doing all of this work from a mobile device?

3

Bleah, no, I’m doing all the work from a laptop. I’m only using the cell phone as a mobile hotspot, to connect the laptop to the Internet.

4

Can’t you post a link to the pen so we can see the problem?

5

Realize that codepen expects you to set up things differently than setting it up locally. You have all of your HTML, CSS, and JS broken into different panes, and you load your CSS and JS libraries through setup, not in the HTML pane. In the HTML pane you should only have the stuff from within the body tags, without the bodytags.

Without seeing your pen (please provide a link), I’d guess that if you looked in your browser console, you’d find that you have some errors from libraries not loading properly.

6

(Sorry about the delay. I tried to post this yesterday, but the system said I exceeded my newbie limit.)

Well, it’s just a simple page, so I didn’t use any libraries. You can see that my HTML and CSS are separated on CodePen.
Here’s the link: https://codepen.io/LisaWillCode/pen/zEQYRQ

(Hoping this works and shows the link rather than part of the page.)

Edited to add: Well great. All my images were there yesterday, and today they’re not loading at all. What’s with that???

Here’s a screenshot of my version vs. what one of the differences looks like on CodePen:

Codepen vs Me
Codepen vs Me680Ă—691 677 KB

7

Hey. Don’t use imgur on CodePen, images won’t load most of the times (they block requests from CodePen for some reason).

I didn’t look to deep in your CSS but since you’re using Bootstrap 4 you can solve this issue using the flexbox aligniment classes. You’ll just need to give a “align-items-end” class to your .multiPic row, like so:

<div class="row align-items-end" id="multiPic">
8

Actually, I used CTRLQ for the image, and they get it from imgur. I’m open to suggestions for online image hosting as long as they’re free and not Google or Microsoft.

I’m NOT using Bootstrap for the tribute site. Instructions said to pick a Bootstrap, but I thought that was just in general. I really want to use CSS & JS until I’m proficient in them before adding on other tools.

9

In that case you can use regular flexbox with the following code

.multiPic {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    align-items: end;
}

.multiPic > div {
    flex: auto 0 0;
}
1 Like
10

You do have one library loading in the codepen settings, Bootstrap. But I guess you’re not using it.

If you’d checked your browser console (ctrl-sft-i) you’d see the errors loading the images.

In codepen, you don’t put any html tags outside the body - everything else is handled by codepen.

Also I’d work to keep your code better organized, with proper indenting. It is an important habit to get into. In codepen, it’s easy - select the code and hit shift-tab.

Let us know if the other suggestions don’t help.

11

Emgo-Dev, thank you, but I don’t believe we’ve learned about flexboxes yet. I’m just not up for absorbing new stuff until I have to. If there isn’t an explanation for why CodePen handles my code differently, so be it. I’m at the point now where I just want to move past these first two “challenges,” neither of which I care about, and get to some actual coding.

ksjazzguitar, thank you. This is just the kind of thing I need to know.

I guess I can remove the Bootstrap, at least from this pen? I was blindly following the challenge instructions, which say to select it. But they don’t say to use it, at least not for the tribute.

I do know how to use Chrome Developer Tools to see errors; I just didn’t know I could do that with code inside CodePen.

My code is indented properly in the Notepad++ I use on my computer. Pasting it into CodePen totally ruined that, and frankly, I didn’t feel like going back and fixing every line.

Sorry, I’m very frustrated and annoyed right now. I want to learn to code apps, not mark up web pages. I don’t want to be using CodePen. Having to learn it - why oh why can’t any of this be intuitive??? - in addition to the tools and whatnot is only keeping me from getting to the coding part.

12

Gotcha. I saw the grid classes and got confused. Well, then remove it. It’s bootstrap that’s keeping your images from being bottom-aligned properly, because the .row class will have a display of flex, making the content be on top by default.

I’ve seen a bunch of people on the forum using cloudinary.

You don’t have to use it. You can use whatever you wish as long as your app and code are public. You can try Plunker to see if that feels any better; you can add different files like you would do in your local enviroment.

13

Again, in codepen, if you select all the code in a pane (ctrl-a) and then hit ctrl-tab [ERATA: I should have said shft-tab], it will auto-indent for you.

Sorry, I’m very frustrated and annoyed right now.

Good, if you weren’t it would mean that you aren’t paying attention. Consider this as job security. If web development were easy and could be learned quickly, the market would be flooded with coders and all the jobs would pay $10/hour.

I want to learn to code apps, not mark up web pages.

But FCC is a web development program. And even if you just want to do apps, you will need to know HTML, etc.

I don’t want to be using CodePen.

You don’t have to. As long as your code is accessible over the web and a working version of you page is visible, then that is sufficient.

Having to learn it - why oh why can’t any of this be intuitive???

I know there are a lot of codepen haters out there, but I actually like it. If you understand separation of concerns, and understand that codepen wants to do all of your head details, then I find it pretty straightforward. For simple projects like FCC, it works very well. For the stuff I’m working on now, it isn’t sufficient, but I still use it to test out ideas and algorithms.

But yes, porting from local to codepen can be a huge pain. But as said, you don’t have to.

in addition to the tools and whatnot is only keeping me from getting to the coding part.

I would say that learning tools is an important part of the process. As the complexity of what you’re working on increases, the need for tools will increase.

2 Likes
14

I like Codepen too. I remember having problems with it when I first tried to use it, though, before coming to FCC. I just didn’t get it at first. But after seeing the examples for the first projects in FCC in Codepen and using it for my projects, it clicked. Now I love it, and have used it for various work projects and to play around. I also spent a lot of time browsing other people’s pens on Codepen, which helped a lot.

15

noyb, thanks for the good info.

  • I switched to Cloudinary for the images.
  • I don’t really want any coding interface. If I must use one, it may as well be CodePen, but I bookmarked Plunker in case I get too fed up with CodePen.
  • I went to remove Bootstrap, but it’s no longer selected. Not sure how that happened, but okay.
  • I guess I did put grid classes in my HTML. I might have been trying to make it responsive. I realized at some point that regular CSS and Bootstrap CSS are blurred together in my head. I need
  • to review my notes from several sources and get that straightened out.

Emgo-Dev, thanks, I’m making a note of your flexbox CSS code for future reference. I’m just not ready for it yet.

ksjazzguitar, I tried the ctrl-a, ctrl-tab thing, but all it did was switch me to another tab in my browser. I don’t see any change in indentation. (Then again, the Save button got that yellow strip at the bottom signalling that a change needed saving.)

Well, they’re all web dev. And that’s fine, since web-based apps seem to be where we’re headed, but I want to do the app part, not the graphical design part. Used to be, you could learn HTML, including styling it, in an hour. You didn’t have to fight the system to get it to understand which thing was to be placed where or what size or color. :::grumble, grumble::: It’s not job security until I have a job, and right now, I’d accept a $10/hour job (coding, not McDonald’s).

I have no problem with letting CodePen do the head stuff, but it would be nice if they’d tell us that somewhere so I didn’t have to look for someone to explain this (and other things). Why don’t they have a basic newbie tutorial?

Not objecting to learning the tools, but I’d like to get the basics mastered before adding on more. It’s like learning multiplication when you barely understand addition. Yes, it’s easier to do 8 x 3, but not until you’ve grasped 8 + 8 + 8.

Somewhere in this thread, someone said that if I removed the Bootstrap, my three pictures would line up at the bottom, but that hasn’t happened. Since Bootstrap isn’t in this and the exact same code does it right on my system, I’m still wondering why it changed in CodePen. I’m tired of the tribute page, which I never wanted to do anyway. I guess these first two projects will just be imperfect. My goal is to meet the requested requirements on these and move on.

Sorry. I asked for help, and I appreciate all of your help!

1 Like
16

Sorry, I should have said “shft-tab”.

17

I’ll give it a try the next time I log on to CodePen.

18

Well, CodePen’s little shortcuts button at the bottom does say shift-tab is supposed to auto-indent the code, but I tried several times and nothing happened.

Specifically, I clicked on the code, then did shift-tab, then saved, then clicked on Run. Nada.

Thanks, anyway.

19

Just to be clear, you need to select the text. Go in the pane (like the JS pane) and then select it all (ctrl-a) then to the shft-tab.

20

Oh. Duh. Why didn’t I think of that? Seriously wondering if I’m wearing out brain cells.

Thanks!