Welcome to Mobilarian Forum - Official Symbianize forum.

[oaxino]

​

Last updated 8/2021
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 918.80 MB | Duration: 1h 29m

Learn to create a responsive image gallery with lightbox​

What you'll learn
Create An Image Gallery
Work with Images
Work with Arrays in JavaScript
Use CSS Grid
Requirements
Basics of HTML, CSS & JavaScript
A computer that can run a code editor (eg. VS Code)
Description
Hi, welcome to my course. This course will help you teach you how an image gallery is created. We will create a Responsive Image Gallery from scratch using HTML, CSS, and JavaScript.In modern websites, we can see that image galleries are used a lot. There are a lot of JavaScript libraries that help you create an image gallery. It is not a bad thing to use those libraries in your website. But the main aim of this course is to help you understand how an image gallery works. So, creating it from scratch will help you become a better programmer.Here are the prerequisites for this course:Basics of HTML, CSS, & JavaScriptA Computer that can run a code editor (Eg. VS Code)What will you learn:How to create an image galleryHow to use CSS GridHow to manipulate DOM using JavaScriptHow to deploy a website onlineWe will write all the code on-screen. There won't be any code copied and pasted from anywhere. I will also try to explain everything that we write. I will provide the source code as a downloadable resource. So, if you are stuck, you can check that out. By the end of the course, if you follow along with me, you will have created a responsive image gallery from scratch.So, if you are interested in improving your web development/coding skills, then you can join me in this course. I hope you will learn a lot in this course.Happy coding!
Overview
Section 1: Introduction
Lecture 1 Introduction To The Course
Lecture 2 Course Structure
Section 2: Working With Images on Websites
Lecture 3 How To Optimize and Resize Images
Lecture 4 Create A Loading Screen Using Canva
Section 3: CSS Grid - The Basics
Lecture 5 CSS Grid - The Basics
Section 4: The Design
Lecture 6 Setting Up The Project
Lecture 7 Writing The HTML
Lecture 8 CSS for The Image Grid
Lecture 9 CSS for The Lightbox
Lecture 10 Making It Responsive
Section 5: JavaScript Basics
Lecture 11 Manipulating The DOM
Lecture 12 Arrays In JavaScript
Section 6: Functionality Of The Image Gallery
Lecture 13 Populate Images In The Image Grid
Lecture 14 Displaying The Lightbox
Lecture 15 The Next & Previous Buttons
Section 7: Conclusion
Lecture 16 Test & Deploy Website
Lecture 17 Conclusion
Beginner/Intermediate Web Designers

Download link

rapidgator.net:

uploadgig.com:

nitroflare.com:

1dl.net:

 

[KatzSec DevOps]

oaxino salamat sa pag contribute. Next time always upload your files sa

Please, Log in or Register to view URLs content!

para siguradong di ma dedeadlink. Let's keep on sharing to keep our community running for good. This community is built for you and everyone to share freely. Let's invite more contributors para mabalik natin sigla ng Mobilarian at tuloy ang puyatan.