Naan Mudhalavan Frontend Development Session - 4

Naan Mudhalavan Frontend Development Session - 4

Brief Summary

This session covers completing the IBM skill build course, responsive web design using media queries and Bootstrap, and an introduction to JavaScript, including variables, data types, and naming conventions.

  • Completing IBM Skill Build Course
  • Responsive Web Design with Media Queries and Bootstrap
  • Introduction to JavaScript: Variables, Data Types, and Naming Conventions

Completing IBM Skill Build Course

To complete the IBM Skill Build course, register via the provided link, which leads to a page with a "Getting Started with AI" course. Enroll in the course and create a Credly account. The course includes three modules that must be completed individually by clicking "Go to Activity" for each. Ensure each unit within the modules is fully completed, including any quizzes. After finishing all three modules, a "Proof of Completion" will be available under the "Actions" column.

Responsive Web Design with Media Queries

Responsiveness ensures a website adapts to different screen sizes. This can be tested using Chrome's inspect tool (Ctrl+Shift+I) to simulate various devices. Media queries in CSS enable specific styles to be applied based on screen size. For example, different background colors can be set for mobile (max-width: 760px), tablets (min-width: 761px and max-width: 1024px), and desktops (min-width: 1024px) using the @media rule.

Introduction to Bootstrap

Bootstrap is a CSS library that helps build responsive websites quickly. To use Bootstrap, include its CSS and JavaScript files via CDN links in your HTML file. The CSS link goes in the <head>, and the JavaScript link goes at the end of the <body>. Bootstrap offers pre-built, responsive components like navbars. Copy the HTML for a navbar from Bootstrap's documentation and paste it into your HTML file. Bootstrap components are inherently responsive, reducing the need for custom media queries.

Introduction to JavaScript: Variables

JavaScript was introduced in 1995 and later standardized by the European Computer Manufacturers Association (ECMA) in 1997. JavaScript is also known as ECMAScript, with versions named ES1, ES2, etc. The latest version is ES14 (2023). JavaScript adds dynamic functionality to web pages, making them interactive. Variables in JavaScript are declared using var, let, or const. Unlike some other languages, JavaScript does not require specifying the data type (e.g., int, float).

JavaScript: var, let, and const

var allows redeclaration and reinitialization, which can cause issues in large projects. let allows reinitialization but not redeclaration, preventing accidental variable overwriting. const declares a constant variable that must be initialized upon declaration and cannot be reassigned. Best practice is to use const for most variables and let only when reassignment is necessary, avoiding var altogether.

JavaScript: Data Types and Naming Conventions

JavaScript supports several data types: strings, numbers, booleans, objects, and arrays. Objects are collections of key-value pairs enclosed in curly braces {}, while arrays are ordered lists of values enclosed in square brackets []. Values in an array are called elements. Naming conventions in JavaScript use camel casing, where the first word starts with a lowercase letter, and subsequent words start with an uppercase letter (e.g., myVariableName).

Share

Summarize Anything ! Download Summ App

Download on the Apple Store
Get it on Google Play
© 2024 Summ