Nerdfusion Clone project "done." Feedbacks needed

Nerdfusion is a straming company that is located in the US. This is their official site. n3rdfusion studio

And recently I cloned their website. I have no idea how to make my nav bars elements responsive as theirs.

And also I need some feedback regarding to the site I made.
I uploaded my project to github as well as surge. Any critics are welcomed.

Some of the things I am not sure when doing this project are:

  • When it comes to making website responsive, how do I choose what to use? Bootstrap or flexbox + media queries?

  • How do I know that my website is “finished” and it is ready to be shipped?

  • Simple site like this should take me how long to finish?

  • I only finished the front end part of this, when doing real work , is it my job to care about the back end side of things? Like how to handle all the data that people submitted?

Also I know this site is far from finished, I probably need to add more media queries and change the nav bar to make it looks right. Is this site usable in the real world? I just want to hear from people that are more experienced and hope that they can give me a score or something… 5 out of 10? 7 out of 10?

@P1xt @ksjazzguitar @kevcomedia @fentablar @megaboy101

This thread has yet to receive any replies… So I tagged you guys… All of you have been helping me (at least once) since I am here. I would like to hear what you guys think. The good the bad and the ugly, shoot to me straight, so I can learn and improve.

Hey,

Sorry, it’s just a little outside my ken. I’m better for the smaller stuff and the basic programming. I’m still learning the basics. When I respond to posts, it’s usually because either the topic interests me, because I had to solve a similar problem, or because it is a basic technical question of programming fundamentals (I used to program ages ago) and I field it so the gurus here can devote their time to tougher questions. But since you asked:

I have no idea how to make my nav bars elements responsive as theirs.

