Personal Project Feedback

Hi everyone. I was hoping to get some feedback on a personal project I have been working on. It is a remake of an existing free bootstrap template. I wanted to build it all from scratch so with the exception of the small jquery code that I needed to trigger my menu, everything on this site was coded from scratch. I want tried to focus on putting out clean code, the naming standard is based on BEM so the names may seem a bit long.

Since this is based on an existing template I’m hoping the feedback will be on the code and not so much the design. If you have the time also please check out my parallax module.

@AdityaVT @RandellDawson @astv99 looking forward to hearing from you guys. In my short time here I have come to respect you guys input. But I’m also looking forward to hear from everyone.

Do you have specific things in mind?

I took a brief look at your codes and looks like they are using good conventions already and you are using html tags semantically.

1 Like

Great to see that you have incorporated parallax effect project into this project, and that you have fixed the responsiveness issues with the buttons. The only remaining problem I see is that the page shifts down when the hamburger menu is activated, this creates additional white space on the top of the page. I have created a github issue where I have listed the steps to reproduce the problem, if you need it. All in all, great work!

1 Like

Thank you my friend. I will start working on that issue. Thanks for taking the time to look at it.

Thank you @shimphillip I was just looking for general feedback on the code. Wanted to know if I was doing anything wrong or contrary to best practices.

So I fixed the issue you pointed out.

It seems that sticky positioned elements reserve their initial space in the document flow. That’s what was causing the problem. Thank you for pointing it out.

pull request #22

Personal project: looks great for the most part. The buttons don’t work yet? In your HTML code, I noticed that you’re using single quotes predominantly—although there’s nothing wrong with that, most people use double quotes to enclose attribute values. Also you’re missing quotes on these two, which should look like this with quotes:

<html lang="en-US">
<meta charset="UTF-8">

This personal project also has fairly low scores being reported by Google PageSpeed Insights that should be improved:

Parallax module: in your HTML code, style tags go outside the body, not inside, like this:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>css parallax realistic</title>
    /* CSS styles here */
  <!-- page content -->

And it’s not clear why you’re using a style tag in your HTML code on CodePen. That’s what the CSS panel is for. You could move all of that CSS code in the style tag over to the CSS panel instead.

The parallax scrolling itself seems to work ok, but the background cat images distort at lower resolutions, which should be fixed.

1 Like

Thank you for the very helpful pointer @astv99. I had read about optimization a little a few weeks ago when I got serious about writing better code. I decided to defer focusing on optimization since I realized I had a lot more fundamentals to master or at least become good at. But I think it’s about time I start focusing on implementing optimization tactics in my projects. I did not even know about Google Page Speed Insights. That tool is amazingly helpful. I plan to use it a lot for in all my future projects, thank you so much for that one.

I wanted to apply a scrollspy effect to the buttons. I didn’t want to include it until I could learn how to do it well. Now that You mentioned it, I guess I could at least set the buttons to point to their respective page section id’s for now.

Thank you so much for your input. I will fix the other issues you mentioned. Looking forward to discussing some more code with you in the future. Hopefully some day I could help you out with something.