First four projects done. Am I doing this right?

I got so focused on completing the first course and projects that I forgot about the forum!

About me, briefly:
I’ve been building sites since 2002. But, I spend a few years away from coding and got more into business. Now I’m back to coding and I’m brusing up on things and learning what’s new. I ended up here through The Odin Project.

I kind of blew through these first projects. Before I go on to the personal portfolio, it would be great to get some feedback.

One of the biggest difficulties in doing the projects, for me, is coming up with fun ideas and finding and/or creating all the content. Am I working too hard? This is just supposed to be about coding, right?

Tribute Page
Survey Form
Product Page
Documentation Page

2 Likes

Hey @MarkRussellDev, :wave: welcome to the freeCodeCamp community!

All of these look good. The only issue I came across was on the Documentation Page the page content shifts under the menu when any of the links are clicked in the menu.

Love the Product Page content and design BTW. Ordering Log now! :laughing:

1 Like

Hey @MarkRussellDev!
I like all your projects, But there is one thing in all projects.

  • You can add text at the footer like "Made by MarkRussellDev "
  • As @robertgroves Said the menu is overlapping the content.

That’s my feedback.

Thanks and Happy Coding :girn:

1 Like

Thanks! Glad you liked LOG from BLAMMO! :laughing:

That’s my first time with that sort of layout on the documentation page. I was noticing that issue too, where the page would overlap the menu when clicked. Then I restored an earlier version of the css and it went away. It’s still working fine for me on Firefox dev edition. Maybe it’s broken on Chrome? You using Chrome?

If anyone can point me towards a solution on that one, I think I need it.

Edit: Just checked and it IS all messed up in Chrome. Does anyone know what’s causing that? I searched and there are some old Chrome bugs that come up. But, those should be fixed by now.

It is messed in firefox too.

Awesome work except the Tech Doc project where the main content overlaps the sidebar on clicking.

1 Like

Your pages are awesome!
But when you look the Product page on mobile the navbar is like half of the page. Don’t you think about hiding it?
And the Doc page is not really responsive for mobiles too

1 Like

Thanks everyone. My mistake with the Doc page was to imagine there was something to be learned from the example. I finally got fed up with the absolute positioning and changed the whole thing to use a css grid instead. Now it works on Chrome and looks better on mobile devices. :grinning:
New Documentation Page

I checked it on all the devices available in Firefox dev. The only one where it runs off the edge a little was on the oldest iphone and only then in portrait mode. I figured that was good enough, compared to most of the stuff in production on the web today. ha

How do you suggest I fix that? I could make the nav wrap at a larger breakpoint maybe?

Did you think about get it under humburger menu? It’s actually OK, you don’t need to change it if you don’t want I just saw it and that is why I told it to you.

Welcome to the forums @MarkRussellDev. Some things to revisit;

tribute

  • Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
    • The projects aren’t just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.

survey form

  • Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
    • The projects aren’t just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.

prod landing

  • Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
    • The projects aren’t just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.

tech doc

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 15/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on desktop and smaller screens
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
3 Likes

Those are really good callouts by @Roma. I haven’t looked at the sample projects in so long I didn’t realize how similar these were to those. Definitely try to build these out from scratch with your own HTML code.