front end information

• The common web professionals and what they do.

  • Quiz 1 problem 2

• The organization that oversees the web and who founded it.

  • W3C, Tim Berners-Lee in 1994

• The systems and technologies that get us connected to web servers.

  • Internet Service Providers (ISPs),DNS (Domain Name System), Routers and Modems

• The default file name that you should use for web pages.

  • index.html

• Some common HTTP status codes.

  • 404 not found, 200 good, 500 server error, 300

• How the HTTP request/response cycle works.

  • User Action: The cycle starts when a user enters a URL or clicks a link.

  • DNS Lookup: The browser finds the IP address for the domain.

  • Browser Request: The browser requests the web page from the server.

  • Server Processing: The server prepares the requested content.

  • Server Response: The server sends the content back to the browser.

  • Browser Rendering: The browser displays the web page to the user.

• Some basic facts about:

  • Graceful Degradation

    • Starts with full features.

    • Scales back for older tech.

    • Ensures basic functionality.

  • Progressive Enhancement

    • Starts with basic content.

    • Adds enhancements for capable devices.

    • Prioritizes accessibility.

  • Responsive Web Design

    • Adapts layout for any device.

    • Uses fluid grids, flexible images.

    • Ensures easy navigation on all screens.

• Some typical naming conventions for web documents.

  • Lowercase, dashes, no capital at all

• The parts of HTML elements

  • Tag: The element name, enclosed in angle brackets (e.g., <div>, <p>).

  • Attributes: Provide additional information about elements, defined within the opening tag (e.g., class="content", href="https://example.com").

  • Content: The actual content inside the element (e.g., text or other elements).

  • Closing Tag: Ends the element, mirroring the opening tag with a forward slash (e.g., </div>, </p>).

• Know what these are:

  • The Document Object Model

    • A programming interface for web documents.

    • Represents the page structure as a tree of objects.

    • Allows scripts to read and manipulate the page content, structure, and styles.

  • Semantic Markup

    • Uses HTML elements to convey meaning and structure (e.g., <article>, <nav>, <section>).

    • Enhances accessibility, SEO, and maintainability.

    • Contrasts with non-semantic markup, which focuses on appearance (e.g., <div>, <span>).

  • The User Agent Style Sheet

    • Default styles applied by web browsers.

    • Ensures basic readability before any custom CSS is applied.

    • Can be overridden by author stylesheets.

  • Caching

    • The process of storing copies of files in a cache, or temporary storage location.

    • Reduces server load, bandwidth usage, and load times.

    • Involves storing frequently accessed data such as web pages, images, and other types of web multimedia.

  • A CSS Reset

    • A set of CSS rules that remove default browser styling.

    • Provides a clean slate for consistent styling across different browsers.

    • Commonly targets elements like margins, paddings, and font sizes.

• Understand the purpose of heading tags (<h1>, <h2>, etc) and when to use them.

  • Heading tags are used to define the structure and hierarchy of content on a webpage. <h1> is typically used for the main title of the page and should be used only once per page to define the primary subject. <h2> to <h6> tags are used for subheadings, with each level representing a subsection under the higher-level heading. Use these tags in a hierarchical order to structure your content logically, which aids in accessibility and SEO.

• Be able to identify what common structural HTML tags do.

  • <div>: A block-level container used to group together HTML elements for styling or scripting purposes.

  • <span>: An inline container used to group elements for styling without introducing a line break.

  • <header>: Represents a container for introductory content or a set of navigational links.

  • <footer>: Defines the footer for a document or section, typically containing authorship information, related documents, and more.

  • <nav>: Designates navigation links.

  • <section>: Represents a standalone section of content with a thematic grouping.

  • <article>: Defines content that forms an independent part of a document or site.

• Be able to identify common semantic HTML elements.

  • <article>: Used for self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.

  • <aside>: Represents a portion of a document whose content is only indirectly related to the document's main content.

  • <details>: Specifies additional details that the user can view or hide on demand.

  • <figure>: Used to represent self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit.

  • <section>: Defines a section in a document, such as chapters, headers, footers, or any other sections of the document.

