Check out the Jsfiddle and the original page and tell me what you think . TY
Hi gautanz07,
I think that's a lot of code for very little effect.
To be honest that's a complex example for what is essentially a simple image viewer. It uses libraries, plugins, front-ends and who knows what else for what could easily done in just HTML5 and CSS3.
I don't know how experienced you are in writing this kind of stuff so pardon me if I'm speaking out of turn, but starting with the basics, HTML, CSS and JS (And possibly PHP) and learning those first is always going to be better than trying to decipher someone elses minimized js code.....from which you'll learn nothing.
If you know the basics, something like this gallery would seem very easy to you.....a few images displayed when the page loads, a little CSS for the rollover and some JS to expand and close the pop-up window.
Front-end code like bootstrap is fine if that's what you are going to use, learn it and use it, but as they state on their site it cannot be used with other code so if you use it you could find yourself limited as to what you can do.
How are you testing your code whilst learning? (JSfiddle is fine for a quick fiddle but not developing)
Do you have on-line web hosting?
Are you running your own server like Apache or XAMPP?
If none of the above I suggest XAMPP. It sets everything up for you. You write your HTML docs in whatever text editor you choose (I recommend Notepad++), save them to the appropriate folder(s) and access them through your browser. If you have a second machine its even better to set that up as the server and access it from your normal PC....this will give you a better idea of whether your code will work once uploaded to a real web server to be viewed online.
XAMPP also comes with many examples (or at least it did when I used it), which give you a very clear insite into what goes on with the different languages and how everything talks to each other....which sounds as if that's what you want.
Web building can be, and usually ends up being, very complex....once you start learning new things you keep adding little features here and there until you have something quite involved...but the good thing about doing it yourself instead of using libraries and front-ends is that you know exactly how it all works...because you wrote it!
A small image gallery like this is ideal to start learning the basics but do it from scratch, in small steps, with your own code....find out how to:
1. Display images on the page. (HTML)
2. Set the layout of those images. (CSS)
3. Do that 'rollover' effect. (CSS or JS)
4. Expand the image to full size. (CSS or JS)
5. Center that expanded image on the screen or browser window. (CSS or JS)
6. Style the expanded window and put the 'close' icon on it. (CSS or JS)
7. Make the 'close' button close the image. (HTML or JS)
If you break down a project its easy to get 'snippets' of code and slowly build up your page. At each stage you can run it through your server to see how it looks...and adjust if necessary.
Once you get into it you'll learn it fairly quickly, HTML5 and CSS3 are making it easier all the time by shortening the code and making it more 'readable' and logical.....take the HTML5 document declaration for instance....how short?
Seriously, start from the bottom. Get to know HTML5, CSS3, JS and if you set up your own server PHP too. (You'll need to for PHP as its 'server side' code...it doesn't run in your browser like JS).
Above all, have fun....but stay away from complex libraries and 'do-it-all' front-ends whilst learning.
Regards.
MrTom.