Hoja de Repaso: Web Development Fundamentals

📋 Course Outline

HTML Structure
HTML Elements and Attributes
Semantic HTML
CSS Selectors and Specificity
Box Model and Layout
JavaScript Variables and Types
JavaScript Functions and Control
DOM Manipulation
Responsive Design Techniques
Version Control Systems
Web Accessibility Practices
Frameworks and Libraries

📖 1. HTML Structure

🔑 Key Concepts & Definitions

HTML (HyperText Markup Language): The standard language used to create and structure content on web pages using elements and tags.
HTML Elements: Building blocks of HTML, consisting of tags that define different parts of a webpage, such as <div>, <p>, <h1>.
Tags: Keywords enclosed in angle brackets that denote the start or end of an HTML element, e.g., <p> or </p>.
Attributes: Additional information added to HTML elements to modify their behavior or appearance, e.g., src, href, alt.
Semantic HTML: Use of HTML elements that convey the meaning of the content, such as <article>, <header>, <footer>, improving accessibility and SEO.
DOCTYPE Declaration: <!DOCTYPE html> at the beginning of an HTML document that specifies the HTML version and helps browsers render the page correctly.

📝 Essential Points

Every HTML document starts with a <!DOCTYPE html> declaration to ensure standards mode.
The basic structure includes <html>, <head>, and <body> sections.
The <head> contains metadata like <title>, links to stylesheets, and scripts.
The <body> contains the visible content, structured with elements like headings, paragraphs, images, and links.
Use semantic tags (<header>, <nav>, <section>, <article>, <footer>) to improve document meaning and accessibility.
Attributes provide additional info; common attributes include id, class, src, href, and alt.
Proper nesting and closing of tags are essential for valid HTML.
HTML is the foundation upon which CSS and JavaScript build interactivity and style.

💡 Key Takeaway

HTML structures web content through elements and tags, utilizing attributes and semantic tags to create meaningful, accessible, and well-organized web pages.

📖 2. HTML Elements and Attributes

🔑 Key Concepts & Definitions

HTML Element: A building block of HTML, consisting of a start tag, content, and an end tag, used to structure web content.
Example: <p>This is a paragraph</p>
HTML Tag: The markup code that defines the beginning or end of an element, enclosed in angle brackets.
Example: <h1>, </h1>
Attribute: Additional information added to an HTML element to modify its behavior or appearance, specified within the start tag.
Example: <a href="https://example.com">Link</a>
Semantic HTML: Use of HTML elements that convey the meaning of the content, improving accessibility and SEO.
Examples: <header>, <article>, <footer>
Void Elements: HTML elements that do not have closing tags and cannot contain content.
Examples: <img>, <br>, <input>
Global Attributes: Attributes applicable to most HTML elements, such as id, class, style, title, and data-*.

📝 Essential Points

HTML elements are structured with opening tags, optional attributes, content, and closing tags.
Attributes provide extra details; common ones include id, class, src, href, and alt.
Proper use of semantic HTML enhances accessibility, SEO, and code clarity.
Void elements are self-closing and do not have an end tag.
Attributes can have values enclosed in quotes, and some, like checked or disabled, are boolean attributes.
The id attribute should be unique within a page, while class can be shared among multiple elements for styling or scripting.

💡 Key Takeaway

HTML elements and attributes form the foundation of web page structure and semantics; understanding their proper use is essential for creating accessible, well-structured websites.

📖 3. Semantic HTML

🔑 Key Concepts & Definitions

Semantic HTML: The use of HTML markup that conveys the meaning and structure of the content, making it more understandable for browsers, search engines, and assistive technologies.
Semantic Elements: HTML tags that describe their purpose and the type of content they contain, such as <header>, <footer>, <article>, <section>, <nav>, and <aside>.
Accessibility: The practice of designing web content that can be easily used by people with disabilities, enhanced by semantic HTML through better screen reader interpretation.
SEO (Search Engine Optimization): The process of optimizing web content to improve search engine rankings, which semantic HTML facilitates by providing clear content structure.
Non-semantic Elements: HTML tags like <div> and <span> that do not describe their content's meaning and are often used for styling or layout purposes.

📝 Essential Points

Semantic HTML improves clarity of web page structure, making it easier for browsers and developers to understand content.
Using semantic tags enhances accessibility by providing meaningful context to assistive technologies.
Proper semantic markup benefits SEO by helping search engines interpret the content hierarchy.
Overusing non-semantic elements like <div> and <span> can obscure the document structure; prefer semantic tags whenever appropriate.
Examples of semantic tags include <article>, <section>, <header>, <footer>, <nav>, and <aside>.
Combining semantic HTML with ARIA roles can further improve accessibility for dynamic or complex components.

