So here is my portfolio project. Just a couple of things to take into account before you review –
I am looking to know if I am on the right track, or am I completely messing it up….
I have never coded before, and have no computer background. I spent about 10 hours doing the FCC challenges, and then another 10 to create this page.
I know my code is messy. I worked on it without any template or even a plan, taking it step by step and using little tricks to solve issues.
I basically tried to “copy” the example project, although I actually did not copy-pasted anything from anywhere, I wrote it all (with minor exceptions ).
I could have done some more digging, but decided to stop and present it, and I intend to come back to it and improve it. But for now I want to continue learning. is it wrong? should I first try to perfect this one?
The contact form is not functional. I am not there yet.
Of course you’re on the right track–very well done.
Congrats on making it this far! You’ve put some time in, and it shows. You’re off to a good start, keep working hard and you should continue to make progress.
Glad you realize that. Using tricks and other things isn’t a problem, but errors and sloppy code is. Treat your project like a work of art. I would at least tidy it up before presenting the code to someone. More on this below.
Perfectly fine. Patterning after something else at the start is the best way to learn when you’re not sure where to begin.
You’re doing the right thing. Your portfolio will probably never be perfect. I know mine isn’t and I’ve rebuilt it about 4 times since I first built it a little less than two years ago. Come back to it occasionally and improve it, but you’ve passed the challenge and you need to learn more.
That’s to be expected. Don’t worry about this or waste your time trying to figure it out right now.
Now, some overall tips to help you improve. These shouldn't distract you from moving forward, but just help you overall.
Include your styles in a separate file not directly in the html. Codepen gives you a window specifically for this, or you could link to the file in a local project.
Why are you using a body element and not a head element? Chose one or the other. You can drop the body and head elements altogether as they are unneeded most of the time, or you can include both for explicitness.
Format your code properly. It will help you avoid errors (which you have) and read it better. Your text editor has a built in feature for this. On codepen hit the dropdown arrow at the top of the coding panel and hit “Tidy HTML”. Please do this before continuing so you can view your errors properly.
Press the little arrows on the side of your html next to the numbers. This will let you focus on one area at a time and detect issues.
Look at the red highlights on your html in codepen. You have lot’s of nesting errors. Closing tags in the wrong space. Unnecessary and missing div tags.
).