Usage directions:
This is a comprehensive summary of the HTML & CSS tech stack discussed in the FE-101 Sprint. Revising the entire content is estimated to require two hours of effort, assuming you have prior exposure to the same tech stack. We recommend approaching this task in parts for a more effective revision process.
All the best !
TABLE OF CONTENTS
- Topic 1: HTML Elements
- Topic 2: HTML Tags
- Topic 3: HTML Attributes
- Additional HTML Topics
- Topic 4: CSS and Selectors
- What are Pseudo elements and Pseudo classes?
- Topic 5: Linking Stylesheets
- Topic 6: CSS Box Model
- Topic 7: Length Units in CSS
- Topic 8: CSS Styling
- Topic 9: CSS Positioning
- Topic 10: Flexbox in CSS
- Topic 11: CSS Specificity
- Topic 12: Inheritance in C
- Topic 13: Cascading in CS
- Topic 14: Responsive Web Design
- Topic 15: Bootstrap
- Topic 16: Git
Topic 1: HTML Elements
HTML Elements
What is it?
HTML (HyperText Markup Language) elements are the building blocks of HTML pages, which define the structure and content of a webpage.
Where is it used?
HTML elements are used in all web pages to structure and define the content.
How is it used?
HTML elements are used in the following manner:
Use HTML tags: HTML elements are defined by start and end tags, with the content in between. The tags are enclosed in angle brackets, for example, <p> represents a paragraph element.
Structure your content: HTML elements can be nested inside other elements, allowing you to structure your web page in a hierarchical way. This structure forms the DOM (Document Object Model).
Add attributes: Many HTML elements can have attributes, which provide additional information about the element. For example, the src attribute of the <img> tag is used to specify the source URL of an image.
Example code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<img src="url_to_image.jpg" alt="Description of image">
</body>
</html>Takeaways / best practices:
Make sure to close all your HTML tags. Unclosed tags can cause rendering issues in the browser.
Use semantic HTML tags (like <header>, <nav>, <main>, <article>, <section>, <footer> etc.) for structuring the web content, as these provide additional information about the type of content contained in the tag and help with accessibility, SEO, and maintaining the code.
Always include an alt attribute with your <img> tags. This provides a description of the image for visually impaired users, and also displays if the image cannot be loaded.
HTML Headings
What is it:
HTML Headings are used to define the headings or subheadings within a webpage to give structure and hierarchy to the content.Where it is used:
HTML Headings are used in HTML files to structure the content and provide a clear hierarchy of headings and subheadings in a document. HTML Headings are essential for accessibility and enable assistive technology to understand the content.
How it is used:
To use HTML Headings, follow these steps:
1. To create a heading, use the HTML tags <h1> to <h6>. These are used to indicate different levels of headings from the most important (h1) to the least important (h6).
2. The content inside the heading tags should describe the section of the document, and it should be concise and meaningful.
3. Be sure to use headings in hierarchical order from H1 to H6. For instance, the first heading on a page should be H1, subheadings H2, and so on.
Code snippet:
<html>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
</body>
</html>Best practices:
- Use headings to create a clear and concise structure to your web page.
- Use the appropriate heading tags in a hierarchical manner to correctly structure your content.
- Use heading tags to define headings and subheadings, rather than using bold or larger text size.
HTML Paragraphs
What is it:
HTML Paragraphs are a way of organizing text content into separate sections with a clear purpose and meaning. They are typically used to group related sentences, ideas, or thoughts within a larger document and help to break up the text into smaller, more manageable chunks.Where it is used:
- In web pages to display textual content in a structured and organized way
- In emails or other digital documents to communicate information clearly and effectively
How it is used:
1. First, determine where in your HTML code you want to add a new paragraph, either by creating a new line or by selecting an existing block of text.
2. Next, use the <p> tag to define the start of a new paragraph.
3. Add your content within the tags, using regular text as you normally would.
4. Close the paragraph by adding a </p> tag at the end.
Here's an example of how you might use HTML Paragraphs in JavaScript code:
<div> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> </div>
Takeaways / best practices:
- Use HTML Paragraphs to break up large blocks of text into smaller, more easily consumable chunks.
- Keep your paragraphs brief and focused on a single idea or concept.
- Use formatting such as bold or italic text, bullet points, or headings to make your paragraphs more visually appealing and engaging.
- Avoid using too many paragraphs in your content, as this can make it appear cluttered and difficult to read.
HTML Lists
What is it:
HTML Lists are used to present information in an organized manner. They can be used to create ordered lists, numbered lists, and bullet point lists.
Where it is used:
Lists are commonly used in website navigation menus, table of contents, and for displaying information in a structured way.
How it is used:
1. Define the list type using the <ol> or <ul> tags
2. Add list items using the <li> tag
3. Use CSS to style the list and list items as desired
Example code snippet for creating an ordered list in HTML using JavaScript:
<ol id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
Takeaways/best practices:
- Use semantic HTML tags for lists, such as <ol>, <ul>, and <li>
- Use CSS to style lists for improved readability and visual appeal
Topic 2: HTML Tags
HTML Tags
What is it?
HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.
Where is it used?
HTML tags are used in HTML (Hypertext Markup Language) to create structured content for web pages.
How is it used?
Start and End Tags: Most HTML tags have a starting and an ending tag. The starting tag is prefixed with < and suffixed with >. The ending tag is similar but includes a / before the tag name. The content goes between the start and end tags. For example: <p>This is a paragraph.</p>
Single Tags: Some HTML tags are singular and don't need a closing tag, such as the line break <br> and image <img> tags.
Nesting of Tags: Tags can be nested within other tags. It's important that they are closed in the reverse order from how they are opened.
Here is a basic code snippet:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
Takeaways / Best Practices
Use lowercase for tags as it's a widely accepted convention and improves readability.
Remember to use <html>, <head>, and <body> tags as these are essential components of an HTML document. <html> is the root element, <head> contains meta-information about the document, and <body> contains the contents that you want to display on the web page.
<html> tag
What is it:
The HTML tag is used to define the structure and content of a web page. It is used in the head and body sections of an HTML document.
Where it is used:
- The HTML tag is used to define the structure and content of a web page.
- The HTML tag is typically used to define the overall structure of a web page, including the header, navigation, content, and footer sections.
- Within the HTML tag, other tags are used to define specific elements, such as headings, paragraphs, images, links, and forms.
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<p>This is the main content of my web page.</p>
</main>
<footer>
<p>© 2021 My Web Page</p>
</footer>
</body>
</html>Takeaways / Best Practices:
- Always include the opening and closing tags for every HTML element.
- Use semantic markup to help search engines and screen readers understand the content of your web page.
<head> tag
What is it:
The <head> tag is a container located at the beginning of an HTML document where metadata, such as the title, description, and links to external resources, are placed. It is primarily used to provide additional information to browsers and search engines about the webpage.
Where it is used:
1. Within the HTML document, the <head> tag is placed within the <html> tag but before the <body> tag.
How it is used:
1. The <head> tag contains various elements and metadata that provides additional information about the webpage.
2. Some of the elements that can be included in the <head> tag are the <title>, <meta>, and <link> tags.
3. The <title> tag is used to specify the title of the webpage.
4. The <meta> tag is used to provide additional metadata, such as keywords, description, and character encoding.
5. The <link> tag is used to link other resources, such as stylesheets and scripts.
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<meta name="description" content="This is my personal webpage">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>Takeaways/Best Practices:
1. Always include a <title> tag within the <head> tag to specify the title of the webpage.
2. Use the <meta> tag to provide additional information about the webpage, such as keywords and description, which can help with search engine optimization.
3. Link external resources, such as stylesheets and scripts, using the <link> tag.
4. Ensure that the <head> tag is properly formatted, and its elements are correctly placed within it.
<body> tag
What is it:
The <body> tag is an HTML tag used to define the content or body of a webpage.
Where is it used?
It is used in HTML documents to define the main content or body of the web page where the user interacts with the webpage.
How is it used?
The <body> tag is used with the following attributes, properties, and methods in JavaScript:
Attributes:
• onload - triggers a script when the web page finishes loading
• onunload - triggers a script when the user leaves the web page
Properties:
• document.body.innerHTML - accesses and manipulates the content of the <body> tag
• document.body.style - sets the style properties of the <body> tag
Methods:
• document.body.appendChild - adds a new child node to the <body> tag
Code snippet to explain the same
<html>
<head>
<title>My Webpage</title>
</head>
<body onload="myFunction()">
<h1>Welcome to my Webpage!</h1>
<p>This is the body of my webpage.</p>
<script>
function myFunction() {
alert("The webpage is loaded!");
}
</script>
</body>
</html>-Takeaways / best practices
• Use it to define the main content or body of your webpage.
• Use the onload and onunload attributes to trigger scripts when the page is loaded or unloaded.
• Manipulate the content of the <body> tag using the document.body.innerHTML property.
• Style the <body> tag using the document.body.style property.
• Use the document.body.appendChild method to add new content to the <body> tag.
Topic 3: HTML Attributes
HTML Attributes
What is it:
HTML Attributes are additional properties that can be applied to HTML tags to provide more information and functionality to the element. These attributes can be accessed and manipulated using JavaScript.
Where it is used:
- src: to define the source of the element such as an image or video
- href: to define the hyperlink reference for anchor tags
- value: to define the value of an input element
- class: to define a class for an element for applying CSS styles
How it is used:
- document.getElementById('elementID').attributeName gets the value of an attribute for a specific element.
- document.getElementById('elementID').setAttribute('attributeName', 'attributeValue') sets the value of an attribute for a specific element.
Example code snippet:
HTML: <button id="myButton" onclick="changeButton()">Click me</button>
JavaScript:
function changeButton() {
document.getElementById('myButton').setAttribute('disabled', true);
}In this example, the JavaScript function changes the "disabled" attribute of the button element to true, making it unclickable.
Best practices:
- Avoid using inline event handlers in HTML tags and instead use addEventListener method in JavaScript for better maintenance and readability.
- Use attribute values carefully as they can affect page performance and accessibility.
- Keep the attribute names consistent and descriptive to ensure easy understanding of code.
Additional HTML Topics:
HTML Display Properties: Block, Inline, and Inline-Block
I. Definition and Basics
Block-level elements start on a new line and take up the full width available, while inline elements can sit directly next to other elements without starting on a new line. Inline-block elements are like a hybrid of the two.
II. Block-level Elements
Examples of block-level elements include <div>, <h1>``<h6>, <p>, <form>, and <header>.
Block-level elements start on a new line and span the full width of the container, pushing other elements to a new line.
They respect all box model properties, including margin, border, padding, width, and height.
III. Inline Elements
Examples of inline elements include <span>, <a>, <img>, <strong>, and <em>.
Inline elements do not start on a new line and only take up as much width as necessary. They can sit directly next to other elements.
They do not respect width, height, margin-top, or margin-bottom properties, but do respect margin-left, margin-right, padding, and border.
IV. Inline-Block Elements
Inline-block elements are like a mix of block and inline elements. Examples include <button> and <input>.
They sit inline with other elements but also respect box-model properties, including height and width.
They are useful for elements where you want to control the dimensions, but also want them to sit inline with other elements.
Semantic and Non-Semantic HTML Tags
I. What it is
In HTML, tags are semantic when they convey some information about the type or purpose of content to the browser or the developer. Non-semantic tags, on the other hand, provide no such information.
II. Semantic Elements
Semantic elements clearly describe their meaning in a human- and machine-readable way. Examples include <header>, <footer>, <article>, <section>, <nav>, <aside> and <main>.
Using semantic elements enhances the accessibility of web pages and makes them easier to read and understand, not only for web browsers and APIs, but also for developers.
III. Non-Semantic Elements
Non-semantic elements don't provide any information about the content they contain. Examples of non-semantic elements include <div> and <span>.
These tags are often used with CSS or JavaScript to apply styles or behaviors to the content.
IV. Importance of Semantic Tags
Accessibility: Semantic tags provide standard role definitions used by assistive technologies like screen readers.
SEO: Search engines use semantic tags to understand and rank web content, improving the page's SEO.
Maintainability: Code is easier to read and understand, which simplifies maintenance and debugging.
V. Use Cases
Semantic tags: Use when you want to provide clear, meaningful tags for content sections. This improves accessibility, SEO, and code readability.
Non-semantic tags: Use when you need general-purpose containers for applying styles or behaviors, or when no suitable semantic element is available.
HTML iframes
I. Definition and Basics
An iframe, short for "inline frame", is an HTML element that allows an external webpage to be embedded within an HTML document. This essentially means that an iframe creates a window within the current page to display a web page from any URL provided.
II. Syntax
<iframe src="URL" title="description"></iframe>
src: The 'src' attribute is used to specify the URL of the webpage that should be embedded within the iframe.
title: The 'title' attribute provides a human-readable description of the iframe content. It is especially useful for improving accessibility.
III. Main Attributes
width and height: These attributes determine the dimensions of the iframe, they are typically specified in pixels.
align: This attribute is used to adjust the alignment of an iframe relative to the surrounding elements.
frameborder: This attribute toggles the visibility of the border around the iframe; a value of '0' hides the border, and '1' shows it.
scrolling: This attribute controls the scrollbar. The values can be 'yes', 'no', or 'auto'.
allowfullscreen: This attribute enables the iframe to be displayed in full-screen mode.
V. Use Cases
Embedding maps, videos, and social media posts.
Displaying advertisements.
Including a piece of content from another site.
Creating multi-frame layouts.
Linking CSS and JavaScript Files in HTML
I. Linking CSS Files
The <link> tag is used within the <head> section of an HTML document to link CSS files. It uses the rel attribute to define the relationship between the HTML and linked file (stylesheet), and the href attribute to specify the path to the CSS file.
<head> <link rel="stylesheet" href="styles.css"> </head>
II. Linking JavaScript Files
The <script> tag is used to link JavaScript files, with the src attribute pointing to the path of the JavaScript file. This tag can be placed in the <head> or <body> section of the HTML document, but is often placed just before the closing </body> tag to improve page load performance.
Topic 4: CSS and Selectors
What is CSS?
Need
In web development, there is a clear need for layout and design of a webpage. This is where CSS (Cascading Style Sheets) comes in. Without CSS, our web pages would be visually flat, uninteresting, and difficult to navigate. There would be no colors, no fonts, no layouts - just plain text on a white background.
What is it?
- CSS stands for Cascading Style Sheets.
- It's a language used for describing the look and formatting of a document written in HTML or XML.
- It provides the stylistic features such as colors, fonts, and layouts to HTML.
- CSS also provides the ability to adapt the presentation to different types of devices, such as large screens, small screens, or printers.
How is it used?
CSS can be implemented in three ways: inline, internal, and external.
Inline CSS is used to apply styles to individual HTML elements directly in the HTML code.
Internal CSS is used to apply styles to an entire HTML document and is typically placed inside the head tag.
External CSS, the most common method, involves linking an external .css file to your HTML document. This method promotes reusability and clean coding practices.
What are Selectors in CSS?
Need:
CSS selectors are needed to effectively select, control, and apply styles to specific elements in the HTML document.
What is it?
CSS selectors are patterns used to select the elements you want to style. They can select elements based on their type, class, id, attribute, and more. They provide an efficient way to control and apply different styles to different parts of the webpage.
How is it used?
Element Selector: This is used when we want to select an HTML element type to apply style.
Eg: p {color: red;} will make the text color of all paragraphs red.
Class Selector: This is used when we want to select elements with a specific class attribute. It starts with a period.
Eg: .myClass {font-size: 20px;} will apply the style to all elements with class="myClass".
ID Selector: This is used to select a unique element with a specific ID. It starts with a hash or pound symbol (#).
Eg: #myID {background-color: blue;} will apply the style to the element with id="myID".
Attribute Selector: This is used when we want to select elements with a specific attribute or attribute value.
Eg: a[target="_blank"] {font-weight: bold;} will make all links opening in a new tab bold.
Pseudo-class Selector: This is used to select elements based on their states, like visited, hovered, active, etc.
Eg: a:hover {color: green;} will change the link color to green when hovered over.
Element Selector
What is it:
Element Selector is a method in JavaScript used to select and manipulate HTML elements on a webpage.
It is primarily used in web development and is a basic concept in front-end scripting.
How it is used:
1. Identify the element to be selected.
2. Use the document.querySelector() or document.querySelectorAll() method to select the element(s).
3. Manipulate the selected element(s) by assigning a new value or modifying its attributes.
Code Snippet:
//Selecting all paragraphs on a webpage
const allParagraphs = document.querySelectorAll('p');
//Modifying the background color of all paragraphs to yellow
allParagraphs.forEach(paragraph => {
paragraph.style.backgroundColor = 'yellow';
});Takeaways / Best Practices:
1. Use specific and unique selectors whenever possible to ensure accurate selection of elements.
2. Document the purpose of the selected element and any changes made to it.
3. Use caution when manipulating elements as it can affect the overall design and functionality of the webpage.
Class Selector
What is it:
Class Selector is a type of CSS selector that targets HTML elements with a specific class.
Where it is used:
It is used in HTML and CSS to style specific parts of a webpage individually.
1. First, create a CSS class with a unique name (e.g. ".my-class")
2. Use the document.querySelector() method to select the HTML element(s) you want to target with the class selector.
3. Set the element's class attribute to the name of the CSS class you created in step 1.
Code snippet:
HTML: <div id="example-element">This is an example element</div>
CSS:
.my-class {
background-color: pink;
}JavaScript:
let element = document.querySelector('#example-element');
element.classList.add('my-class');Takeaways / best practices:
- Class selectors are a powerful tool for creating a consistent and visually appealing webpage.
- Be specific with your class names to avoid confusion and conflict with other classes.
- Use class selectors in moderation to avoid cluttering your HTML with unnecessary code.
ID Selector
What is it:
ID Selector is a CSS selector that is used to select elements based on their unique ID attribute.
Where it is used:
It is commonly used in CSS to apply specific styling to a single element on a page, such as a header or footer.
How it is used:
- Use the document.querySelector() method to select the element based on its ID attribute, add # before ID name..
- Manipulate the selected element using JavaScript methods and properties.
Example code snippet:
// HTML
<div id="myDiv">Some text</div>
<div id="myDiv2">Some text</div>
// JavaScript
const myDiv = document.querySelector('#myDiv');
myDiv.textContent = 'New text';
const myDiv = document.getElementById('myDiv2');
myDiv.textContent = 'New text';Takeaways / best practices:
- Keep in mind that the ID attribute should be unique across all elements on a page.
- Use descriptive and meaningful names for ID attributes to improve code readability.
What are Pseudo elements and Pseudo classes?
Need:
When styling web pages, there is a need to apply styles to specific elements based on their states or positions. Pseudo elements and pseudo classes provide a solution to this requirement.
What are they?
Pseudo Elements: Pseudo elements are virtual elements that allow us to style specific parts of an element. They are denoted by double colons (::) in CSS.
Pseudo Classes: Pseudo classes are used to select and style elements based on their states or actions. They are denoted by a single colon (:) in CSS.
How are they used?
Pseudo Elements:
::before: Inserts content before the selected element.
::after: Inserts content after the selected element.
::first-letter: Selects the first letter of the selected element.
::first-line: Selects the first line of the selected element.
::selection: Selects the portion of the text that is selected by the user.
Pseudo Classes:
:hover: Applies styles when the element is hovered over.
:active: Applies styles when the element is being clicked or activated.
:visited: Applies styles to visited links.
:focus: Applies styles when the element is in focus.
:nth-child(n): Selects elements based on their position in a parent container.
:nth-of-type(n): Selects elements based on their position among siblings of the same type.
Pseudo-class Selector
What is it:
Pseudo-class selector is a CSS selector that targets specific states or actions of elements.
Where is it used:
It is used in CSS to style and apply different styles to elements based on their current state or behavior, such as when a user hovers over a button or clicks on a link.
How it is used:
To use a pseudo-class selector, follow these steps:
1. Identify the state or behavior you want to target, such as hovering over a menu item.
2. Write the CSS selector using the corresponding pseudo-class, such as li:hover.
3. Add the desired styles to the selector, such as changing the background color or text color.
Example code:
css
li:hover {
background-color: blue;
color: white;
}Takeaways / best practices:
- Pseudo-class selectors can help improve user experience by providing visual feedback for different states or behavior of elements.
- Use pseudo-class selectors sparingly to avoid cluttering your CSS code and potentially causing performance issues.
- Test your pseudo-class selectors thoroughly to ensure they work as expected on different devices and browsers.
Descendant Selector
What is it:
Descendant Selector in JavaScript is a CSS selector that selects all elements that are descendants of a specified parent element.
Where is it used:
It is mostly used in CSS to apply styles to child elements of a parent element, but it can also be used in JavaScript to select and manipulate DOM elements.
How it is used:
1. Select the parent element using document.querySelector() or document.querySelectorAll().
2. Use the CSS descendant selector (space) to target the child element(s) within the parent element.
3. Apply the desired logic or manipulation to the selected child element(s).
Example code snippet:
// Select the parent element
const parent = document.querySelector('.parent');
// Select all child elements within the parent element and change their font color
const childElements = parent.querySelectorAll('.child');
childElements.forEach(child => {
child.style.color = 'red';
});Takeaways/Best Practices:
- Try not to use descendant selectors that are too specific or deeply nested, as this can lead to performance issues.
- Use classes or data attributes to make it easier to identify and select specific elements.
- Use delegation instead of individually attaching event listeners to child elements, as this can improve performance and reduce memory usage.
Topic 5: Linking Stylesheets
Linking Stylesheets
What is it:
Linking Stylesheets with context to JavaScript refers to the process of connecting external CSS files to an HTML document through JavaScript.
Where is it used:
It is used when there is a need for dynamic stylesheet loading or when stylesheets need to be loaded conditionally.
1. Create a new <link> element for the stylesheet.
2. Set the href attribute to the location of the external CSS file.
3. Set the rel attribute to "stylesheet".
4. Append the link element to the head of the HTML document.
Example code snippet:
let link = document.createElement("link");
link.href = "styles.css";
link.rel = "stylesheet";
document.head.appendChild(link);Best practices:
1. Always load stylesheets in the head section of the HTML document.
2. Use lazy loading techniques to optimize the performance of the website.
3. Minify and compress the CSS files to reduce loading time.
Topic 6: CSS Box Model
Box Model in CSS
Definition and Basics
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and explains how properties such as margin, padding, border, and content area work together to create visual representation on a page.
Components of the Box Model
Content Box: This is the area where the actual content of the element resides. The dimensions of this area are specified by the width and height properties.
Padding Box: This extends beyond the content box to the surrounding padding, which provides space between the content and the border. The size of the padding is determined by the padding property.
Border Box: This extends beyond the padding to the border that goes around the padding and content. The border property determines its size.
Margin Box: The furthest box extends beyond the border to include the margin, which provides space between this element's border and the border of adjacent (sibling) elements. The margin property determines its size.
The Box-Sizing Property
By default, the width and height properties set the size of the content box. So any border or padding is added to the total size of the box, potentially causing layout issues.
The box-sizing property is used to alter the default CSS box model. If you set box-sizing: border-box;, any border and padding are included within the height and width, making sizing more predictable.
Use Cases
The CSS box model is fundamental to layout in CSS. It affects layout of block-level and inline-block elements, positioning, alignment, and float behavior.
CSS Padding
What is it:
CSS Padding is the space between an element's content and its border.
Where is it used:
CSS Padding is used for creating a buffer between an element's content and its border, which improves readability and aesthetics. Padding can be applied on all four sides of an element or individual sides.
- To add padding to an element, use the CSS padding property and specify the desired value in pixels or other units.
- The padding property can be set using shorthand notation, where you can specify the value for all four sides at once, or individual values for different sides.
- You can also use the padding-top, padding-right, padding-bottom, and padding-left properties to set padding on individual sides.
Code snippet:
/* sets equal padding on all sides */
.element {
padding: 10px;
}
/* sets different padding values for top, right, bottom, and left */
.element {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}Takeaways / Best practices:
- Use consistent padding throughout your website or application for a cohesive design.
- Use the shorthand notation when setting equal padding on all four sides.
- Be mindful of how padding affects the overall layout of your content and adjust as needed.
- Avoid using excessive padding, which can lead to wasted screen real estate and less user-friendly interfaces.
CSS Margin
What is it:
CSS Margin is the space between an element's border and the neighboring elements or the document's edge.
Margin is used in CSS to set the space between an element's border and the neighboring elements or the document's edge. It is used to create white space between elements, to separate elements, or to center elements.
How is it used:
1. Choose the element you want to add margin to.
2. Determine the amount of margin you want to add (in pixels or another unit of measurement).
3. Use the CSS margin property to add margin to the element in question.
Example Code Snippet:
<style>
div {
margin: 20px;
}
</style>
<div>
<h1>Example Heading</h1>
<p>This is an example paragraph within a div element.</p>
</div>Takeaways / Best Practices:
- Use margin to create white space between elements for visual appeal.
- Use margin to separate elements and create visually distinct sections within a webpage.
- Be consistent in your use of margin throughout a webpage.
CSS Border
What is it:
CSS Border used for styling elements in web development. The CSS Border property sets an element's border.
How it is used:
- Used for setting the border for an element
- Can set border width, style, and color
- Can be used to create unique design elements such as image frames or boxes
- Syntax: border: [width] [style] [color];
Code Snippet:
div {
border: 2px solid black;
}
Takeaways/Best Practices:
- Use CSS border property to create visual elements that enhance the design of your website
- Experiment with different border styles and thicknesses to find what works best for your design.
Topic 7: Length Units in CSS
Absolute Units
Absolute units are fixed units of measurement that are not dependent on other factors, such as the size of the viewport or the font size.
Where is it used?
Absolute units are commonly used in web design and development, particularly in CSS, to ensure consistent sizing and spacing across different devices and screen sizes.
How is it used?
To use absolute units in CSS, simply specify the desired unit of measurement (e.g. pixels or points) when setting the size or spacing of an element.
Code snippet to explain the same:
/* Setting the font size in pixels */
p {
font-size: 16px;
}
/* Setting the padding in points */
div {
padding: 10pt;
}Takeaways / best practices:
- Use absolute units for precise control of sizes and spacing
- Be mindful of how absolute units will appear on different devices and screen sizes
- Consider using relative units (e.g. ems or percentages) in conjunction with absolute units to make your design more adaptable.
Relative Units
What is it:
Relative Units in JavaScript are a way of specifying the size or position of elements in relation to other elements, rather than in absolute terms.
Relative Units are commonly used in CSS to make responsive designs that adapt to different screen sizes, but they can also be used in JavaScript to dynamically adjust the size or position of elements based on other factors.
How is it used:
1. Determine the element or factor you want to base your size or position on.
2. Choose a relative unit, such as percentages (%), ems (em), or viewport units (vw/vh).
3. Use the chosen unit to specify the size or position of the element relative to the base element/factor.
For example, you could use percentage-based width and height values to make an image resize proportionally with the size of its container:
.container {
width: 50%;
height: auto;
}
.image {
width: 100%;
height: auto;
}Takeaways / Best Practices:
- Relative Units are a powerful tool for creating responsive, adaptable designs in JavaScript.
- Use them sparingly and thoughtfully, as they can quickly become confusing and hard to manage.
- Always test your code on different devices and screen sizes to ensure it behaves as expected.
Topic 8: CSS Styling
Inline Styles
What is it:
Inline styles refer to defining the CSS styles directly in the HTML element using the style attribute.
It is used in HTML to define specific styles for a particular element.
How is it used:
- Identify the HTML element to which the style is to be applied.
- Add the style attribute to the element.
- Define the CSS styles within the value of the style attribute.
Example code snippet:
<p style="color: blue; font-size: 18px;">This is a paragraph with inline styles.</p>
Takeaways / best practices:
- Inline styles should be used sparingly and only for specific situations where applying styles to a single element is necessary.
- It is recommended to use external or internal stylesheets for larger projects to keep the code more organized and maintainable.
Colors in CSS
What is it:
Colors in CSS refer to the visual representation of hue, saturation, and lightness used to style web pages. They are used to make web pages more visually appealing and user-friendly.
Colors in CSS are primarily used in styling web pages and web applications. They are used to:
- Define the background and foreground of HTML elements
- Set the color of text and images
- Define the color of borders and outlines
- Create gradients and patterns
- Use animations and transitions
How is it used:
1. Declare a color using its hexadecimal notation or its name
2. Apply the declared color to an HTML element using the "color" or "background-color" property
3. Use CSS selectors to target specific elements and apply colors to them
4. Combine multiple colors to create gradients and patterns using the "background" property
Example of using colors in CSS:
```
/* Declare a color */
p {
color: #006699;
}
/* Apply the color to an HTML element */
<div>
<p>This text will be in blue color</p>
</div>Best practices:
- Use colors that complement each other for better readability and visual appeal
- Be mindful of color blindness and use high contrast color combinations
- Avoid using too many colors in a single web page, as it may create confusion and overcrowding
- Use CSS preprocessors like SASS or LESS to manage colors more efficiently
Fonts in CSS
Fonts in CSS refer to the styles, sizes, and types of text used for displaying content on a webpage.
Where is it used?
Fonts in CSS are used in web development to enhance the readability and visual appeal of text-based content.
How is it used?
1. Select the element to which the font needs to be applied.
2. Define the font-family property with the desired font name or type.
3. Define the font-size property to specify the size of the text.
4. Define the font-weight property to specify the boldness of the text.
5. Define the font-style property to specify the style of the text, for example, italic or normal.
Code snippet to explain the same:
p {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
Takeaways / best practices:
- Use web-safe fonts to ensure the readability of text on different devices.
- Define fallback fonts to ensure that the content is still legible if the primary font is not available.
- Experiment with different font combinations to enhance the visual appeal of text-based content.
Display Property in CSS
What is it:
Display property in CSS defines the type of box model used for an HTML element, including its layout, dimensions, and visibility.
Where is it used:
It is used in CSS to control the visual display of HTML elements on a web page.
How is it used:
1. Select the HTML element that you want to modify the display property for
2. Choose a display property value that fits your desired layout (e.g. block, inline, inline-block, flex, grid, etc.)
3. Apply the desired display property value to the chosen HTML element with CSS code
Example CSS code to illustrate the above:
`css
/* Select the HTML element */
div {
/* Choose the display property value */
display: inline-block;
}Takeaways / best practices:
- Understanding the different display property values and their effects on the layout of HTML elements is crucial for creating well-designed web pages
- Choose the appropriate display property value for the specific HTML element and layout you want to achieve
- Experiment with different display property values to achieve the desired layout for your web page.
object-fit
What is it:
Object-fit is a CSS property used to specify how an image or video should be resized to fit its container.
Where is it used:
It is used in HTML and CSS to control the display of images and videos within a container.
How is it used:
1. Create a container element with a fixed height and width.
2. Assign the object-fit property to the image or video element within the container.
3. Choose from the available values for object-fit, such as cover, contain, or fill.
Example code snippet:
.container {
height: 300px;
width: 400px;
}
img {
object-fit: cover;
}Takeaways/best practices:
- Object-fit can be used to maintain aspect ratio while resizing images and videos.
- It is recommended to use fixed sizing for the container element to ensure consistency.
- Experiment with different values for object-fit to find the best fit for your specific use case.
Topic 9: CSS Positioning
Positioning in CSS
What is it:
Positioning in CSS refers to the placement of an HTML element on a web page, relative to the other elements on the page.
Where is it used:
Positioning is commonly used in web design and development to create visually appealing layouts, such as aligning text and images.
How is it used:
1. Identify the HTML element you want to position.
2. Use the CSS "position" property to set the positioning type (e.g. "absolute", "relative", "fixed").
3. Use other CSS properties, such as "top", "bottom", "left", and "right", to set the position values for the element.
Code snippet:
<div class="container">
<div class="box"></div>
</div>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #eee;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>Best practices for using positioning in CSS:
- Always use the "position" property in conjunction with other positioning properties (e.g. "top", "bottom").
- Avoid using "absolute" positioning for layout elements, as it may cause issues with responsiveness on different screen sizes.
- Use "relative" positioning for elements that should be positioned relative to their original position.
- Use "fixed" positioning for elements that should stay in a fixed position on the screen, even when the user scrolls.
Position: static
What is it:
Position: static is a default CSS property value that sets the position of an element relative to its normal position.
Where is it used:
It is used in CSS to position elements as static elements on a web page.
- By default, all elements have a static position.
- When an element is positioned as static, it remains in its normal position in the document flow, and any other positioning properties do not apply.
Code Snippet:
<div style="position: static;"> <p>This is a static element</p> </div>
Takeaways / Best practices:
- If an element does not need to be positioned according to a specific point on the page, it is best to leave it as static.
- When other positioning values are used, it can affect the layout of the entire page, so it's important to be aware of how the styling may affect other elements.
- When using other positioning values, the parent element's position property should be set to relative to avoid issues with element positioning.
Position: Absolute
What is it:
Position absolute refers to a CSS property that is used to position an element relative to its closest positioned ancestor.
Where it is used:
Position: Absolute is commonly used in web development when creating complex layouts or for adding animation effects.
How it is used:
1. Set the position property of the element you want to position to "absolute".
2. Set the top, right, bottom, and left properties to the desired values. These values will be relative to the closest positioned ancestor.
3. If there is no positioned ancestor, the element will be positioned relative to the document.
Code snippet:
<div style="position: relative;"> <div style="position: absolute; top: 50px; left: 50px;"> This div is positioned 50 pixels from the top and 50 pixels from the left of its closest positioned ancestor. </div> </div>
Takeaways / best practices:
- Position: Absolute should be used with caution, as it can easily cause layout issues if not used correctly.
- Always ensure that the closest positioned ancestor is specified, otherwise the element will be positioned relative to the document.
- Remember that the elements positioned with absolute positioning are taken out of the normal flow of the page.
Position: Relative
Position: Relative is a CSS property that can be used to position an element relative to its normal position on the page.
Where is it used?
Position: Relative can be used in HTML and CSS, and it can also be manipulated using JavaScript.
How is it used?
1. Set the position property to "relative".
Code snippet:
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #eee;
}Takeaways / best practices (mandatory)
-Position: Relative is useful for small adjustments to an element's position on the page.
-It is important to keep in mind that other nearby elements may be affected by the use of Position: Relative.
-Remember to use appropriate units (like "px" for pixels) when applying changes to the element's position.
Position: Fixed
What is it:
"Position: Fixed is a CSS property that sets an element's position relative to the viewport, rather than to its parent element. In JavaScript, it is often used to create sticky elements that stay in a fixed position on the screen as the user scrolls.
Where is it used?
Position: Fixed is commonly used in web development, particularly for navigation menus and other elements that need to be visible and easily accessible at all times.
How is it used?
1. Set the element's position property to ""fixed"" in CSS.
2. Specify the top, bottom, left, or right properties in CSS to determine the element's position on the screen.
Code snippet:
// CSS
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
Takeaways / best practices:
-Use Position: Fixed sparingly and only when necessary, as it can negatively affect the layout of your site.
-Always test Position: Fixed behavior across different devices and screen sizes to ensure it works as intended.
Position: Sticky
What is it:
Position: Sticky in JavaScript is a CSS property that allows an element to be stuck to a specific position when the user scrolls through a webpage.
Where is it used:
It is used in web design to create fixed navigation bars, sidebars, or headers that remain visible as users scroll through the page.
How is it used:
1. Select the element you want to set as "sticky".
2. Add the CSS property "position: sticky" to the element.
3. Specify the distance from the top (or bottom) that the element should remain "sticky" using "top" or "bottom" and a pixel value.
4. If necessary, add additional CSS properties to style the "sticky" element.
`css
.sticky-nav {
position: sticky;
top: 0;
background-color: white;
border-bottom: 1px solid black;
}Takeaways / Best Practices:
- Use Position: Sticky sparingly and only when necessary.
- Avoid using it on elements with large heights as it can cause performance issues.
- Test the sticky element on different screen sizes to ensure it remains visible and usable.
Additional topic: z-index in CSS
Definition and Basics
z-index is a CSS property that controls the vertical stacking order of elements that overlap. In other words, it decides which elements appear in front and which appear at the back in case of an overlap.
z-index only works on elements that have a position value other than static (i.e., relative, absolute, fixed, or sticky).
Usage
The z-index property accepts integer values (positive, negative, or zero). An element with a higher z-index will appear in front of an element with a lower z-index.
If elements have the same z-index or no z-index specified, the stacking order is determined by the order in the HTML document (later elements will be in front of earlier elements).
Example: Positioning a header over a background image.
.header {
position: relative;
z-index: 2;
}
.background-image {
position: absolute;
z-index: 1;
}Topic 10: Flexbox in CSS
Flexbox in CSS
What is it:
Flexbox is a CSS layout module that simplifies the process of creating flexible and responsive web layouts. It allows for easy alignment and positioning of elements within a container, regardless of their size or content.
Flexbox is widely used in modern web design, particularly for creating responsive layouts and dynamic user interfaces. It is used in combination with other CSS layout modules, such as CSS Grid, to create sophisticated and highly customized designs.
How is it used:
1. Define a container element and specify it as a flex container using the display property with a value of flex or inline-flex.
2. Define the layout axis using the flex-direction property with a value of row, column, row-reverse, or column-reverse.
3. Define how the elements are positioned and aligned within the container using properties like justify-content and align-items.
4. Control the specific behavior of individual items within the container using flex properties like flex-grow, flex-shrink, and flex-basis.
Here's an example code snippet to demonstrate Flexbox usage:
css
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
.container > div {
flex: 1;
margin: 10px;
text-align: center;
}Takeaways / Best Practices:
- Keep the container element as simple and uncluttered as possible.
- Avoid overusing Flexbox for simple layouts that can be achieved with other layout modules like grid or float.
- Experiment with different Flexbox properties and combinations to achieve the desired outcome.
- Use responsive design techniques to ensure that the layout remains functional and visually appealing across different screen sizes.
Flex Direction
What is it:
Flex direction is a property of CSS that determines the direction of flexible items within a flex container.
It is used in CSS for responsive design, to control the layout of elements on a webpage, particularly in situations where the number of items and their size is unknown.
How is it used:
- Determine the direction in which the items in the flex container need to be laid out
- Use the 'flex-direction' property in the CSS code to set the desired direction (options include 'row' (default), 'column', 'row-reverse', and 'column-reverse')
- Apply additional CSS properties as needed, such as 'justify-content' and 'align-items', to align items within the container
Code Snippet:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}Takeaways/Best Practices:
- Flex direction is a powerful tool for creating responsive designs that look good on any device or screen size
- Consider using 'row-reverse' or 'column-reverse' when designing complex layouts that require specific item orders
- Experiment with different values for the 'justify-content' and 'align-items' properties to achieve the desired look and feel of the design.
Justify-Content and Align-Items
What is it:
Justify-Content and Align-Items are both CSS properties that are used to control the positioning and alignment of elements on a web page.
Where is it used: justify-content
- Justify-Content is used to horizontally align content within a container.
- It is commonly used in CSS Flexbox layouts.
How is it used: justify-content
1. Apply display:flex to the container element.
2. Set justify-content to the desired value (e.g. center, space-between, flex-end).
-Example code snippet:
.container {
display:flex;
justify-content:center;
}- Best practices for using Justify-Content:
- Use it sparingly and only when necessary.
- Try to keep the layout simple and avoid using too many values for Justify-Content.
Where is it used: align-items
- Align-Items is used to vertically align content within a container.
- It is commonly used in CSS Flexbox layouts.
How is it used: align-items
1. Apply display:flex to the container element.
2. Set align-items to the desired value (e.g. center, stretch, flex-end).
-Example code snippet:
.container {
display:flex;
align-items:center;
}- Best practices for using Align-Items:
- Use it sparingly and only when necessary.
- Try to keep the layout simple and avoid using too many values for Align-Items.
Wrapping Flex Items
What is it:
Wrapping Flex Items is a technique used in CSS to control how flex items are displayed when they exceed the width of their container.
It is used in situations where we want to ensure that flex items don't overflow their container, but instead wrap to a new line or even multiple lines.
How is it used:
1. Set the container's display property to "flex" or "inline-flex".
2. Set the flex-wrap property to "wrap".
3. Optionally, set the flex-flow property to combine the flex-direction and flex-wrap properties in one declaration.
Example code snippet:
.container {
display: flex;
flex-wrap: wrap;
}Best practices:
- Consider using media queries to adjust flex item wrapping behavior based on screen size or other factors.
- Be careful not to set the flex item width or max-width too high, as this can cause unwanted wrapping behavior.
- Use the justify-content and align-items properties to center or align flex items within the container.
Topic 11: CSS Specificity
CSS Specificity
What is it:
CSS Specificity is a way of determining which CSS rules are applied to an element when multiple conflicting rules exist.
It is used in web development when multiple CSS rules are applied to an element and there is a specificity conflict.
How is it used:
- The rule with the highest specificity value wins
- Specificity is based on the number of ID, class, and element selectors used
- Multiple selectors of the same type are added together to create the specificity value
For example, a rule with one ID selector has a higher specificity than a rule with five class selectors.
Code snippet:
/* selector with lower specificity */
p {
color: blue;
}
/* selector with higher specificity */
#myID p {
color: red;
}In the above example, the second selector has a higher specificity because it includes an ID selector in addition to the element selector. Therefore, the color of the text inside `p` elements with the ID `myID` will be red, even though the first selector sets the color to blue for all `p` elements.
Takeaways/best practices:
- Avoid using ID selectors in CSS as much as possible, since they have a very high specificity and can lead to conflicts.
- Use more general selectors (such as element selectors or class selectors) whenever possible to ensure that your CSS rules are not overridden by rules with higher specificity.
- If you need to increase specificity, use multiple class or element selectors instead of ID selectors.
Topic 12: Inheritance in CSS
Inheritance in CSS
What is it:
Inheritance in CSS refers to the ability of child elements to inherit certain styles from their parent element.Where is it used?
Inheritance is used in CSS to write more efficient and concise styles, as well as to help maintain consistency across a website.
How is it used?
-Define the style for the parent element
-Use the keyword 'inherit' for the child element to inherit the same style as parent element
-Override the inherited styles as needed
/* Code snippet to explain the same */
.parent {
color: red;
}
.child {
color: inherit;
/* The 'child' element will have the same color as its parent ('red') */
}Best Practices:
-Use inheritance to avoid writing unnecessarily duplicate styles
-Be mindful of potential unintended consequences when using inheritance
-Override inherited styles as needed to achieve the desired design.
Topic 13: Cascading in CSS
Cascading in CSS
What is it:
Cascading in CSS refers to the process through which multiple stylesheets and rulesets are applied to an HTML document. It allows for the creation of a coherent and consistent visual design for a website or web application.
- Define a set of rules that apply to all elements in a document
- Override those rules for specific elements or groups of elements
- Define rules that apply only under certain conditions, such as when an element is hovered over or clicked on
How is it used:
1. Create a base stylesheet that defines the overall look and feel of the website.
2. Add additional stylesheets to the page with more specific rules for individual elements or groups of elements.
3. Use the "cascade" of stylesheets to prioritize conflicting rules, with the most specific rules taking precedence.
// For example, consider the following HTML code:
<p class="highlight">This is an important paragraph.</p>
A base stylesheet might define the font and background color for all paragraphs:
p {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: white;
}/* However, we might want to highlight this particular paragraph by changing the background color. We could do this by adding a more specific rule to a different stylesheet: */
.highlight {
background-color: yellow;
}In this case, the highlight rule takes precedence over the base paragraph rule, because it is more specific (it applies only to paragraphs with the "highlight" class).
Best practices for using cascading in CSS include:
- Use descriptive class names to make it easier to understand and organize stylesheets.
- Don't rely too heavily on the cascade to solve styling conflicts - try to create rules that don't conflict in the first place.
- Keep stylesheets as small as possible to minimize load times.
Topic 14: Responsive Web Design
Responsive Web Design
What is it:
Responsive web design is a design approach where a website is designed and developed to provide a consistent user experience across multiple devices with different screen sizes.
It is used across different industries where websites are accessed across devices of different screen sizes such as desktops, laptops, tablets, and smartphones.
How is it used:
1. Flexible grid-based layouts that adapt to varying screen sizes.
2. Media queries - CSS rules that define how a website should be displayed on different devices.
3. Fluid images and videos that adjust their size and resolution to fit the screen.
4. Responsive typography that adapts to the screen and font size of the device.
Code Snippet:
@media screen and (max-width: 768px) {
/* CSS rules for mobile devices */
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
/* CSS rules for tablets */
}
@media screen and (min-width: 1025px) {
/* CSS rules for desktops */
}Takeaways/Best Practices:
1. Use a mobile-first approach when designing and developing a responsive website
2. Prioritize content and avoid cluttering the website with unnecessary elements
3. Test the website across multiple devices and screen sizes to ensure a consistent user experience
4. Use responsive images and videos to improve website performance and speed
5. Avoid using fixed layouts and instead use flexible grid-based layouts.
CSS Breakpoints
What is it?
CSS breakpoints are points at which a webpage’s layout changes based on the size of the viewport.
Where is it used?
CSS breakpoints are commonly used in responsive web design to ensure that a webpage is mobile-friendly and adjusts to the screen size.
How is it used?
- Identify the breakpoints: Determine the points at which you want your webpage to adjust its layout based on the viewport size.
- Define the media queries: Use media queries in your CSS to apply specific styling rules for different viewport sizes.
- Test the breakpoints: Test your webpage on various devices and screen sizes to ensure that the layout adjusts appropriately.
Takeaways / best practices:
- Use a mobile-first approach: Start your design with smaller mobile devices and work your way up to larger screen sizes.
- Use relative units: Use ems or percentages instead of pixels to ensure that your design is scalable.
- Optimize images: Use smaller, optimized images to reduce load times on mobile devices.
- Test on various devices: Test your webpage on various devices to ensure that the layout is responsive and looks good on all screens.
@media Rule
The @media rule is a CSS rule that is used to apply different styles to a web page based on screen size or device type.
Where is it used?
The @media rule is primarily used in CSS files to create responsive designs that adapt to different screen sizes and orientations.
How is it used?
To use the @media rule, follow these steps:
1. Open your CSS file.
2. Add a media query using the @media rule, specifying the screen size or device type that you want to target.
3. Within the media query, define the styles that should be applied to elements that meet the criteria of the media query.
Example Code Snippet:
@media (max-width: 768px) {
/* styles that should be applied when screen size is <= 768px */
body {
font-size: 16px;
}
}Takeaways / Best Practices:
- Use the @media rule to create responsive designs that work well across different screen sizes and devices.
- Use media queries to target specific screen sizes or device types.
- Test your designs across different devices to ensure they look great and work correctly.
Topic 15: Bootstrap
Bootstrap Classes
What is it:
Bootstrap classes are predefined styles and layouts that can be used to design and develop responsive web pages. It also includes various components like navigation bars, forms, modals, alerts, and many more that can be used to enhance the user experience on a website.
Bootstrap classes can be used in HTML and CSS files to add styling and functionality to web pages.
How is it used:
1. Include the Bootstrap CDN or download and include the Bootstrap CSS and JS files in your project.
2. Add the required HTML markup for the component you want to use.
3. Add the required Bootstrap classes to the HTML elements.
4. Customize the styles using your own CSS if needed.
Code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Classes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center">Bootstrap Classes</h1>
<div class="row">
<div class="col-md-6">
<form>
Form Content Here
</form>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>Takeaways / Best Practices:
1. Always include the latest version of Bootstrap in your project to ensure that you have access to the latest features and bug fixes.
2. Use the available classes and components provided by Bootstrap instead of creating your own styles and components from scratch to save time and effort.
3. Customize the styles using your own CSS only when needed to avoid conflicts with the Bootstrap styles.
4. Test your web pages on different devices and screen sizes to ensure that they are responsive and work as intended.
Topic 16: Git
Git
What is it:
Git is a version control system that allows developers to track changes to their code and collaborate with others on projects.Where is it used?
Git is widely used in the software development industry, including JavaScript projects.
How is it used?
1. Create a Git repository for your project
2. Initialize Git in your project directory using the command "git init"
3. Add files to the staging area using "git add <filename>"
4. Commit changes to the repository using "git commit -m <commit message>"
5. Push changes to a remote repository using "git push"
Code snippet:
// Initialize Git git init // Add files to staging area git add index.js // Commit changes to the repository git commit -m "Added new function to index.js" // Push changes to remote repository git push origin master
Takeaways / best practices:
1. Always commit changes with a descriptive commit message
2. Use branching to work on new features without affecting the main codebase
3. Pull changes from the remote repository before making local changes to avoid conflicts.
Github
What is it:
GitHub is a web-based platform that allows developers to host, manage, and review code.
Used for version control and collaboration on software development projects.
How is it used:
1. Create a GitHub account and repository.
2. Add and commit code changes to the repository.
3. Push code changes to the remote repository hosted on GitHub.
4. Collaborate with other developers by creating branches, merging code, and submitting pull requests.
//Code snippet for committing changes: git add . git commit -m "added new function" git push origin master
-Takeaways and best practices:
1. Use descriptive commit messages to track changes.
2. Use branches to keep code changes isolated until they are ready to be merged.
3. Regularly review and merge code changes to ensure the project remains on track.
4. Use issues and pull requests to track bugs and feature requests.
git init
- git init is a command used to initialize a new Git repository.
Where is it used?
- It is commonly used in software development projects, including JavaScript projects.
How is it used?
1. Open up your terminal or command prompt.
2. Navigate to the directory where you want to create your new Git repository.
3. Type `git init` and press enter.
4. This initializes a new Git repository in the current directory.
Code Snippet:
$ cd /path/to/your/repo $ git init
Takeaways / Best Practices:
- Use git init when starting a new project to easily set up version control for your project.
- Make sure to commit frequently to keep track of changes in your code.
- Use descriptive commit messages to help you and your team understand the changes made.
- Be mindful of the files and directories included in your repository to avoid committing unnecessary files or sensitive information.
git clone
What is it:
Git Clone is a command used to create a copy of a specific Git repository.
It is used to clone a remote repository onto your local machine, allowing you to make changes to the code and push those changes back to the remote repository.
How is it used:
1. Open your terminal
2. Navigate to the directory where you want to clone the repository
3. Copy the URL of the repository you want to clone from GitHub or any other Git based service
4. In your terminal, type "git clone <repository URL>" and press enter
5. Wait until the cloning process is completed
Code Snippet:
git clone https://github.com/username/repo.git
Takeaways/Best Practices:
- Always double-check the repository URL before cloning to ensure the right repository is being cloned.
- It’s a good practice to fork the repository instead of cloning if you want to experiment with it without affecting the original repository.
- Keep the cloned repositories updated with the latest changes from the upstream repository.
git add
Git add is a command in Git that adds changes made to a file to the staging area to be ready for committing.
How is it used?
1. Navigate to the project folder in the terminal.
2. Use the command "git status" to view the current status of files in the project.
3. Make changes to a file(s) in the project folder.
4. Use the command "git add <filename>" to add the changes made in a specific file to the staging area OR use the command "git add ." to add changes made in all files to the staging area.
5. Use the command "git status" again to verify that the changes have been added to the staging area and ready for committing.
**Code snippet**
// add changes made in a specific file to the staging area git add app.js // add changes made in all files to the staging area git add .
Takeaways / best practices:
- Use the git add command to selectively add changes made to a file or all files to the staging area before committing.
- Regularly use the "git status" command to view the current status of files in the project and keep track of changes made.
- Avoid adding unnecessary changes to the staging area to keep the commits concise and organized.
git commit
What is it:
Git commit is a command used in version control systems like Git, to save changes made to a code repository.Where is it used?
Git commit is used in development environments where multiple developers are working on the same codebase. It helps in keeping track of changes made to the codebase and also enables easy collaboration between developers.
How is it used?
1. Open a terminal or command prompt and navigate to the root directory of your Git repository.
2. Use the command "git add ." to stage the changes made to your code. This will add all the changes made to your code to the staging area.
3. Next, use the command "git commit -m 'commit message'" to save the changes made to your code. Replace 'commit message' with a concise message that describes the changes made to the code. This message should be brief and to the point.
Code snippet to explain the same:
//add changes made to your code git add . //commit the changes made to your code git commit -m "added a new function to calculate factorial"
Takeaways / best practices:
-Commit often, and don't wait until you have a large number of changes to commit.
-Use descriptive commit messages that help other developers understand the changes made to the code.
-Always remember to push your changes to the remote repository after committing.
git push
git push is a command used in Git version control system to upload local repository content to a remote repository.
Where is it used?
Git push is commonly used in software development projects for collaboration between team members who work on the same project and also to keep the local and remote code repositories in sync.
How is it used?
- Before using git push, the user should first commit changes using the "git commit" command.
- Git push can be used with different parameters. The basic syntax for git push is as follows: git push [remote repository] [branch].
- After executing the command, the local changes get uploaded to the remote repository and the remote repository is updated.
Code snippet to explain the same:
git push origin master
This command pushes the changes from the local master branch to the origin remote repository.
Takeaways / best practices:
- Always use "git pull" before using "git push" to ensure that the local and remote repositories are in sync.
- Use descriptive commit messages to make it easier to understand the changes.
- If multiple team members are working on the same branch, use "git pull --rebase" instead of "git pull" to avoid merge conflicts.
- Avoid force-pushing unless necessary as it overwrites the remote repository's history.
- Use meaningful branch names to make collaboration easier.
git pull
What is it:
Git Pull is a command used to update a local repository with the changes made in a remote repository.Where is it used?
Git Pull is used in scenarios where a developer wants the changes made by other team members pushed to the central repository to be downloaded and incorporated into their local repository.
How is it used?
- Open the terminal or command prompt in the project's directory.
- Execute git pull command by typing git pull and press enter.
- The changes from the remote repository will be downloaded and merged with the local repository.
Code snippet:
git pull
Takeaways / Best practices:
- Always ensure to update the local repository before making any changes and pushing them to the central repository.
- Resolve any merge conflicts before pushing the changes to the central repository.
git status
What is it:
Git status is a command used in the Git version control system to check the status of the current repository.Where is it used?
Git status is used in any project using Git for version control, including JavaScript projects.
How is it used?
1. Open the terminal or Git Bash from the command line.
2. Navigate to the directory of the project using the command cd and the path to the project.
3. Type the command git status to see the current status of the repository.
4. Git status displays the branch you are currently on, any changes made to files that have not yet been committed, and any files that have been modified or added since the last commit.
5. If there are changes that need to be committed, use the git add command to stage the changes, followed by git commit to commit them to the repository.
Code snippet:
$ cd my-project
$ git status
On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git restore <file>..." to discard changes in working directory)
modified: index.js
no changes added to commit (use "git add" and/or "git commit -a")The above example is just for illustration purposes, the actual result might look different.
Takeaways / best practices:
- Git status is a helpful command to check the status of your repository and make sure all changes are committed.
- Be sure to run Git status regularly to stay on top of any changes made to files in your project.
- Use Git add and Git commit to keep track of changes and commit them to the repository.
git log
What is it:
Git log is a command used in the Git version control system. It shows a detailed history of changes made to a project, including commit messages, authors, dates, and other relevant information.
Git log is used by developers to keep track of the changes made to a project and to collaborate with other developers. It is a helpful tool when managing large, complex codebases, as it allows developers to track and troubleshoot changes made by different team members.
How is it used:
1. Open the command line interface (CLI) in the project folder
2. Type "git log" and hit enter
3. The log will display with the most recent commits first
4. Use the arrow keys or scroll to navigate through the list
5. To exit the log, type "q" and hit enter.
Code snippet:
git log
Takeaways/best practices:
- Use descriptive commit messages to make it easier to track changes
- Regularly review the git log to stay informed about changes made to the project
- Collaborate with other developers by using git log to identify and resolve conflicts in code.
git branch
What is it:
Git branch is a feature in Git that allows developers to create separate paths of development within the same repository.Where is it used?
- Git branch is commonly used in software development projects that require multiple versions and iterations of the same codebase.
How is it used?
- Create a new branch: `git branch [branch-name]`
- Switch to a branch: `git checkout [branch-name]`
- Merge a branch: `git merge [branch-name]`
- Delete a branch: `git branch -d [branch-name]`
Code snippet:
# Create a new branch git branch feature-branch # Switch to the new branch git checkout feature-branch # Make changes to code # Add and commit changes git add . git commit -m "Added new feature" # Switch back to main branch git checkout main # Merge feature branch with main branch git merge feature-branch # Delete feature branch git branch -d feature-branch
Takeaways / best practices:
- Always create a new branch for new features or bug fixes
- Keep the main branch stable and use feature branches for experimentation
- Merge branches frequently to avoid conflicts and ensure code consistency
- Delete branches once they are no longer needed to avoid clutter in the repository
Additional Topics
CSS Grids
I. Definition and Basics
CSS Grid Layout is a two-dimensional layout system for the web. It provides a way to lay out elements along rows and columns, making it easier to design complex web pages without needing to use floats or positioning.
It consists of a parent grid container and child grid items.
II. Grid Container
To make an HTML element a grid container, you set its display property to grid or inline-grid.
Grid containers have properties that control the layout of the grid, such as grid-template-rows, grid-template-columns, grid-gap.
Example: Defining a grid container with three equally sized columns and two rows of different sizes.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px auto;
}III. Grid Items
Grid items are the direct children of a grid container.
They have properties that control their placement and sizing within the grid, such as grid-column, grid-row, and grid-area.
Example: Positioning a grid item to span the first two columns and the first row.
.item {
grid-column: 1 / 3;
grid-row: 1;
}IV. Fr Unit
The fr unit represents a fraction of the available space in the grid container. It is used with the grid-template-columns and grid-template-rows properties to distribute remaining space after all other sizing properties have been accounted for.
CSS Flexbox
I. Definition and Basics
CSS Flexbox, or the Flexible Box Layout, is a one-dimensional layout model that offers space distribution between items in an interface and powerful alignment capabilities. It's particularly useful for creating complex layouts and aligning elements horizontally or vertically.
It consists of a parent flex container and child flex items.
II. Flex Container
To make an HTML element a flex container, you set its display property to flex or inline-flex.
Flex containers have properties that control the layout of the flex items, such as flex-direction, flex-wrap, justify-content, align-items, and align-content.
Example: Creating a row-direction flex container with wrap, centered items.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}III. Flex Items
Flex items are the direct children of a flex container.
They have properties that control their sizing and order within the container, such as flex-grow, flex-shrink, flex-basis, and order.
Example: Making a flex item that grows and shrinks as needed, with a starting size of 200px.
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
}IV. Flex Direction
The flex-direction property determines the main axis over which the items should be distributed. It can be row (default), row-reverse, column, or column-reverse.
V. Justify Content, Align Items, and Align Content
justify-content controls the alignment of items along the main axis (horizontal for row, vertical for column).
align-items controls the alignment of items along the cross axis (perpendicular to the main axis).
align-content controls the alignment of the flex lines when there is extra space in the cross-axis.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article