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.