I don’t really know how to word this question but here goes nothing. I’m on the last project on FCC for responsive web design and one of our tasks is to essentially make a CSS grid with our projects (https://codepen.io/freeCodeCamp/full/zNBOYG) this is their example. My question is how are they using those images? How do they obtain those images like the one for their calculator project and are able to use it as an img src? I want to do that for one of the projects I have on codepen but I have no idea how to do it. The only way I can think of is taking a screencap and uploading it on imgur but their link comes directly from FCC so it confused me. Please let me know if this question doesn’t make sense so I can reword it. Thank you.
Your questions makes perfect sense. I think many people ask a similar question at this point - I know I did.
You have two issues here:
- Getting the image.
- Making the image accessible to your app.
To get the image, an easy way is to do a screen shot or a window shot. You can edit it to the size you want. There are also sites/services that will do snapshots of web sites. I can’t remember what I used, but of you search for “get snaphot of website” that will do it. It looks like this would do it - I’m sure there are others. I’m sure most of them are free.
The next issue is how to host the images. Normally you would have a few options. You could bundle it up with your site code. I don’t think this is an option since you are on codepen (I don’t know, there may be some pay tier where you can do this). The other option is to host them somewhere. If you have your own server, you can do that. If not, there are services that will host them, some for free. I use AWS S3 a lot for this, but that may be more complicated than you want to go for now. I’m sure there are easier ways to host images.
Another option is just to realize that you are building a demo that you can build a portfolio page and not proving that you know how to host images. You could just use placeholder images for now and not worry about it. Once you get into a “normal” setup, this will be very easy.
Funny that you ask that question, I asked the same thing a few weeks ago. Someone pointed out that FCC actually takes screenshots of your projects automatically and gave me a link to follow. It’s a few weeks back now so am not gonna hunt for it but if you use your pen address at top of page ie https://codepen.io … and add /image/small.png or /image/large.png onto the end you will get a screenshot of your project.
Actually just had quick look saying all that, my topic on Aug 8th titled FCC Portfolio Project Thumbnails has the link with all the details if you wanna look it up
Thank you so much for your response. Yeah Codepen is different, if I was using vscode, I could just pull the image from a folder, but with codepen it’s different since I’m not able to do that. I guess I can host it on imgur or something after taking a screenshot of it. That or I can do snipping tool.
I found your post and am going to look over it. Thanks a lot. Glad I’m not the only one who’s had this problem lol.
To potentially save you future confusion. I used the images as background images but they looked horrible and background-size:cover/contain;
didn’t help for reasons I didn’t understand.
I created another topic in the hunt for an answer. Long story short if you go the background image route make sure the container div you put it in is of similar aspect ratio to the image itself, then background-size:cover; will do a good job.
The images do still have the FCC test suite attached to them but I can live with that
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.