• Know the two basic generic elements and describe the different attributes that can be used to add identity to them so that they can have CSS rules applied.

  • Use class id, use # to represent ID, and . to represent class

• Know the difference between absolute and relative links.

  • Absolute is full address and relative where you are right now and go on

• Know how to make a link to a document fragment.

  • Use <a href="#elementID"> to link to a fragment.

  • #elementID targets an element's id on the same page.

  • Clicking the link jumps to the targeted section.

• Know the different image formats that are compatible with the web and how they differ. Jpg, png, gif

• Why we use alt text in image tags.

  • helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website

  • Show word when image can’t load

• The basic concepts of bitmapped images.

  • Svc image can scale

  • Bitmap uses pixels

• The different places where CSS rules can be applied to a page.

  • Embedded ,Inline and external

• The common CSS units of measure.

  • em , vw, vh, px. Ex, rem(relative to the root), pt, in, cm,lh,%

• Know the various forms of CSS selectors.

  • Type Selector: Targets elements by their type (e.g., div, p).

  • Class Selector: Uses the . symbol to target elements with a specific class attribute (e.g., .className).

  • ID Selector: Uses the # symbol to target an element with a specific id attribute (e.g., #elementID).

  • Attribute Selector: Targets elements based on an attribute and its value (e.g., [type="text"]).

  • Pseudo-class Selector: Targets elements in a specific state (e.g., :hover, :active).

  • Pseudo-element Selector: Targets specific parts of an element (e.g., ::before, ::after).

  • Descendant Selector: Targets an element that is a descendant of another (e.g., div p).

  • Child Selector: Targets direct children of an element (e.g., div > p).

• Some basic ways to specify colors such as black, white, and gray.

  • Rgb, HSL, name, hexadecimal

• Know the five basic types of positioning. (static, relative, absolute, etc)

  • Static: The default position; elements are positioned according to the normal flow of the page.

  • Relative: Positioned relative to its normal position without affecting other elements.

  • Absolute: Positioned absolutely to its closest positioned ancestor, taken out of the normal flow.

  • Fixed: Positioned relative to the viewport, doesn't move when scrolled.

  • Sticky: Switches between relative and fixed, based on the scroll position.

• Know what breakpoints are and how we specify them.

  • Breakpoints are used in responsive design to define where the website's layout should change to accommodate different screen sizes or devices. They are specified using CSS media queries, e.g., @media (min-width: 768px) { ... }.

• Know a rule of thumb for each of the Basic (CRAP) Design principles (and what are they, of course)

  • Contrast: Use differences in color, size, or shape to make elements stand out.

  • Repetition: Repeat styles for a cohesive look.

  • Alignment: Align elements to create a visually connected and organized layout.

  • Proximity: Group related items together to show their relationship.

• The purpose of an .htaccess file and how and when it’s directives are followed.

  • An .htaccess file is a configuration file used on web servers running the Apache Web Server software. It allows for decentralized management of web server configuration:

  • Use it for user verification, server directive, allow certain type of users

• The order in which the Site Design process steps are followed.

  • Define purpose

  •  Consider audiance

  •  Gather ideas

  •  Organize information

  •  Determine navigation

  •  Sketch pages

  • Build pages

  • Test

  • Iterate

  • Maintain

  • archive

• Know the three types of navigation (Global vs. Local vs. Embedded)

  • Global, One on the top and is consistent all over the page

  • Local, Specific to the side and the page you are on

  • Embedded, inside the element itself.

• What two questions should be answered "above the fold" when you first arrive at a website?

  • What is the purpose of the site?

  • What can the user do here? 

• What is "the fold," anyway?

  • "The fold" in web design refers to the portion of a webpage that is visible on the screen without the need to scroll. 

Stuff to be able to do:

• Spot correct and incorrect markup examples.

• Create a functional link tag.

  • Anchor tag

• Look at a file structure and determine relative links to connect various  pages/resources.

  • <a href="https://www.example.com">Visit Example</a>

• Write a valid image tag.

  • <img src="path/to/image.jpg" alt="Description of the image">

• Identify the different parts of a CSS style rule.

  • p { color: blue;

  •     font-size: 16px;}

