T4G Cohort 4 Dashboard

Lesson 1: Overview

This lesson introduces you to the concept of design in Web development, it's importance and tools that you can use for real-world projects.

Tasks:
1. 1. Understand the objectives of UI UX
2. 2. Explore What and how to do a wireframe.
3. 3. Discuss creating your sitemap(wireframe) and its relevance
4. 4. Create a sitemap for a typical Home Page
5. 5. Create a sitemap for a typical Responsive Home Page
6. 6. Create a sitemap for a typical Feature Page
7. 7. Create a sitemap for a typical Responsive Feature Page
8. 8. Create a sitemap for a typical Contact Us Page
9. 9. Create a sitemap for a typical Responsive Contact Us Page
Take Home Challenge
1. Using Pen / pencil and sketch paper OR concepts application,
2. Choose an industry/ company you would like to build a website for
3. A. Create a wireframe for their Home Page
4. B. Create a wireframe for one other Page
5. C. Do responsive design for both pages
6. Send screenshots in the submission link below 👇🏾
Lesson 2: Overview

This lesson covers how to create a design for a software product using professional applications like Figma.

Tasks
1. 1. Introduction to design tools - Figma.
2. 2. Understand the importance of using a design tool like Figma.
3. 3. Create a Figma account.
4. 4. Walk through on Figma and how to use the tools for design.
5. 5. Transform the previous class' Home Page wireframe to a Figma design.
6. 6. Transform the previous class' Feature Page wireframe to a Figma design.
7. 7. Transform the previous class' Contact Us Page wireframe to a Figma design.
Take Home Challenge
1. Using Figma,
2. A. Convert the wireframe for the previous assignment's Home Page into the UI layout
3. B. Afterwards, convert the UI layout into a mock up file
4. This is a picture of an example of a home page's UI layout
6. This is a picture of an example of a home page's mock up
8. C. If you are feeling ambitious or want more practise, convert the wireframe for the responsive design of the home page as well as the other pages.
9. Invite me as a collaborator on the design file and share the link here with me👇🏾
10. Note: This is the 2nd homework on the Google Forms
Lesson 3: Overview

This lesson introduces you to Web development, abbreviations, extentions, file and folder structure, installation of Web development tools, and signing up for cloud and hosting applications

Tasks:
1. 1. Download and install IDE (VSCode).
2. 2. Download and install Git.
3. 3. Sign up for GitHub.
4. 4. Create a T4G folder on the Desktop.
5. 5. Create 6 folders inside the T4G folder (lesson1 to lesson6).
6. 6. Create folders inside each lesson's folder: pages folder, src folder and images folder
7. 7. Create different files with different file extensions: index.html file, style.css
8. 8. Using the Doctype shortcut, Learn the structure of an HTML file and open it in the browser.
9. 9. Create a GitHub Repository for lesson1 & lesson2
10. 10. Push lesson1 and lesson2 folders to GitHub
11. 11. Change the title of the index.html file of lesson1 and lesson2 and push changes to GitHub
Take Home Challenge
1. Create 3 folders in your T4G folder namely:
2. A. homework1
3. B. homework2
4. C. homework3
5. Inside each of the 3 folders, the basic folder structure to include:
6. A. a pages folder - each should contain:
  - i. an about us file
  - ii. a contact us file
7. B. an src folder - each should contain:
  - i. a style.css file
  - ii. an index.js file
8. C. an images folder
9. D. an index.html file.
10. Create 3 repositories on GitHub for these 3 folders and push your files on there.
11. Deploy each Repository using GitHub pages
Lesson 4: Overview

This lesson covers the syntax for writing HTML code and how it creates the layout of every webpage in a website. It also touches using git commands to push code on GitHub and deployment.

Tasks
1. 1. Learn the syntax of HTML.
2. 2. Create 6 headings using the six different heading tags.
3. 3. Create paragraphs using p tags and break a paragraph using the break tag.
4. 4. Inside the p elements use bold tags, italics tag, underline tag, etc.
5. 6. View History or Status of files using "git status"
6. 7. Stage changes for a specific file using "git add --filename--" or stage all changes in the current folder/directory using "git add ."
7. 8. Commit staged changes with a descriptive message using "git commit -m"Message" "
8. 9. Push local changes to the remote repository using "git push".
9. 10. View the remote URLs linked to your repository using "git remote -v".
Take Home Challenge
1. Using the homework1 folder, create a web page like this
Lesson 5: Overview

This lesson covers the syntax for writing more HTML code and understanding block and inline elements. It also touches on attributes for HTML elements.

