Project 1
Learned & used concepts of fundamental HTML and CSS rules
-HTML: Semantic HTML tags, Attributes, and Elements
-CSS: Box Model, Selectors, Properties, Media Queries, Animations, Grid Layout
From NY Public Library Front-end Web Class (Online): Phase 1
Project 2 (Code): Link
Learned & applied basic JavaScript syntax to enhance HTML elements styled with CSS
-JavaScript: Data types, Operators, Objects
Conditions, Loops, Functions, DOM Manipulation, Event Handler, CRUD Operations
Project 2: Link
(Header & Navigation bar)
Learned & applied JavaScript animation techniques to create dynamic and interactive web elements
-Hamburger menu, Media Queries, Drop-down Menu
-JavaScript: Fade-in Animation, Hide & Appear Elements, Responsive Scroll View Effects
Before:
Deficiencies Identified
- Drop down item alignment
- Inconsistent link names between desktop and mobile versions for the "Web & App Development" dropdown item
After:
Improvements
- Alignment: margin-left: auto; to align dropdown items
- Corrected the link name to be consistent across all media queries
- Size: font size increased
Before:
Deficiencies Identified
- Small font size
- Difficulty recognizing buttons
After:
Improvements
- Size: Font size increased
- Anmation: Added transition & transform animations to buttons
Before (Desktop view):
Deficiencies Identified
- Alignment & Positioning issues: Difficut to see from desktop view
- Cropped image angle: Figure is not fully visible
After (Desktop view):
Improvements
- Alignment: Used a 2-column, 2-row grid template
- Size and shape: Ensured consistent width and height for each photo
Before (Mobile view):
Deficiencies Identified
- Alignment & position: difficut to see from Mobile view
- Figure not fully visible
After (Mobile view):
Improvements
- Alignment: Displayed elements as block elements
- Size and shape: Ensured consistent size and full visibility of the figure
Before:
Deficiencies Identified
- Alignment: Inconsistent picture positioning
- Size: Inconsistent picture width
After:
Improvements
- Alignment: Used a 2-column, 2-row grid template
- Size and shpae: Unified the width of each banner
Before:
Deficiencies Identified
- Alignment & position: Picture and phrase alignment issues
After:
Improvements
- Alignment: Centered text alignment
- Size: Increased the width of each picture
Project 2 (Footer): Link
Learned & Used advanced CSS techniques
-HTML & CSS: Advanced Grid Properties, Icon Implementation
Before (Mobile view):
Deficiencies Identified
- Alignment & Positioning: Button and content visibility issues
After (Mobile view):
Improvements
- Size: Increased the width of each picture and content grid
- Project 3: Portfolio Web Site -
Portfolio 3 (Home page)
Learned & Applied JavaScript animation techniques and various methods for displaying elements on screen
-JavaScript: Animations, Event Handler
-HTML: Embeded HTML Tags, URL Parameters
From NY Public Library Front-end Web Class (Online): Phase 2
Portfolio 3 (Projects page)
Learned & Applied JavaScript animation techniques
-JavaScript: Advanced JavaScript Animations - including fade-in & slide-in effects,
Responsive Scroll View Effects
From NY Public Library Front-end Web Class (Online): Phase 2
Portfolio 3
(Other pages & Overall)
Learned & Applied JavaScript animation techniques and various methods for displaying elements on screen
-CSS: Applied Analogous Color Palette, Rise Animation
From NY Public Library Front-end Web Class (Online): Phase 2
- Project 4: Android Studio Application -
Project 4 (Distance Converter)
Learned & Applied: Android Studio, Java, XML, Gradle
-XML: ConstraintLayout, Buttons, Input Field
-Java: Conditional Methods, OnClick Method
From DePaul University CSC372
- Project 5: Android Studio Application -
Project 5 (Note Pad)
Learned & Applied: Android Studio, Java, XML, Gradle
-XML: Options Menu, RecycleView
-Activity: Activity Lifecycle, Multiple-Activity Applications
-Java: Click Listeners, Button Events
From DePaul University CSC372
After: Saved
Long-click: Delete
- Project 6: Android Studio Application -
Project 6 (Know Your Government)
Learned & Applied: Android Studio, Java, XML
-XML: Images, Making Launcher Icons, ScrollView
-Activity: Activity Lifecycle, Multiple-Activity Applications
-Java: Web Browser Implicit Intent, Network Status Check, TextView Links & Linkify,
Locations & Location Permissions, Geocoder
From DePaul University CSC372
Enter Location
Loaded Information
Information Page
Link Icons