• Specify a preferred font using the font-family property.

  • font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

• Label the different parts of CSS box model.

  • Content: The actual content of the box, where text and images appear.

    • width: 300px; /* Width of the content area */

    • height: 200px; /* Height of the content area */

    • background-color: lightblue;

  • Padding: The space between the content and the border.

    • padding-top: 20px;

    • padding-right: 30px; 

    • padding-bottom: 20px; 

    • padding-left: 30px; 

  • Border: Surrounds the padding (if any) and content.

    • border: 5px solid navy;

    • dotted: A series of round dots.

    • dashed: A series of short line segments or dashes.

    • double: Two parallel solid lines with some space between them.

    • groove: A border that appears carved into the page; the effect depends on the border color value.

    • ridge: The opposite of groove, giving the effect of a border coming out of the page.

    • inset: Makes the box appear embedded in the page; typically used to create a depressed look.

    • outset: The opposite of inset, giving the effect of the border coming out of the page.

    • none: Defines no border; can be used to remove borders from elements that have them by default.

    • hidden: Similar to none, but in the context of table borders, it can resolve conflicts between 

  • Margin: The outermost layer, representing the space between the border and the other elements.

    • margin: 15px; /* Space between border and other elements around 

• Define a flexbox container and its items as well as basically how to control their layout.

  • Flexbox Container: A flex container is defined by setting an element's display property to flex or inline-flex. This element becomes the flex container, and its direct children become flex items. Flexbox is a one-dimensional layout method used to lay out items in rows or columns.

  • .flex-container {

  •     display: flex; /* This defines a flex container */

  •     justify-content: center; /* Aligns items horizontally */

  •     align-items: center; /* Aligns items vertically */

  •     flex-direction: row; /* Items are placed in a row */

  • }

  • Flex Items: The direct children of a flex container automatically become flex items. Their layout can be individually controlled using flex item properties.

  • How to Control Layout:

    • justify-content: Controls the alignment of items on the main axis (e.g., center, space-between).

    • align-items: Controls the alignment of items on the cross axis (e.g., stretch, center).

    • flex-direction: Specifies the direction of the flex items within the container (e.g., row, column).

    • flex-wrap: Allows the items to wrap as needed onto multiple lines (e.g., wrap, nowrap).

• Define a grid container and its items as well as some techniques to specify how you’d like the grid to behave.

  • Grid Container: A grid container is defined by setting an element's display property to grid or inline-grid. This creates a two-dimensional grid-based layout system, where direct children of the grid container become grid items.

  • .grid-container {

  •     display: grid; /* This defines a grid container */

  •     grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */

  •     grid-template-rows: auto; /* Row height is set to auto */

  •     gap: 10px; /* Sets the gap between grid items */

  • }

  • Grid Items: The direct children of a grid container are grid items. They are automatically placed into the grid layout based on the grid container's definitions.

  • Specifying Grid Behavior:

    • grid-template-columns and grid-template-rows: Define the size of the columns and rows in the grid.

    • gap (or grid-gap in older syntax): Sets the spacing between grid items.

    • grid-auto-flow: Controls how auto-placed items are inserted in the grid.

    • grid-column and grid-row: Specify where a grid item should be placed in the grid layout.

    • grid-template-areas: Defines areas within the grid and assigns items to these areas.

• Provide the complete minimal HTML skeleton necessary to pass validation.

<!DOCTYPE html>

<html lang = “en”> /html lang="en-US"/

<head>

<title>abcd</title>

</head>

<body></body>

</html>

• Write a basic CSS rule to change the properties of a page element.

Article{

margin: 10px 5px 10px 5px;

Padding: 20px;

}

• Write CSS selectors that target a single id on the page and/or all elements of a certain class.

.more-boxes{

}

Span{

}

• Write a descendant selector.

.sidebar a{

}

• Create an ordered list and an unordered list.

<ol>

<li></li>

</ol>

<ul>

<li></li>

</ul>

• Apply pseudo-class styles (there are five of them) to links (and in what order) to make them colors other than the blue and purple defaults.

  • a:Hover{}

  • a:Active{}

  • a:Visited{}

  • a:Focus{}

  • a:link{}