Tasks
1. 1. Create a line using horizontal rule tag.
2. 2. Create an ordered and an unordered list.
3. 3. Add 3 images to your webpage and use alt attributes.
4. 4. Use div(block) and span(inline) elements
5. 5. Create a button.
6. 6. Use Devtools to inspect the webpage.
Take Home Challenge
1. Using the homework2 folder, create a web page like this
Lesson 6: Overview

This lesson covers absolute and relative URLs using the anchor tags.

Tasks
1. 1. Talk about Absolute URLs and Relative URLs.
2. 2. Create a few anchor tags pointing to different links.
3. 3. Add the optional attribute called target.
4. 4. Create a navigation with 4 list items each having an anchor tag in them.
5. 5. Create 4 button elements with anchor tags in them.
6. 6. Write a paragraph that has a link in there.
7. 7. Show how the anchor tag can link to different webpages in the same website.
8. 8. Create a button.
9. 9. Use Devtools to inspect the webpage.
Take Home Challenge
1. Using the homework3 folder, create your first 🥳 website like this
Lesson 7: Overview

This lesson covers how to create a form using the form, input, label and textarea elements. We will also touch on Semantics (section, nav, footer, div, article, header etc) and also how to use font awesome icons

Tasks
1. 1. Create a form using the form tag.
2. 2. Create a label tag.
3. 3. Learn about and put different input elements into the form tag with the placeholder attributes.
4. 4. Talk about SEMANTICS. Briefly touch on sections, nav, article etc.
5. 5. Sign up for Font awesome.
6. 6. Learn how to embed kit in html file.
7. 7. Practise including icons in your footer or navigation or button elements.
8. 8. Adding emojis to your webpage using the shortcut (windows + .)
Take Home Challenge
1. Enhance your previously developed website (in the homework3 folder) to include a form, font awesome icons and emojis like this
Lesson 8: Overview

This lesson covers Cascading Stylesheet - the various methods of styling (inline, embedded and external), CSS syntax, property-value pairs and CSS selectors.

Tasks
1. 1. Learn how to use inline CSS. Use style="" as an attribute inside the element
2. 2. Learn how to use embedded CSS. Use style tags / elements inside the head element
3. 3. Learn the syntax of Embedded CSS and external CSS
  - i. CSS selectors
  - ii. curly braces
  - iii. property-value pairs
  - iv. terminator ;
4. 4. Learn about Typography, the art of arranging text on a page. Use these properties:
  - i. font-family
  - ii. font-size
  - iii. font-weight
  - iv. font-style
  - v. text-transform
  - vi. letter-spacing(px)
  - vii. line-height
  - viii.text-align
5. 5. Linking to an external CSS file.
6. 6. Learn about CSS selectors - classes and ids.
7. 7. Learn about Visual Rules. Use these properties:
  - i. color (foreground)
  - ii. background-color
  - iii. opacity (fully visible:0 - 1:fully visible or opaque)
  - iv. background-image
8. 8. Learn about Box model. Use these properties:
  - i. width
  - ii. height
  - iii. border (width | style | color)
  - iv. border radius (% or px )
  - v. padding & padding shorthand(4 | 3 | 2 values)
  - vi. margin & margin shorthand(4 | 3 | 2 values)
  - vii. overflow
  - viii.Resetting Defaults
9. 9. Use Devtools to inspect the webpage.
Take Home Challenge
1. Enhance your previously developed website (in the homework2 folder) to include external styling to look like this
Lesson 9: Overview

This lesson covers Responsive Design using Flexbox to arrange content on a webpage.

Tasks
1. 1.Learn about Flexbox Use these properties:
2. 2. Practise using CSS selectors - classes and ids.
3. 3. Learn pseudo-classes. Use this properties:
  - i. :hover
4. 4. Use Devtools to inspect the webpage.
5. 5. Linking to different sections on the same webpage using ids.
6. 6. Group work: Create a landing page similar to this
Take Home Challenge
1. Using the homework4 folder, create a web page like this
Mini Project: Project Overview

This project aims to design and develop a comprehensive website using Figma and HTML/CSS. The website will consist of at least 7 webpages, incorporating Font Awesome icons for enhanced visual appeal. The final code will be pushed to a GitHub repository named "T4G_Project" .