💡 Key Takeaway

Semantic HTML uses meaningful tags to clearly define the structure and purpose of web content, enhancing accessibility, SEO, and maintainability of web pages.

📖 4. CSS Selectors and Specificity

🔑 Key Concepts & Definitions

CSS Selector: A pattern used to select and target HTML elements for styling. Examples include element, class, ID, attribute, pseudo-class, and pseudo-element selectors.
Class Selector (.classname): Targets all elements with a specific class attribute. Multiple elements can share the same class.
ID Selector (#idname): Targets a single element with a unique ID attribute. Has higher specificity than class or element selectors.
Specificity: A ranking system that determines which CSS rule applies when multiple rules target the same element. Calculated based on the types of selectors used.
Inline Styles: Styles applied directly to an element via the style attribute. They have the highest specificity and override other styles.

📝 Essential Points

Selectors can be combined to increase specificity, e.g., div.myClass#myId.
Specificity hierarchy (highest to lowest): Inline styles > ID selectors > Class/Pseudo-class/Attribute selectors > Element/Pseudo-element selectors.
When conflicting styles apply, the rule with higher specificity takes precedence.
The !important declaration overrides normal specificity rules but should be used sparingly.
Understanding specificity helps troubleshoot CSS conflicts and ensures proper styling.

💡 Key Takeaway

CSS specificity determines which styles are applied when multiple rules target the same element; mastering it ensures precise and predictable styling in web development.

📖 5. Box Model and Layout

🔑 Key Concepts & Definitions

CSS Box Model: The box that wraps around every HTML element, consisting of four parts—content, padding, border, and margin—that determine the element's size and spacing.
Content: The actual content inside the box, such as text or images.
Padding: Space between the content and the border; increases the clickable area without affecting the element's overall size.
Border: The line surrounding the padding and content; can be styled with width, color, and style.
Margin: Space outside the border that separates the element from neighboring elements; affects layout positioning.
Layout Techniques: Methods like Flexbox and Grid used to arrange and align elements within a webpage, enabling responsive and complex layouts.

📝 Essential Points

The total size of an element is calculated by adding content width/height, padding, border, and margin.
The box-sizing property can alter how width and height are calculated—content-box (default) vs. border-box (includes padding and border).
Proper understanding of the box model is crucial for precise layout control and avoiding overflow or spacing issues.
Flexbox provides flexible alignment and distribution of space along one axis, while Grid allows for two-dimensional layout control.
Margins can collapse when vertical margins of adjacent elements meet, affecting spacing.

💡 Key Takeaway

The CSS box model is fundamental to controlling element sizing and spacing; mastering it enables precise and responsive webpage layouts using techniques like Flexbox and Grid.

📖 6. JavaScript Variables and Types

🔑 Key Concepts & Definitions

Variable: A named container for storing data values, declared using var, let, or const. Variables can hold different data types and are used to manipulate data dynamically.
Data Types: The classification of data that determines the kind of value a variable can hold. Main types include:
- String: Textual data enclosed in quotes, e.g., "Hello".
- Number: Numeric data, both integers and floating-point, e.g., 42, 3.14.
- Boolean: Logical values representing true or false.
- Null: Represents the intentional absence of any object value.
- Undefined: Indicates a variable has been declared but not assigned a value.
- Symbol: Unique identifier, mainly used for object property keys.
- BigInt: For representing integers beyond the Number range.
Type Coercion: JavaScript's automatic conversion of values from one data type to another during operations, which can lead to unexpected results if not managed carefully.

📝 Essential Points

Use let for variables that will change and const for constants that won't be reassigned.
Variables declared with var are function-scoped, while let and const are block-scoped.
JavaScript is dynamically typed, meaning variables can hold any data type and change type during execution.
Primitive data types (String, Number, Boolean, Null, Undefined, Symbol, BigInt) are immutable, whereas objects and arrays are reference types.
Always initialize variables to avoid undefined values, which can cause bugs.
Use typeof operator to check the data type of a variable.

💡 Key Takeaway

JavaScript variables are flexible containers that can store various data types, and understanding their scope, data types, and behavior is essential for writing effective, bug-free code. Proper use of let, const, and awareness of type coercion ensures better control over data manipulation.

📖 7. JavaScript Functions and Control

🔑 Key Concepts & Definitions

Function: A reusable block of code designed to perform a specific task, defined using the function keyword or arrow syntax (=>). Functions can accept parameters and return values.
Function Declaration: A named function defined with the function keyword, e.g., function greet() {}. It is hoisted, meaning it can be called before its definition.
Function Expression: A function assigned to a variable, e.g., const greet = function() {}. Not hoisted; can be anonymous or named.
Control Structures: Statements that control the flow of execution, such as if, else, switch, for, while, and do...while.
Conditional Statements: Used to perform different actions based on conditions. if evaluates a condition; else provides an alternative.
Loops: Repetition structures that execute code multiple times. for loops iterate a set number of times; while loops continue while a condition is true.

📝 Essential Points

Functions can be invoked to execute code blocks multiple times, promoting code reuse and modularity.
Function parameters are placeholders for input values; arguments are actual values passed during invocation.
Control structures enable decision-making (if, switch) and iteration (for, while), essential for dynamic behavior.
Proper use of control flow prevents infinite loops and logical errors; understanding scope within functions and blocks is crucial.
Arrow functions (=>) provide concise syntax for functions, especially for inline or anonymous functions.
JavaScript functions can be nested, passed as arguments (callbacks), and returned from other functions, enabling functional programming techniques.

💡 Key Takeaway

JavaScript functions and control structures form the foundation for creating dynamic, interactive web applications by enabling code reuse, decision-making, and iterative processes. Mastery of these concepts allows for effective control flow and modular code design.

📖 8. DOM Manipulation

🔑 Key Concepts & Definitions

DOM (Document Object Model): A programming interface that represents the structure of an HTML document as a tree of objects, allowing scripts to access and modify content, structure, and styles dynamically.
Element Selection Methods:
- getElementById(id): Selects a single element with the specified ID.
- getElementsByClassName(className): Selects all elements with the specified class.
- querySelector(selector): Selects the first element matching a CSS selector.
- querySelectorAll(selector): Selects all elements matching a CSS selector.
Manipulating Content and Attributes:
- innerHTML: Gets or sets the HTML content inside an element.
- textContent: Gets or sets the text content of an element.
- setAttribute(attr, value): Sets the value of an attribute.
- getAttribute(attr): Retrieves the value of an attribute.
Creating and Removing Elements:
- createElement(tagName): Creates a new HTML element.
- appendChild(element): Adds a new child element to a parent.
- removeChild(element): Removes a child element from its parent.
Event Handling:
- addEventListener(event, function): Attaches an event handler to an element (e.g., 'click', 'input').
- Event objects provide information about the event and allow control over its propagation.

📝 Essential Points

DOM manipulation is essential for creating interactive web pages, enabling dynamic content updates without reloading.
Selection methods allow targeting specific elements for modification.
Content and attribute changes can be made directly via properties like innerHTML, textContent, or setAttribute.
Creating new elements and appending them to the DOM allows for dynamic content generation.
Removing elements helps manage the DOM structure and update the UI.
Event listeners enable responsiveness to user interactions, such as clicks, form submissions, or mouse movements.
Proper event delegation can optimize performance by attaching a single event listener to a parent element instead of multiple child elements.

💡 Key Takeaway

Mastering DOM manipulation enables developers to create dynamic, interactive web pages by programmatically accessing, modifying, and responding to the document structure and user events.

📖 9. Responsive Design Techniques

🔑 Key Concepts & Definitions

Responsive Web Design (RWD): An approach that ensures web pages adapt seamlessly to different screen sizes and devices using flexible layouts, images, and CSS media queries.
Media Queries: CSS techniques that apply specific styles based on device characteristics like width, height, orientation, or resolution, enabling layout adjustments for various devices.
Flexible Grid Layouts: Grid systems that use relative units (percentages or viewport units) instead of fixed pixels to create fluid, adaptable page structures.
Fluid Images: Images that scale proportionally within their containing elements, typically achieved with CSS properties like max-width: 100%.
Mobile-First Design: A design philosophy that prioritizes designing for smaller screens first, then progressively enhances for larger screens using media queries.
Viewport Meta Tag: An HTML tag (<meta name="viewport" content="width=device-width, initial-scale=1.0">) that instructs browsers on how to control the page's dimensions and scaling on different devices.

📝 Essential Points

Responsive design relies heavily on CSS media queries to modify styles based on device size and orientation.
Using relative units (%, vw, vh, em, rem) instead of fixed units (px) allows layouts and images to scale fluidly.
The viewport meta tag is essential for controlling layout behavior on mobile devices.
Mobile-first approach involves designing for small screens initially, then adding styles for larger screens with min-width media queries.
Responsive images prevent layout breakage by scaling images to fit their containers without distortion.
Combining flexible grids, images, and media queries creates a cohesive, adaptable user experience across devices.

💡 Key Takeaway

Responsive design techniques, centered around flexible layouts and media queries, are essential for creating web pages that are functional and visually appealing on any device, ensuring accessibility and optimal user experience.

📖 10. Version Control Systems

🔑 Key Concepts & Definitions

Version Control System (VCS): Software that records changes to files over time, enabling multiple users to track, manage, and revert to previous versions of code or documents.
Repository (Repo): A storage location where all versions of project files are stored, including history and metadata.
Commit: A snapshot of changes saved to the repository, often accompanied by a descriptive message.
Branch: A parallel version of the repository allowing for isolated development; changes can be merged back into the main branch.
Merge: The process of integrating changes from different branches into a single branch.
Clone: Creating a local copy of a remote repository for development and version tracking.

📝 Essential Points

VCS enables collaborative development by tracking changes, resolving conflicts, and maintaining history.
Git is the most widely used distributed VCS, allowing each user to have a full copy of the repository.
Regular commits with clear messages improve project traceability.
Branching facilitates experimentation without affecting the main codebase.
Merging branches consolidates different development efforts but may require conflict resolution.
Cloning repositories allows developers to work locally and synchronize changes with remote repositories like GitHub or GitLab.
Version control is essential for debugging, rollback, and maintaining code integrity during development.

💡 Key Takeaway

Version Control Systems are vital tools that manage code history, support collaboration, and ensure project stability, making them indispensable for modern software development.

📖 11. Web Accessibility Practices

🔑 Key Concepts & Definitions

Web Accessibility: The practice of designing and developing websites that can be used by people of all abilities and disabilities, ensuring equal access to information and functionality.
Assistive Technologies: Devices or software such as screen readers, magnifiers, or alternative input devices that help users with disabilities interact with web content effectively.
Semantic HTML: The use of HTML elements that convey the meaning and structure of content (e.g., <header>, <nav>, <main>, <footer>), which improves accessibility for assistive technologies.
ARIA (Accessible Rich Internet Applications): A set of attributes added to HTML elements to enhance accessibility, especially for dynamic content and complex widgets that do not have native semantic HTML.
Keyboard Navigation: The ability to navigate and interact with web content using only a keyboard, crucial for users who cannot use a mouse.
Color Contrast: The difference in luminance between text and background colors, which must meet accessibility standards to ensure readability for users with visual impairments.

📝 Essential Points

Designing accessible websites involves using semantic HTML to provide meaningful structure, making content understandable by assistive technologies.
ARIA attributes are essential for dynamic or custom components lacking native semantic elements, enhancing their accessibility.
Ensuring keyboard navigability allows users who cannot use a mouse to access all interactive elements.
Adequate color contrast and text sizing improve readability for users with visual impairments.
Following WCAG (Web Content Accessibility Guidelines) ensures compliance with international standards for accessibility.
Accessibility benefits all users, including those with temporary or situational disabilities, by improving overall usability.

💡 Key Takeaway

Web accessibility is a fundamental aspect of inclusive design, requiring thoughtful use of semantic HTML, ARIA attributes, and user-friendly navigation to ensure all users can access and interact with web content effectively.

📖 12. Frameworks and Libraries

🔑 Key Concepts & Definitions

Framework: A structured platform that provides a foundation and predefined tools for building web applications, often enforcing specific design patterns. Examples include Angular, Vue.js, and Django.
Library: A collection of pre-written code that developers can call upon to perform common tasks, enhancing productivity without dictating application structure. Examples include jQuery and Lodash.
Front-end Frameworks: Frameworks focused on building user interfaces and client-side applications, such as React, Angular, and Vue.js.
Back-end Frameworks: Frameworks used for server-side development, managing data, and application logic, like Express.js, Django, and Ruby on Rails.
Component-Based Architecture: An approach where applications are built using reusable, self-contained components, common in frameworks like React and Vue.js.
Package Managers: Tools like npm or Yarn that manage libraries and dependencies, simplifying installation, updating, and version control.

📝 Essential Points

Frameworks often dictate the overall structure and flow of an application, promoting consistency and scalability.
Libraries provide specific functionalities (e.g., DOM manipulation, data handling) without enforcing a particular architecture.
Using frameworks and libraries accelerates development, reduces code redundancy, and improves maintainability.
Front-end frameworks like React and Vue.js utilize component-based architecture, enabling modular UI development.
Package managers are essential for managing dependencies, ensuring compatibility, and streamlining updates.
Choosing the right framework or library depends on project requirements, team expertise, and scalability needs.

💡 Key Takeaway

Frameworks and libraries are essential tools that streamline web development by providing reusable code and structured approaches, enabling developers to build complex applications efficiently and effectively.

📊 Synthesis Tables

Aspect	HTML Structure & Elements	CSS Selectors & Layout
Purpose	Defines webpage content and structure	Styles and positions webpage elements
Core Components	`<!DOCTYPE>`, `<html>`, `<head>`, `<body>`, semantic tags	Selectors (`.class`, `#id`, element), box model, layout techniques
Key Focus	Elements, attributes, semantic tags	Specificity, box model, responsive techniques
Accessibility	Semantic HTML enhances accessibility	Proper selector use and layout improve usability

Aspect	JavaScript Fundamentals & DOM	Responsive Design & Version Control
Purpose	Adds interactivity, manipulates DOM	Ensures adaptability across devices, manages code versions
Core Components	Variables, functions, control flow, DOM API	Media queries, grid/flexbox, Git commands
Key Focus	Data types, functions, event handling	Breakpoints, version history, collaboration
Accessibility	Dynamic content updates for users	Consistent code management for team workflows

⚠️ Common Pitfalls & Confusions

Confusing semantic HTML tags (<article>, <section>) with non-semantic <div> for layout.
Using IDs (#id) excessively or incorrectly, leading to specificity conflicts.
Overusing inline styles, causing maintenance issues and specificity problems.
Ignoring the box model when setting widths, paddings, and margins, resulting in layout bugs.
Misunderstanding CSS specificity hierarchy, leading to unexpected style overrides.
Not using media queries effectively, causing poor responsiveness.
Failing to properly nest or close HTML tags, resulting in invalid markup.
Overusing <div> and <span> without semantic meaning, reducing accessibility.
Ignoring accessibility practices like ARIA roles or alt text.
Not managing version control properly, leading to lost or conflicting code changes.
Relying solely on CSS hacks instead of proper specificity and layout techniques.
Using deprecated HTML tags or outdated CSS properties.

✅ Exam Checklist

Understand the basic structure of an HTML document, including <!DOCTYPE html>, <html>, <head>, and <body>.
Identify and use semantic HTML tags appropriately to improve accessibility and SEO.
Differentiate between HTML elements and attributes; know common attributes like id, class, src, href, alt.
Explain the CSS box model and how padding, border, and margin affect element layout.
Use CSS selectors correctly, understanding their specificity and how conflicts are resolved.
Apply responsive design techniques such as media queries, flexible grids, and flexible images.
Describe the purpose and basic commands of version control systems like Git.
Implement web accessibility practices, including semantic HTML, ARIA roles, and descriptive alt text.
Recognize the importance of semantic HTML for accessibility and SEO.
Use JavaScript variables, data types, functions, and control flow to manipulate webpage content.
Perform DOM manipulation using JavaScript to dynamically update webpage content.
Understand core layout techniques like Flexbox and Grid for responsive and complex layouts.
Know the purpose of frameworks and libraries, and their role in accelerating development.

📋 Course Outline

📖 1. HTML Structure

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 2. HTML Elements and Attributes

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 3. Semantic HTML

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 4. CSS Selectors and Specificity

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 5. Box Model and Layout

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 6. JavaScript Variables and Types

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 7. JavaScript Functions and Control

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 8. DOM Manipulation

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 9. Responsive Design Techniques

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 10. Version Control Systems

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 11. Web Accessibility Practices

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📖 12. Frameworks and Libraries

🔑 Key Concepts & Definitions

📝 Essential Points

💡 Key Takeaway

📊 Synthesis Tables

⚠️ Common Pitfalls & Confusions

✅ Exam Checklist

Pon a prueba tus conocimientos

Repasa con tarjetas de memoria

Similar courses

Introduction aux documents et sécurité en construction

Introduction à l'Informatique et IA

Introduction aux marchés publics et réglementations du bâtiment

Gestion des imprimantes Windows et PDF

Introduction aux bases de données relationnelles

Maîtrise des Boucles en Programmation

Crea tus propias hojas de repaso