-
Notifications
You must be signed in to change notification settings - Fork 0
/
processNotes.txt
56 lines (38 loc) · 2.31 KB
/
processNotes.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
JavaScript Gallery Process Notes
================================
Study Objective:
==================
The objective of this study is to build good looking and working image gallery. The gallery
itself should have a main image on top (the focused image) and smaller images at the bottom (3+).
Phase 1: Project Setup:
=======================
1. Create HTML, CSS, and JavaScript files.
2. Get the pictures for your project (make sure you have LARGE and SMALL pictures).
Phase 2: Layout the HTML structure of the Gallery:
=================================================
* In the cas eof this study, we will have:
2.1: A "section" section that will contain all the divs we would want for the project (perhaps even multiple galleries)
2.2: A "city-description" div that will contain thedescription for our city gallery.
2.3: A "city-gallery" div that will contain the images for our city gallery.
2.3: A "gallery-highlight" classed image with a Large picture you want to show up first (this will switched when we add JS to it).
2.4: A "gallery-preview" div section with the images of the smaller pictures in your gallery (we have 3 for this study).
-------------------------------------------------------------------------------------------------------------------
<section>
<div class="city-description"> <!-- Section for title of study-->
<h1>Gallery Study</h1>
</div>
<div class="city-gallery">
<img src="./images/Blue-City-Large.jpg" class="gallery-highlight" alt=""> <!-- Main large image -->
<div class="gallery-preview"> <!-- div containing the smaller preview images in the gallery -->
<img src="./images/Blue-City-Small.jpg" alt="">
<img src="./images/Dark-City-Small.jpg" alt="">
<img src="./images/Light-City-Small.jpg" alt="">
</div>
</div>
</section>
-------------------------------------------------------------------------------------------------------------------
Phase 3: Create the initial styling for the project
=====================================================
* See css file
Phase 4: Add JavaScript
=======================