PART 1 - Design Phase
1. 1. Understand the Requirements*:
1. 2. Create Wireframes (optional):
1. 3. Design the UI*:
PART 2 - Development Phase
1. 1. GitHub & VSCode*:
1. 2. HTML (Layout)*:
2. ⭐️ Create the HTML Structure:
1. 3. CSS (styling) *:
2. ⭐️ Style the Website with CSS:
1. 4. Integrate Font Awesome Icons: *:
1. 5. Test and Debug *:
1. 6. Push to GitHub: *:
Overall ladies, have a lot of fun 😍 and we will be here to help every step of the way 🙌🏾 💪🏾 🎉
Lesson 10: Overview

This lesson covers the syntax for writing JS code and using common JavaScript functions. It also introduces us to variables, string concatenation and interpolation.

Tasks
1. 1. Introduce JS Code in HTML file.
2. 2. Introduce linking to an external JS file.
3. 3. Use the alert function to alert "Hello World".
4. 4. Introduce Variables (declaring and initializing variables).
5. 5. Take input from the user using the prompt function.
6. 6. Store the input in a variable.
7. 7. Alert the user's input to the screen.
8. 8. Learn how to concatenate strings vs interpolate strings using template literals (backticks).
9. 9. Commenting in JS ==> Use shortcut (Ctrl + /) or simply type // infront of the line of code.
Take Home Challenge
1. Using homework5 folder, create a homepage that prompts the user for their:
2. A. name,
3. B. age,
4. C. and email.
5. D. Afterwards, alert the information received from the user to the screen like this:
  Hi (name), you are (age)years old and we will keep in touch via your email: (email) 👋🏾 👋🏾
Lesson 11: Overview

This lesson introduces us to how data in JS is stored and manipulated. We will explore a browser developer tool (console) that allows one to interact with JS code what the console is and how to use the console.log function as well as other built-in functions.

Tasks
1. 1. What are DataTypes in JS?
  - i. String
  - ii. Number
  - iii.Boolean
  - iv. Null
  - v. etc
2. 2. Explain what the console is and use the console to explain datatypes using the typeof function.
  - i. Log output: Print messages, variables, and other information to the console.
  - ii. Debug code: Step through your code line by line and inspect variables.
  - iii.Test code snippets: Quickly test small pieces of code without affecting the rest of your application.
  - iv. Interact with the browser's DOM: Manipulate elements on the page.
3. 3. Perform simple calculations using the console.
4. 4. Use the console.log function.
5. 5. Practise using string interpolation to log to the console from VS Code.
Take Home Challenge
1. Using homework6 folder, and in the JS file:
2. A. Store your name inside a variable and log it to the console.
3. B. Store your age inside a variable and log it to the console.
4. C. Add two numbers and store it in a variable and log it to the console.
5. D. Subtract two numbers and store it in a variable and log it to the console.
6. E. Divide two numbers and store it in a variable and log it to the console.
7. F. Multiply two numbers and store it in a variable and log it to the console.
8. G. Find the remainder of 15%4 and store it in a variable and log it to the console.
9. H. Store a boolean value inside a variable and log it to the console.
10. I. Set the value of a variable to number and log the type of data it is to the console.
11. J. Set the value of a variable to a string and log the type of data it is to the console.

Lesson 12: Overview

This lesson covers making decisions using logical operators, determining the order in which code is executed using Control flow Diagrams and creating complex algorithms using If Else Statements.

Tasks

1. What are logical operators? Check out W3Schools
2. What are Comparison Operators? Check out W3Schools
3. Explain conditions using Control Flow diagrams.
4. Learn syntax for writing if else statements.
5. Learn the shorthand (Switch Statements) for writing lengthy if-else statements. (optional)
6. Keep practising how to use string interpolation to alert to the screen.

Take Home Challenge

Using homework7 folder, Create a basic page that prompts the user for their:
A. name ,
B. age,
C. and email.
D. Afterwards, write conditions for the table below and alert the appropriate response to the screen

No.	Condition	Alert:
1.	if the user is less than 12 years old	Hi (username), you are (age) years old and you are too young to register. Sorry 😔😔
2.	if the user is between 12 and 18 years old,	Hi (username), you are (age) years old and you have limited options to register for. We will keep in touch via your email: (email) 👋🏾👋🏾.
3.	if the user is 18 years old and above,	Hi (username), you are (age) years old and you can register for any option of your choosing. We will keep in touch via your email:(email) 👋🏾👋🏾

E. Draw a control flow diagram for the above and send screenshot.

Lesson 13: Overview

This lesson covers the syntax for creating Functions in JS code, it's essence as well as how to call a function for use during the execution of a program.

Tasks
1. 1. What are Functions?
  A function is a reusable block of code that groups together a sequence of statements to perform a specific task.