Well, it’s not clear what you mean. If you mean “when I zoom in (or view on a small screen” the navbar collapses into those three horizontal bars" then something similar can be accomplished with with Bootstrap collapsible navbars. See the last example on this page.

This is the html I pull off their page:

<body id="collection-535813a6e4b0c3ad7382ee7a" class="transparent-header  expand-homepage-index-links homepage-index-nav-show-on-scroll show-page-title index-section-separation-alternating-background design-slideshow grid-aspect-ratio-11-square grid-max-columns-four slideshow-aspect-ratio-169-widescreen slideshow-transition-fade slideshow-autoplay gallery-controls-both gallery-controls-color-light  meta-priority-date hide-entry-author  pre-footer-content-custom   show-category-navigation   event-show-past-events event-thumbnails event-thumbnail-size-32-standard event-date-label  event-list-show-cats event-list-date event-list-time event-list-address   event-icalgcal-links  event-excerpts  event-item-back-link    gallery-design-grid aspect-ratio-auto lightbox-style-dark gallery-navigation-bullets gallery-info-overlay-show-on-hover gallery-aspect-ratio-32-standard gallery-arrow-style-no-background gallery-transitions-fade gallery-show-arrows gallery-auto-crop   product-list-titles-under product-list-alignment-center product-item-size-11-square product-image-auto-crop product-gallery-size-11-square  show-product-price show-product-item-nav product-social-sharing newsletter-style-dark hide-opentable-icons opentable-style-dark small-button-style-solid small-button-shape-pill medium-button-style-outline medium-button-shape-rounded large-button-style-solid large-button-shape-square image-block-poster-text-alignment-center image-block-card-dynamic-font-sizing image-block-card-content-position-center image-block-card-text-alignment-left image-block-overlap-dynamic-font-sizing image-block-overlap-content-position-center image-block-overlap-text-alignment-left image-block-collage-dynamic-font-sizing image-block-collage-content-position-top image-block-collage-text-alignment-left image-block-stack-dynamic-font-sizing image-block-stack-text-alignment-left button-style-solid button-corner-style-pill tweak-product-quick-view-button-style-floating tweak-product-quick-view-button-position-bottom tweak-product-quick-view-lightbox-excerpt-display-truncate tweak-product-quick-view-lightbox-show-arrows tweak-product-quick-view-lightbox-show-close-button tweak-product-quick-view-lightbox-controls-weight-light native-currency-code-usd collection-535813a6e4b0c3ad7382ee7a collection-type-index collection-layout-default homepage view-list mobile-style-available has-banner-image index-page collection-welcome-pacific">
  <div id="site">
    <input type="checkbox" name="mobile-nav-toggle" id="mobileNavToggle" class="mobile-nav-toggle-box hidden"><div class="show-on-scroll-wrapper" id="showOnScrollWrapper"><label for="mobileNavToggle" class="mobile-nav-toggle-label show-on-scroll-mobile"><div class="top-bar"></div><div class="middle-bar"></div><div class="bottom-bar"></div></label></div>
    <div id="overlayNav">
      <div id="mobileNavWrapper" class="nav-wrapper">
        <nav id="mobileNavigation">
          <div class="index home">
            <a href="/#home-section">
              Home
            </a>
          </div>
          <div class="index home">
            <a href="/#who-we-are-section">
              Who We Are
            </a>
          </div>
          <div class="index home">
            <a href="/#what-we-do-section">
              What We Do
            </a>
          </div>
          <div class="index home">
            <a href="/#jobs-section">
              Jobs
            </a>
          </div>
          <div class="index home">
            <a href="/#contact-us-section">
              Contact Us
            </a>
          </div>
          <div class="index base">
            <a href="/">
              Welcome
            </a>
          </div>
          <div class="external">
            <a href="http://www.twitch.tv/team/n3rdfusion" target="_blank">
              Watch Us Live
            </a>
          </div>
        </nav>
      </div>
    </div>
    
    <-- YADA, YADA, YADA ... -->

When it comes to making website responsive, how do I choose what to use? Bootstrap or flexbox + media queries?

Sorry, I’ve only used bootstrap (still new to web design).

How do I know that my website is “finished” and it is ready to be shipped?

Your clone? Are you going to “ship” that? If you mean a contract build? I think it would be “done” when you’ve met the requirements, are happy with the results, and have tested it. Of course often with contract work (I’ve done this for music and writing) sometimes you need to account for one round of “no, I think we really wanted this…” and unexpected bugs. But I always put it into the contract that they only get one round of changes that don’t involve bugs.

Simple site like this should take me how long to finish?

Sorry, can’t answer that.

I only finished the front end part of this, when doing real work , is it my job to care about the back end side of things? Like how to handle all the data that people submitted?

If there is backend data, then maybe they’ll expect you to handle the backend. Or maybe they’ll have backend people that do that for you. I’m sure it depends.

Sorry, I can’t tell you more. I mainly help with the simple stuff.

1 Like

As far as the look goes, you pretty much have everything except the navbar, the large text in the center of the banner image, and the spacing/orientation of the “partner” logos.

For the questions you posed, I’ll give “in my opinion” answers, by no means am I an authority…

Regarding responsiveness, you should use what will work – if all you would be using bootstrap for is the responsive aspects, then bootstrap is probably overkill, imo. You don’t “have to” use flexbox for responsiveness either, but it can help to do so. The one thing you know you’ll need to use is media queries. If you want to try to replicate the navbar, it may help you to have your page inspection console up as you resize their site to see how the element attributes change based on the width – this could get you pointed in th right direction for how to flesh out what you put in the media queries.

You’ll know your website is “finished” when, at minimum, it meets the requirements for what the site is intended to provide, if the code is cleanly structured and adequately commented, and that it’s been tested to work on the likely platforms on which the site will be viewed/used.

I don’t actually have a good enough frame of reference to estimate how long a site like this “should” take, but I’d be surprised if anyone suggested it would take more than a day to do.

As for caring about the back end, well, obviously if it’s your job to manage the data submitted via the form then obviously you’d want to care about that. However you should still care about that even if it’s not, to the extent that whomever does manage the data will be reliant on how that data reaches the repository in which it’s stored. So there needs to be some logic in the naming of the fields that your form uses (not the names the user sees, the names the back end will see); added to whcih you’re going to have to know enough about the back end structure so you can properly tie your form’s submit button to it because your front-end responsibility will certainly be inclusive of that.

Hope this helps, looks like @ksjazzguitar has some good info for you as well…

1 Like

Thank you for your feedback!
I think it took you a lot of time to review the whole thing. Thanks! If you have any question you can always tag me, I’m still a beginner but I am glad to help!

I will try to do that… but right now I am yet to comprehend their code…