frontend Flashcards
(28 cards)
what is HTML?
Hyper Text Markup Language
- Markup language (system of instructions, indicates structures and formatting of document) that consists of tags.
- Defines the structure of web pages
- Basic building block of web page (used to display text, images, and other content)
What are semantic elements in HTML?
- Elements that contain the meaning of the content and structure of the HTML document (contain content related to their names)
- header, main, section, article, footer
Difference between inline and block elements
Inline:
- Doesn’t start on new line
- Takes up only as much width as necessary
- Cannot contain block elements
- Height and width are usually not adjustable
- ex: span, a, strong, em
Block:
- Always starts on a new line
- Takes up the full width available
- Can contain both inline and block elements
- Height and width can be set freely
- div, p, h1, h2, h3, h4, etc
What is a list in HTML? Explain different types of lists available in HTML
- Used to represent a collection of different items
Unordered List:
- ul and li, represented with bullet point
Ordered List:
- ol and li, represented with numbers
Definition List
- used to list terms with definition in structured way, defined using the dl (definition list), dt (definition term), and dd (definition description)
Difference between div and span
Div:
- Block element
- used to group and structure content of the webpage
- starts from a new line and takes up full width available
Span
- inline element
- mainly, used to interact with and style a particular part of the web page
- does not start from a new line and takes up width of the content
What is a DOCTYPE declaration?
- Document type declaration, defines the document type and tells browser which version of HTML the document is written in
Difference between b and strong tags
Both used to make text bold.
b used only to highlight the text
strong used to indicate the importance of the text (for people who can’t see, accessibility)
What are meta tags?
- used to define the metadata about HTML document
- character set, description, keywords, author, viewport settings [placed in head element]
Explain tags in HTML
- tags are used to define the elements on the web page
- keywords that are enclosed in angle brackets
What is CSS?
Cascading Style Sheets
- used to design and style the web page to make it attractive for users
- describe how the element should be displayed on the screen
(some of the CSS selectors: element selectors, class selectors, id selectors, universal selectors)
Explain selectors in CSS
- used to select elements and style the element by providing CSS properties to them.
Name/explain the different CSS selectors
element selector:
- select all elements directly by using the name of the element
id selector:
- selects a single element using # followed by the id attribute name
class selector:
- selects all elements that have the class name in their class attribute using . followed by class name
universal selector:
- selects all elements by using *
attribute selector
- element[attributeName]
- selects certain elements based on attribute names and/or values
direct child selector
- element > element
- selects child element of a parent element
pseudo (class) selector
- lets you style a specific state of a selected element
- ex: button:hover
Difference between CSS Grid and Flexbox
Grid
- two dimensional layout
- controls rows and columns
- suitable for complex, structured layouts
- allows item placement anywhere in the grid
- can define both rows and columns together
Flexbox
- one dimensional layout
- controls EITHER row or column, not both
- ideal for simple, linear layouts
- items follow the document/source order
- defines layout in a single direction
What is the use of the float property?
- it allows you to set the child elements of a container either on the left or the right side of the parent element
What is JavaScript?
- a scripting and programming language (scripting when used in browser) (programming used in Node.js, React, to build full apps and servers)
Difference between scripting and programming language
scripting:
- type of programming language that automates tasks (make a computer do tasks by itself, without you having to manually do it each time [ex: renames 100 files instead of you doing it one by one, or browser script that auto-saves when you type in a form]) and is usually interpreted
- interpreted (line by line) [interpreted = code is read and executed line by line at runtime (program is actively executed)]
- slower due to interpretation
- automate tasks, enhance existing apps
- often runs inside another program (like a browser)
- javascript, python, bash, php
programming:
- language used to create software
- compiled (or can be compiled + interpreted) [compiled = code is translated into machine code (binary) (something the computer’s processor can understand directly) before it’s run]
- typically faster when compiled
- build standalone software/applications
- can run independently
- Java, C++, C#, Go
(all scripting languages are programming languages, but not all programming languages are scripting languages)
Difference between var, let, const
var
- function-scoped (variables declared with var are accessible throughout the entire function in which they are declared)
- can be reassigned and redeclared (within their scope)
- are hoisted to the top of their scope (they can be accessed before they are declared, but their value will be undefined until the declaration line is reached)
- does not have TDZ (Temporal Dead Zone)
let
- block-scoped (variables declared with let are only accessible within the block [if statement, for loop, any other block of code enclosed in curly braces] where they are defined
- can be reassigned but not redeclared within their scope
- are hoisted, but are not initialized (accessing them before the declaration line results in a ReferenceError
- does have TDZ (period when a variable declared with let or const is in scope but not yet initialized)
const
- block-scoped
- cannot be reassigned (if it holds an obj or arr, the properties or elements of that obj/arr can be changed)
- are hoisted, but are not initialized. Leading to ReferenceError if accessed before declaration
- does have TDZ
Difference between == (loosely equals) and === (strictly equals)
==
- checks values of operands and if the value is the same it’ll return true regardless of if the data type is the same or not
- compares 2 values
- ex: 5 == ‘5’ returns true
===
- compares values and types
- ex: 5 === ‘5’ returns false
What are the data types?
Primitive Data Types (stored by value)
- number
- string
- boolean
- null
- undefined
- bigInt (represents integers beyond the limits of Number type)
- symbol (unique and immutable value [used in objects, often object keys])
Non-Primitive Data Types (stored by reference, aka reference data types [stores a reference (pointer) to the actual value in memory, not value itself])
- Object
- Array
- function
What is the DOM?
Document Object Model
- tree-like structure that represents the contents of a web page (HTML elements, turned into javascript objects)
- allows us to manipulate the elements and attributes, and content of a web page ( JS can access and change any part of the page using the DOM )
( browser reads the HTML and turns it into a DOM, so JS can interact with and change the page )
- live (real-time) in memory REPRESENTATION of the page
- allows dynamic changes to the structure, content, and style of page
Difference between null and undefined
null
- variable has been intentionally set to have no value
- clear or reset a variable on purpose (by you)
undefined
- variable is declared but not given a value (variable declared, no value yet)
- or when a function doesn’t return anything
- set by JS (automatically)
What is React?
- an open-source front-end JS library (created by Facebook)
- used to build user interfaces (ui) based on components (REUSABLE piece of code that represents a part of a ui)
key features of React
- component-based architecture
- virtual DOM
- JSX (javascript xml)
- one-way data binding
- single page application (SPA)
- state management
What is XML?
Extensible Markup Language (does not DO anything, information wrapped in tags)
- markup language used for storing and transporting data (text-based format used to store and share structured data)
- looks like HTML but it’s for data not web pages
- way to describe and organize data using custom tags
What is JSX?
JavaScript XML
- syntax extension for JavaScript that allows you to write HTML like code within JS files, particularly when working with React library
- then React compiles the code into pure JavaScript that can be rendered by the browser
