Code Cleanup, Responsive Images, Pop Up Images, Mobile Menu, InfintyFree & Advice!

[jessicaa53534387]

Hi all - apologies and thanks in advance for my long post and many questions!

I am fairly new to website creation, and have spent WAY too many hours troubleshooting my code and googling answers to no avail!

I am in need of some advice, and possible help with cleaning up my code. I haven't used a template, and I feel it is super messy with me trying to fix everything!

Questions and link:
http://rosesinhand21test.epizy.com/RIH21/

1. InfinityFree Server
- Somehow I always get this wrong, and the files aren't there correctly. You have to click the folder first?

- Pros/Cons on InfinityFree? I am trying to avoid costs as much as possible. 

2. Showing a different background-image for mobile and desktop. 
- I am trying to find the best way to replace an image on different devices, and haven't found the best way to do it correctly. Once I find a solution that looks good on one device, it messes up everything on the other device. 
- I have a horizontal image (the cartoon) for desktop, and a vertical version of the image for mobile. I have tried different <divs>, .background-image, #hide Media@mercycity.church etc... what is the best way to do this???

3. Pop Up Images, or Modal? Images 
- The image gallery currently opens the full image in a new tab. (I don't think infinityfree is allowing this with the test site?)
- I am wanting to click on an image, have the image 'pop up' enlarged, or zoomed, with the background semi-transparent where you can still see the gallery, and you click an 'x' to go back. If I can figure out how to have multiple images that you can click through with the pop up, that would be amazing too. 

- Again, I have found many codes trying to replicate a modal image gallery but have had no luck making it work correctly. 

3. Mobile Menu
This is probably bothering me the most, other than the cartoon images!
- Currently on mobile, you click the 'hamburger', and click a menu item to direct the user to that section. The only way to close the menu is to click the hamburger again. 
- How can you make the menu close automatically when you click a menu item? 

- Or alternatively, click anywhere on the screen?

4. Scrolling
- This probably has something to do with the background images width or being fixed - but every once in a while when I fix something, the mobile has white space or is scrolling all over the place (not in a straight line, in all directions and loses itself) - is there a cheat-sheet kind of thing to go to when that happens?

5. YouTube playlists? 
- Is there a way to have youtube playlists? Where the site will update the content based on what's in the playlist. I am trying to achieve a low-maintenance site where I don't have to update content regularly - the content updates itself based on social feeds etc.

6. Mailchimp popup, Facebook feed, Insta feed
- How can I make the mailchimp pop up look better? The code seems to be absolute. It looks so bland!

- Same with the facebook feed - it's very limited as to what I can do with it!
- The insta feed is through curator.io - I want to make the posts more responsive for mobile. Only 3 show up? How would I shrink gallery? - Or is there a better option for insta feeds?

7. Overall advice, constructive criticism, responsiveness. 

- I know there are still alot of issues, but I am starting to go crazy trying the same things over and over, hoping for a different result. 
- Any advice or criticism based on my goals for the website is much appreciated!!
- Code clean up advice? There's probably alot in there that doesn't need to be there. 
- I know the last image messed up too 😭

Thankyou again, 

Jess

[osgood_]

This is way too much to request in one thread and probably why you have received no responses to date.

2. Have a look at the below link to serve different images to different screen device widths:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

I've not really studied the other issues in depth apart from No.3 which has me thinking the way the menu structure is set up maybe it wont work. One option you could possibly explore is closing the drop-menu when the page scrolls to the specific section after the link is clicked.

Search 'Codepen' for modal gallery/galleries. There should be plenty of code examples.

No 5. I've not done this myself but I assume you could use the Youtube API and grab a specific channels playlist which should return it as a json file which you could use to loop through the data and show the videos on your page:

https://developers.google.com/youtube/v3/docs/playlists/list

Failing that you could build you own json playlist file, a bit more to manage though, but you can definitely streamline the process by learning some javascript which will enable you to loop through a json file of data or even an array of javascript objects which could be used to quickly compile a playlist on your website, without having to add addition code each time.

[osgood_]

OK the 'cheap nasty' solution to resolve No3. - closing your mobile menu when scrolling to a section is to add the onclick="myFunction()" to the links:

<nav>
<div class="topnav" id="myTopnav">

<a href="#about" class="menu" onclick="myFunction()">ABOUT</a>
<a href="#videos" class="menu" onclick="myFunction()">VIDEOS</a>
<a href="#music" class="menu" onclick="myFunction()">MUSIC</a>
<a href="#merch" class="menu" onclick="myFunction()">MERCH</a>
<a href="#images" class="menu" onclick="myFunction()">IMAGES</a>
<a href="#socials" class="menu" onclick="myFunction()">SOCIALS</a>
<a href="#contact" class="menu" onclick="myFunction()">CONTACT</a>
<a href="javascript&colon;void(0);" class="hamburger" onclick="myFunction()" >

<i class="fa fa-bars"></i>
</a>
</div>
</nav>

The slightly more elegant way is to re-write the javascipt:

<script>
const navLinks = document.querySelectorAll('.topnav a');
navLinks.forEach(function(navLink) {
navLink.onclick = function() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
});
</script>

Then you can remove the onclick="myFunction()" from the hamburger html:

<a href="javascript&colon;void(0);" class="hamburger" onclick="myFunction()" >

Plus you wont need the below any longer as the new script will work both for the hamburger and the links:

<script> 
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

[jessicaa53534387]

I'll try that, thankyou for the help! 

I started studying the basics of JS, trying to figure out how to target the different elements. I'll definitely continue learning this. 

[jessicaa53534387]

Thankyou for the response. I realise I should have broken this up into different posts!

Codepen is amazing. I'm constantly looking at other's pens, and still haven't gotten the modal correct for some reason. 

I love the idea for the menu - I'll look into that, thankyou. 

[Nancy OShea]

Hi @jessicaa53534387,

I think it's fair to say there's too much you don't know.  What's your projected completion date -- 6 months, 12 months?  If you need this fast, hire an experienced developer who can do it right the first time.  If you haven't the budget for a developer and reliable hosting services, consider using an online website builder like Squarespace, Webflow or Wix.  It won't be free and there is a learning curve but not nearly as steep as trying to do it all from scratch.

Another option to consider is Adobe Portfolio which comes free with your paid Creative Cloud plan.  You can have up to 5 Portfolio sites, freely hosted on Adobe's servers.  The built-in image viewer is a Lightbox modal.  And no coding skills required.

https://portfolio.adobe.com/

Portfolio Photo Grid

https://help.myportfolio.com/hc/en-us/articles/360035920114-Photo-Grid-module

Portfolio Lightbox Viewer

https://help.myportfolio.com/hc/en-us/articles/360038427913-Enabling-disabling-Lightbox-for-images

Portfolio Embed code from YouTube, MailChimp, Twitter, etc...

https://help.myportfolio.com/hc/en-us/articles/360036483773-Embed-module

Good luck!

[osgood_]

I think it's fair to say there's too much you don't know.

???? It's not a bad attempt, a bit messy here and there but there's plenty of functionality going on. Could easily be sorted out in terms of a few of the less complex solutions that the OP asked for - 2 and 3 (the issue with the sub-menu on mobile devices not disappearing onclick) now have solutions.

Everyone has to start somewhere and you only get better with much practice and the desire to succeed. I think thats better than just using a pre-built solution if one finds building their own website, without too many dependancies, is something they enjoy.

[Nancy OShea]

I think it's fair to say that Jess is a musical talent, not a web developer.  It takes years to cultivate the skills necessary to play piano.  And learning web development is no different.  That said...

#5 Google owns YouTube.  To pull in a YouTube Playlist / Channel, use the Google API.

https://developers.google.com/youtube/v3/docs/playlists/list

#6 Facebook Developers Site

https://developers.facebook.com/docs/plugins/page-plugin/

#6a MailChimp Add Signup Form to your Website (style the form on Mailchimp before you export the code).

https://mailchimp.com/help/add-a-signup-form-to-your-website/

#6b InstaFeed JS Documentation

https://instafeedjs.com/#/

Also the extra vertical scrollbars are hideous.

DELETE THIS from the CSS.

body, html {overflow:hidden}

[jessicaa53534387]

@osgood_  thankyou for the response. 

I know it's definitely messy! The ideas are there, so let's call it a draft haha. 
I definitely would love to have a design that I know I worked hard on to achieve. 

I've used many pre-build sites such as Wix, and find alot of issues or roadblocks, where it is limited. 
I've always known a bit fo HTML, and during lockdown decided to do my SOA in HTML and CSS to learn more and understand how to overcome those roadblocks. 
Considering I completed that in October, I think I'm doing okay, and am keen to learn more. 

I love to ask alot of questions to fully understand concepts, but unfortunately don't have anybody in the field to ask! 

I will definitely keep trying and learning. I enjoy the satisfaction in completing a project myself, and knowing I worked hard to achieve it. 

[jessicaa53534387]

Hi @Nancy OShea, 

Thankyou for taking the time to respond. 

I'm still fairly new, and unfortunately don't have other people to ask the questions. I'm very interested in building this skill!

I've used Wix and Wordpress previously. Wix was costing $60+ a month, and due to covid and loss of income, I unfortunately had to cut costs. 

I've been looking at templates for Dreamweaver, and decided to try and do it myself - this is my first attempt. 

I am still learning, and keen on building this skill. I understand there is still alot I need to learn! From completing a SOA in CSS in October, I think I'm doing okay - it just helps having the resources to ask questions! Unfortunately I don't have anybody to ask the questions. 

Again, this is a first attempt and I will probably go to a template and customise that now, however I will definitely look into Adobe Portfolio, thankyou for the suggestion!

I appreciate the time you've taken to help and give suggestions. I am primarily a performing musician, but I love anything creative. I enjoy learning new skills to help with all aspects of my career. I am quite enjoying learning to code, and agree there is ALOT to learn. 

I've taken every suggestion and will definitely address and use each of them. 

(Note taken - don't use overflow:hidden on body)