I’m having trouble using CodePen. I realize it is made to be helpful with easy one button clicking to add script references, srcs, links, cdns, etc.
My problem is that they are not added to the code in CodePen. Somehow they work in the background. That is not good. I’d like to see exactly where they are being added in the code. For example, I know that it makes a difference where you put js script in html.
Now, with the Portfolio Challenge, it gets even more complicated - using pug template. I don’t know if the three small CodePen editor windows are separate files or if they are integrated in the background into one page with different sections, like you can do with css in style tags in html.
With much searching in Stack Overflow I’ve found out how to reference some of that stuff in a pug template, but I have not found and have no idea how to reference the code in the js window.
Imagine I were coding in Visual Code (which is what I actually do). I want to know exactly how to structure my folders and make either inline or external file references. CodePen hides all that from me.
No disrespect meant to CodePen, but I’d really like some help on this. I’ve tried tons of editors, from Atom, to Sublime, to Brackets, etc. I’ve run into multiple issues (for example on Brackets). It’s nice and simple, but I hate having to constantly search and figure out how to overcome errors and issues. I’ve settled on Visual Code as the one with the ‘least’ problems.
I welcome any suggestions.
Yeah, codepen’s really not my bet when im creating huge, complex projects… I use sublime(try it) and after I finished my project, i Paste them in codepen.io to share the code with the whole community! so if youre having trouble or not comfortable in working with codepen, use an Application and paste your codes in codepen for challenge submission or whatsoever
I’m kind of frustrated. I started the freeCodeCamp lessons. I got through 111 of them and posted the Tribute Page Challenge. Then moved on to lesson 112 on Building a Personal Portfolio Challenge. I don’t see anything in the Forms at all on this. I feel I have been dropped like a hot potato.
The code you are supposed to build a site functionally similar to uses jade(pug) template without even the slightest introduction to them. I’ve had to do a lot of searching and found some help in Stack Overflow, but there are still questions unanswered.
I’d like someone to explain to me how you’re supposed to learn when so much is done behind the screen in CodePen. If there is anybody that has gotten their “functionally similar” page up and running, I’d appreciate some help and answers. I can’t get it to display at all so far, and when I try to load any part of the sample in Visual Code to learn what is going on (adding post-css and pug handler extensions) I get hundreds of errors.
Yay, I figured it out after some smashing my head into a wall. You can download the zip compressed files for the example, then open the folder in Visual Code. Now it works and I can go through the code to figure out what’s going on.
Wow!
OK, a little help to anyone that may be suffering like I was:
First, Fork the page you’re supposed to be building similar to. That will copy it into your own pen.
Then, go to the lower right hand corner and select “export.” That will give you an option to download the zip compressed files with the folder structure.
This is very helpful because if you didn’t know, the pug file is saved with a pug extension; there are folders holding assets, js, etc. All that structure is extremely helpful.
1 Like
You can also export your pen. The files that you download will include header, so you can see the imports, file structure, etc.
Codepen is the tool that FCC recommends for the front end projects for its simplicity, but you are certainly welcome not to use it at all. The requirements for projects is that there is a live version that people can see and interact with and that the code is publicly viewable.
Great, thanks. It was helpful for me to export the sample pen. That way I could see the directory structure and was able to remove (for example, put empty placeholders in place of images), edit code to use my personal links (as for social media sites), etc. Of course, mine looks a lot simpler than the sample at this point.
I tried a couple of things. I have a hosting service. I tried uploading mine to my server host, but it didn’t work. My images didn’t show and a couple of other things.
I was able to open it on Visual Code’s Live Server and it displayed perfectly. I don’t know why, but I’m trying to figure out now how I can put what I’ve done back into a pen in CodePen. That doesn’t seem so easy to do though.
I guess I could just copy my files into CodePen and make sure I don’t use any of the external libraries (since in mine they are all included in the files).
Any suggestion on how to get that done?
Yeah, thanks, that’s what I finally figured out after much trial and error and searching.
I do like the simplicity of CodePen, and one of my great concerns when I was trying out different editors was exactly that ability to see the website immediately update as I changed and saved code.
I had run across that with nodemon in nodejs; and using npm init, package.json, creating project dependencies, tweaking configuration scripts, and using a module bundler such as webpack to avoid having to load an entire library in an html file.
It’s really fun to learn coding.