Continue building on the photo gallery we demoed how to make in our previous learning session! Add any new features and make the UI look better. Feel free to spin it off into anything you want, whether a photographer’s photo gallery portfolio or a meme generator! Some suggestions of what else you can add are provided below.
- This Session's Slides
- Modal Popup Live Demo Code
- Github Classroom Repository
- Bootstrap + JS: Review + Code Snippets
- Mentor Voting Form
- Current Functionality:
- Selecting images with JavaScript and showing a preview image
- Additional Functionality:
- Make site responsive/mobile friendly
- Include a navbar with Bootstrap
- Change preview panel to popover / modal
- hiding by clicking outside or on a close x button
- Implement an image carousel
- Implement a slideshow
- dynamically change image in preview every second
- Implement a meme generator
- Includes caption editor, photo selection from thumbnails, and dynamic text reposition/sizing
- How to make a website responsive and mobile friendly
- How to incorporate animation and invoke dynamic DOM manipulation actions
- How to use jQuery
- How to dynamically change the style of an HTML element with CSS classes and JS
- Install Git at:
- Create a Github account at https://github.com/
- Go to https://classroom.github.com/a/f1MuUT0t to create a new project repository in Github
- Make a new folder where you want to keep all your code.
- Navigate to that folder in Command Prompt or Terminal.
- Run
cd <directory-name>
- Run
- Run
git clone <git-web-url>to copy the code down to your laptop. - Start hacking!
- Brainstorm what views you’ll need and mock out what your application will look like before starting to build it
- Focus on implementing core functionalities first before making things look nice
- Helpful Resources:
- Grids + JS Slides
- Demo code repo
- Includes links to all our other course resources and code!
- Bootstrap and JS cheat sheet
- HTML/CSS Review