|
 4th Qtr Requirements, Outline and Rubrics |
Please use this resource to see the requirements for the 4th Qtr, Outline, Grading System, Weekly Outline and Project Rubrics |
|
| Proj/LT |
Peer and Self Rating on Website Project Development |
We will be implementing differentiated project scoring this quarter.
Please accomplish this form TWICE ONLY to rate yourself and your partner's contribution to the overall contribution of your partner in the CS3 web development project. The peer rating will be used to adjust individual grades: High contributors (average rating ≥ 4.5) → will get the 100% of the actual project score. Average contributors (rating 3–4.4) → will get 80% of the actual project score. Low contributors (rating < 3) → will get 60% of the actual project score.
- No self AND no peer rating will mean that both of you will get the same project score.
- Information provided here will be used solely on assigning the individual project score.
|
|
| Q4 LT Practice (do this K, Rb, Na, Sr) :D |
 CS3 Podcast |
This is a fast, but fun overview of everything discussed in the 3rd quarter (SY24-25).
Find a quiet nook where you can concentrate, pump up the volume, focus and play. Choose at least 2 of the following questions. You can find a batchmate to pair with for this. Send me the answers via our google space.
Explain the difference between a while loop and a do...while loop in JavaScript. Be specific about when the condition is evaluated. Describe the CSS Box Model. What are its main components, and how do they relate to each other? What is a CSS pseudo-class? Give two examples and explain how they are used. Explain what display: flex; does. How does this property affect the layout of child elements? Describe the difference between position: relative; and position: absolute; in CSS. Name three different types of HTML form input tags and their specific uses. What is the purpose of the onsubmit event handler in HTML forms? Explain the event's purpose. Explain what an image sprite is and why it is used in web development. What are CSS pseudo-classes for links used for? Which order should the pseudo-classes for links be declared? What is the purpose of the package.json file in a Node.js project? What information does it contain?
By answering questions, you force your brain to think, and you remember better. And what you remember my smart students, you own.
~>Sir Roy |
|
| CSS Transform |
 Transform |
|
|
| CSS Position |
Image Sprites (additional information) |
|
|
| Session Handling |
Session Handling Using Cookies |
|
|
Session Handling Using localStorage |
|
|
Presentation on Session Control |
|
|
| HTML Forms |
HTML Form tags, Form, input (text box, password, button, submit, textarea) and form attributes |
|
|
HTML Form tags, Form, input (radio, checkbox) and select |
|
|
Form handling onsubmit, onchange, onselect, onblur, onfocus |
|
|
| JS Methods |
Commonly Used JavaScript Objects: Math and String Methods |
|
|
Commonly Used JavaScript Date Objects |
|
|
| HTML (from 1st Qtr) |
HTML Basics |
|
|
Layout Tags (header, footer, nav, aside) |
|
|
Multimedia tags (video, audio) |
|
|
Presentation on HTML Basics |
|
|
Presentation on Creating Contents |
|
|
| CSS (From 1st Qtr) |
Types of CSS |
|
|
CSS Box Model |
|
|
Box Model and Media Presentation |
|
|
Cool website on the css boxmodel linkstyles layouts animations and sprites |
|
|
Text Links |
|
|
Events in CSS |
|
|
Basics of CSS Float |
|
|
CSS Float (Floating Multiple Elements) |
|
|
| Project Proposal / LT |
 Wireframing - (Reading Material) |
In this learning guide it will discuss the use of wireframe in the web site development phase. Your project proposal should include the use of wireframes to show the layout and components of the three webpages that will be developed this quarter. Please ignore the navigation part of this learning guide....use the updated project requirements in the course policy statement pdf as your guide. |
|
Best Practices for Web Design and Layout (Reading Material) |
● identify best practices in web design and layout, focusing on color schemes;
● identify and understand the importance of colors in web design;
● evaluate a websites’ design and layout, especially on color schemes used.
|
|
| Arrays and Objects |
Declaring Arrays |
|
|
Using Arrays (integer, index, associative array) |
|
|
Sort and Search |
|
|
Presentation on Arrays and Objects |
|
|
 Links to additional practice exercises on Arrays and Object |
|
|
| Getting Ready |
Introduction to Server-Side Web Development |
|
|
Git, Github and VSCode |
|
|
| JS Basics |
JavaScript Overview and Syntax |
|
|
Variable Declaration |
|
|
JavaScript Operations |
|
|
Video Lectures on Introduction to JavaScript |
|
|
| JS Statements |
JavaScript Basic Statements |
|
|
Commonly Used JavaScript Number Objects |
|
|
Video Lectures: Input and Output functions |
|
|
| JS Structures |
Control Statements |
|
|
Loop Control Structures (while, do..while, for..in) |
|
|
Loop Control Structures (break, continue, Nested Loop) |
|
|
Video Lectures on Loop Control Structures |
|
|
| JS Functions |
Declaring Functions |
|
|
Processing Function Output |
|
|
Event Handlers |
|
|
Video Lectures: Custom and Pre-defined Functions |
|
|
| Tools and Resources |
Online Collbarative HTML CSS and JS Editor - StackBlitz |
Please click the given link to open the StackBlitz as our online/alternative Integrated Development Environment. This requires a Github account |
|
Moodle App from Google Play |
Please download the Moodle app for smart mobile devices. This will allow you to access our course even offline. |
|
Moodle App for Desktop |
Please download the Moodle app for laptop/desktop. This will allow you to access our course even offline. |
|
Clip path maker |
If you want to create different shapes with your block elements.
|
|
CSS Diner |
Use this link to practice CSS Selectors
|