Schedule
Week 1 Introduction
- Back end web
- GitHub
- HTML/CSS Review
- Assignment: Website breakdown
- Find a website that requires a login
- Use screen shots to capture
- the process of registering and logging into the site
- creating a user profile
- adding information to the site
- displaying information
- social interactions
- Make a simple HTML page with images and descriptions of the process
Week 2 JavaScript
Week 3 Typography
- Typographic Hierarchy
- Assignment: Typographic Hierarchy
- Create 3 separate font pairings
- Apply font rules to posts as well as other template content
- Include media queries for responsive typography
- Add three stylesheets starting with
typography-1.css
Week 4 Functions
- Firebase Publish/Display
- DOM & Events
- Functions
- Assignment: Style posts and post input
- Use JavaScript to create the structure for each post, including the post text, author and date
- Create
post.css to add styles to each post
- Create
publish.css to add styles to the post interface
- Add styles for the individual posts and publish section
Week 5 Color
- CSS Custom Properties
- Calculating Color
- Assignment: Color Scheme
- Create a
color.css page
- Choose a color scheme (complementary, triad, monochromatic, analogous, or combination)
- Use one color as main color
- Use CSS custom properties to define two to four other colors
- Implement those colors for the text, buttons, links, and at least one background
- Create three color schemes in the page using the save custom variable names
Week 6 Database
- Data types
- Logic
- Firebase Database
- Assignment: User Profile
- Choose two new fields for users to add to their profile
- For example: link, email, social media handle, location,
- Add an input on
profile.html for the user email and a link
- Save the email address and link in the database
- Display the email address and link on the profile page
Week 7 Grid
- Grid Systems
- CSS Grid
- Assignment: Layout
- Use
style.css to import style sheets
- Create
layout-1.css, layout-2.css and layout-3.css inside css/ folder
- Use CSS grid rules, either with columns and rows or template areas, to implement three different possibilities for the website grid
- Choose the best version and make a copy as
layout.css
Week 8 Storage
- Firebase Storage
- Assignment: Add Images to Posts
- On
index.html, add input for the user to include an image with their post
- Add the image to storage
- Save the image URL as part of the post
- Retrieve the image from storage with the URL from the database
- Display image with posts
Week 9 Responsive Design
- Flex box
- Responsive Layouts
- Responsive Typography
- Assignment: Responsive CSS
- Add responsive layouts for mobile and tablet to the
responsive.css stylesheet
- Use media queries to update grid for mobile and tablet display
- Use Chrome mobile emulator for development/testing
- Add a
menu.css file using flex box
- Add a
create.css with flex box for the create user section
- Media queries should also update flex box rules
Week 10 Query
- Database query
- User and post pages
Midterm
- Pitch for the final project
- Create a concept for you web application
- Some examples:
- A forum for posting about a video game or another interest/hobby
- A social network (something like instagram would focus on images, something like Twitter focuses more on text)
- Site focused on user profiles and content (like LinkedIn or Pinterest)
- Make a Google Presentation (or Power Point if you prefer)
- Include
- Name of the site
- Once sentence description of the service
- Target audience
- “Problem” - what need does the app fill
- “Solution” - how the app fills the need
- Design and how it relates to the concept
- Color scheme
- Site layout
- Typographic hierarchy
Final
- Check rubric on Blackboard
- Design/CSS
- Layout with Grid
- Responsive
- Typographic Hierarchy
- Color Scheme
- Firebase
- Authentication
- Users post to database
- Display users posts and profile
- Storage for image or media content
- HTML/CSS/JavaScript Syntax