Welcome, T4G Foundation Cohort 5!

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

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.

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

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".

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.

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.

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 + .)

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.

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:
• i. display
• ii. flex-wrap
• iii.flex-direction
• iv. justify-content
• v. gap
• vi. align-item
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

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*:
• ⭐️ Clearly define the purpose and target audience of the website.
• ⭐️ Identify the key functionalities and features that the website should offer. N.B Out of the Seven design for the webpages, Four of them should include:
  • 1. Home Page / landing page
  • 2. Login / signin page
  • 3. Signup / registration page
  • 4. Contact Us page

1. 2. Create Wireframes (optional):
• ⭐️ Sketch out the basic layout and structure of each webpage.
• ⭐️ Focus on information hierarchy and content organization.

1. 3. Design the UI*:
• ⭐️ Use Figma to design the visual elements of each webpage, including:
• · Color palette
• · Typography
• · Layout and grid system
• · Imagery and icons
• · Interactive elements (buttons, forms, etc)
• ⭐️ Ensure consistency in design elements across all pages.
• ⭐️ For each of the 7 web pages, design a raw UI layout and corresponding mock up file with actual content.

---

PART 2 - Development Phase

1. 1. GitHub & VSCode*:
• ⭐️ Set Up the Project & Plan the Website Structure:
• · Create a new project folder and initialize a Git repository.
• · Define the pages: Identify the 7 pages you want to create (e.g., Home, Login, Sign up, Contact us, etc.).
• · Structure the project with appropriate folders for HTML, CSS, and images.

1. 2. HTML (Layout)*:
2. ⭐️ Create the HTML Structure:
• · Basic HTML Structure: Create a basic HTML structure for each page, using the Doctype shortcut to include the head and body sections.
• · Head Section: Link the external CSS stylesheet and Font Awesome CSS library (if using).
• · Header: Include a header with a navigation bar and logo.
• · Main Content: Create sections and divs for the main content of each page including headings, paragraphs, images, and other elements we have discussed in class and ones that you have explored.
• · Footer: Include a footer with copyright information and contact details.

1. 3. CSS (styling) *:
2. ⭐️ Style the Website with CSS:
• · Create only one CSS file to style the HTML elements in all the webpages.
• · Use CSS selectors (id, class, element, pseudo, etc) to target specific elements and apply styles.
• · Utilize CSS properties to control layout, typography, color, and spacing.

1. 4. Integrate Font Awesome Icons: *:
• · Include Font Awesome in your project by adding the necessary CSS and JavaScript files.
• · Use the Font Awesome icon classes to add icons to your HTML elements.

1. 5. Test and Debug *:
• · Thoroughly test the website in different browsers and devices to ensure cross-browser compatibility.
• · Fix any bugs or errors that may arise during testing.

1. 6. Push to GitHub: *:
• · Commit your code changes to the Git repository.
• · Push the changes to the remote "T4G_Project" repository.

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.

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.
• i. Addition (+)
• ii. Substraction (-)
• iii.Multiplication (*)
• iv. Division (/)
• v. Remainder using Modulo (%)
4. 4. Use the console.log function.
5. 5. Practise using string interpolation to log to the console from VS Code.

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

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.

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.

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)."
4. 
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:
Mouse Events Demo
Click Events Demo
Click Events with Image
9. 6. How can you use event listeners to enhance user experience?
• (i) onclick
• (ii) onmouseenter
• (iii)onkeydown
• (iv) etc.

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