2. 2. What is the purpose of JS functions?
3. ⭐️ With functions you can reuse code.
4. ⭐️ You can write code that can be used many times.
5. ⭐️ You can use the same code with different arguments, to produce different results.
6. 3. What is the syntax for creating a Function? (Function keyword, Function name, parameters, statements/expressions).
7. 4. Calling a function.
8. 5. Create a function that checks a users age and gives them personalized messages based on their age range.
Take Home Challenge
1. Using homework8 folder,
2. A. Create a function that checks the gender of the user
3. B. In that function, prompt a user for their gender: Male or Female
4. C. If the user is a female, alert this to the screen: "You are a girl!👧🏽"
5. D. If the user is a male, alert this to the screen: "You are a boy! 👦🏽"
Lesson 14: Overview

This lesson covers DOM manipulation which allows one to dynamically change the structure, style, and content of a web page using JavaScript. You can select elements using various methods, modify their text and HTML content, add or remove elements, and apply CSS styles. By understanding DOM manipulation, you can create interactive and dynamic web experiences.

Tasks
1. 1. What is the Document Object Model (DOM)? Check out MDN
2. 2. Access the "body" element with the document keyword.
3. 3. Select and modify elements using the methods below:
  - (i) .querySelector()
  - (ii) .getElementById()
  - (iii).getElementsByClassName() (optional)
  - (iv) .getElementsByTagName() (optional)
4. 4. Style an Element (body).
5. For eg: document.body.style.backgroundColor = 'yellow'
6. check out Style Object to see the how the spelling of the styling properties differ when using JS
7. 5. Style selected elements/ids/classes using querySelector() method.
8. 6. Style selected ids using getElementById() method.
Take Home Challenge
1. Objective: Using Homework 9 folder, we are going to create a simple webpage that initially styles the web page using CSS as shown below then using the DOM object Model(document), we will use selectors, .style method, and .innerHTML to manipulate the DOM to change it's styling and content
2. Before:
4. After:
Lesson 15: Overview

By the end of the lesson, students will understand the concept of events and event listeners in JavaScript and be able to implement them in basic interactive web pages.

Tasks
1. 1. What are events and event listeners? Check out MDN
2. 2. Why events are essential for interactivity in web development?
3. Example:
  Explanation with a real-life analogy: "Imagine a doorbell (event) and a person waiting to hear it (listener). The person (listener) responds when the bell rings (event)."
5. 3. Event handle Registration using .addEventListener() method
6. 4. Discuss event types:
  - (i) click
  - (ii) mouseover
  - (iii)keydown
  - (iv) etc.
7. 5. Discuss event handle registration these attributes in HTML and then passing the called function as a value:
  - (i) onclick
  - (ii) onmouseenter
  - (iii)onkeydown
  - (iv) etc.
8. 6. Practise these examples below:
9. 6. How can you use event listeners to enhance user experience?
Take Home Challenge
1. Duplicate your homework9 folder from the previous assignment and name it .
2. Apply a number of events to achieve the dynamic interactivity like this
Quizzes: Overview

These quizzes are intended to assess your level of understanding on topics or concepts we have discussed in our classroom sessions. They are also meant to provide immediate feedback to we the instructors and you the students, helping to identify areas where students may need additional support.

Quizzes
Additional Resources: Overview

These are links to Documentations, other coding platforms etc. that you can use to supplement what you are taught in class.

Additional Links & Resources

Lesson 1: Overview

Tasks:

Take Home Challenge

Lesson 2: Overview

Tasks

Take Home Challenge

Lesson 3: Overview

Tasks:

Take Home Challenge

Lesson 4: Overview

Tasks

Take Home Challenge

Lesson 5: Overview

Tasks

Take Home Challenge

Lesson 6: Overview

Tasks

Take Home Challenge

Lesson 7: Overview

Tasks

Take Home Challenge

Lesson 8: Overview

Tasks

Take Home Challenge

Lesson 9: Overview

Tasks

Take Home Challenge

Mini Project: Project Overview

PART 1 - Design Phase

PART 2 - Development Phase

Lesson 10: Overview

Tasks

Take Home Challenge

Lesson 11: Overview

Tasks

Take Home Challenge

Lesson 12: Overview

Tasks

Take Home Challenge

Lesson 13: Overview

Tasks

Take Home Challenge

Lesson 14: Overview

Tasks

Take Home Challenge

Lesson 15: Overview

Tasks

Take Home Challenge

Quizzes: Overview

Quizzes

Additional Resources: Overview

Additional Links & Resources