Build your responsive webpage., Study notes of Computer Science

Download Build your responsive webpage. and more Study notes Computer Science in PDF only on Docsity!

Build

Your

First

Responsive Website.

A Short Hand Class Note Book for Beginners.

Made by a student with a clean passion for web development.

Introduction to html:

HTML is the Hypertext Markup Language, the foundation of all web pages. It is a markup language, which means that it uses tags to define the structure and content of a web page.

Basic Structure:

The basic structure of any HTML document is as follows: HTML

My First HTML Page

This is my first HTML page!

This is a paragraph.

Click me!

● The declaration tells the browser that this is an HTML document. ● The element is the root element of an HTML document. It contains the and elements. ● The element contains metadata about the document, such as the title and the character encoding. ● The element contains the content of the document, such as text, images, and other elements. Heading Element: The element defines a main heading. It can be used to create a hierarchy of headings, with being the largest and being the smallest. HTML This is a main heading This is a subheading This is a third-level heading Paragraph Element: The

element defines a paragraph. It is used to group together a block of text. HTML

This is a paragraph.

This is another paragraph.

Button Element: The element defines a button. It can be used to create interactive elements on a web page. HTML Click me!

4. font-weight: Specifies the weight of the text.
5. text-align: Specifies the horizontal alignment of the text. Sample Colors: The following are some common CSS color names:
6. blue
7. grey
8. lightblue
9. orange
10. red
11. green You can also specify colors using hexadecimal values, such as #ffffff for white and #000000 for black. CSS Background Properties: CSS background properties allow you to control the background of an HTML element. Some common CSS background properties include:
12. background-color: Specifies the background color of the element.
13. background-image: Specifies a background image for the element.
14. background-repeat: Specifies how the background image is repeated.
15. background-position: Specifies the position of the background image. Background Color: The background-color property specifies the background color of an HTML element. The possible values for the background-color property are the same as the possible values for the color property. For example, the following CSS code would set the background color of the div element to red: CSS div { background-color: red; } CSS Font Properties: CSS font properties allow you to control the appearance of the font on your web pages. Some common CSS font properties include:
16. font-family: Specifies the font for an element.
17. font-size: Specifies the size of the font.
18. font-style: Specifies the font style for a text.
19. font-weight: Specifies how thick or thin characters in text should be displayed. Font Family: The font-family property specifies the font for an element. You can use one of the following values for the font-family property:
20. A list of font families, separated by commas.
21. A generic font family, such as sans-serif or serif.
22. A custom font, which must be imported into your CSS file. For example, the following CSS code would set the font family of the div element to Helvetica, sans-serif: CSS

div { font-family: Helvetica, sans-serif; } Font Size: The font-size property specifies the size of the font. The value of the font-size property is a number followed by the unit of measurement, which can be px, em, or rem. For example, the following CSS code would set the font size of the div element to 16 pixels: CSS div { font-size: 16px; } Font Style: The font-style property specifies the font style for a text. The possible values for the font-style property are normal, italic, and oblique. For example, the following CSS code would set the font style of the div element to italic: CSS div { font-style: italic; } Font Weight: The font-weight property specifies how thick or thin characters in text should be displayed. The possible values for the font-weight property are normal, bold, bolder, lighter, and a number followed by the unit of measurement, which can be 100, 200, 300, 400, 500, 600, 700, 800, or 900. For example, the following CSS code would set the font weight of the div element to bold: CSS div { font-weight: bold; } Text Decoration: The text-decoration property specifies the decoration added to the text. The possible values for the text-decoration property are underline, line-through, and overline. For example, the following CSS code would underline the text in the div element: CSS

Viewport: The viewport is the area of the window in which web content can be seen. The CSS viewport height (vh) unit equals to 1% of the height of the viewport, and the CSS viewport width (vw) unit equals to 1% of the width of the viewport. For example, the following CSS code would set the height of the div element to 100% of the viewport height: CSS div { height: 100vh; } CSS Box Properties: The following are some common CSS box properties:

1. border-width: Specifies the width of the border for all four sides of an HTML element.
2. border-radius: Specifies the roundness of the corners of an HTML element.
3. border-color: Specifies the color of the border for all four sides of an HTML element.
4. border-style: Specifies the style of the border for all four sides of an HTML element.
5. padding: Specifies the space around the content of an HTML element. CSS Colors: CSS colors can be represented in multiple ways, including:
6. Color names
7. Hex codes
8. HSL
9. RGB Hex codes are a good way to pick a wide variety of colors, since few colors have color names. A hex code is a six-digit code that represents a color. The first two digits represent the red component of the color, the next two digits represent the green component, and the last two digits represent the blue component. For example, the hex code for red is #ff0000. This means that the red component of the color is 255, the green component is 0, and the blue component is 0. You can use a color picker to pick a color and get its hex code. There are many color pickers available online. How to Pick a Color Using Hex Code To pick a color using hex code, you can follow these steps:
10. Go to a color picker website.
11. Pick a color that you like.
12. The color picker will display the hex code for the color.
13. Copy the hex code.
14. Use the hex code in your CSS code. For example, the following CSS code would set the background color of the div element to red: CSS div { background-color: #ff0000;

Introduction to bootstrap:

Bootstrap is a free and open-source CSS framework that helps you create responsive, mobile-first web pages. It provides a number of predefined CSS classes that you can use to style your HTML elements. Reusability of CSS Rulesets: If you want the same style for multiple HTML elements, you can write the CSS ruleset once and use it for different HTML elements. This is called the reusability of CSS rulesets. For example, the following CSS ruleset would set the font family, font size, and color of all h1 elements to Verdana, 16px, and black, respectively: CSS h1 { font-family: Verdana; font-size: 16px; color: black; } You can then use this ruleset for any h1 element in your HTML document. Multiple Class Names as an HTML Attribute Value You can provide multiple class names separated by space as a value to the HTML class attribute. For example, the following HTML code would add the btn and btn-primary class names to the button element: HTML Click me! The btn class name will apply the default button style, and the btn-primary class name will apply the primary button style. Bootstrap: Bootstrap is a large collection of predefined reusable code snippets written in HTML, CSS, and JavaScript. The code snippets include buttons, cards, carousels, and many more. How to Use Bootstrap? To use the code snippets provided by Bootstrap, you need to add the following code within the HTML head element: HTML

This will load the Bootstrap CSS file from a CDN (content delivery network).

CSS

.d-flex { flex-direction: column; } Justify Content: The justify-content property specifies the alignment of flex items along the Flex Direction in a Flexbox Container. The possible values for the justify-content property are:

1. start: The flex items are aligned at the start of the Flexbox Container.

2. center: The flex items are aligned in the center of the Flexbox Container.

3. end: The flex items are aligned at the end of the Flexbox Container.

4. space-between: The flex items are evenly spaced between the start and end of the Flexbox Container.

5. space-around: The flex items are evenly spaced around the Flexbox Container. For example, the following CSS code would change the justify-content of the Flexbox Container in the previous example to space-around: CSS .d-flex { justify-content: space-around; } HTML Elements:

6. Image Element The img element defines an image. It has a single required attribute, src, which specifies the path (URL) of the image. For example, the following HTML code defines an image with the source URL https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/tajmahal-img.png: HTML

7. Void Elements The HTML elements that only have a start tag and do not contain content or end tag are called as void elements. For example, the img element is a void element.

8. CSS Box Model Properties The CSS box model is a way of representing the layout of an HTML element. It consists of four parts:

9. The content: This is the actual text or image that is displayed in the element.

10. The padding: This is the space around the content.

11. The border: This is the line that surrounds the content and padding.

12. The margin: This is the space around the border.

The margin property specifies the space around the four sides of an HTML element. You can use the following CSS properties to apply a margin on the specific side of an HTML element:

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left For example, the following CSS code would set the margin of the img element to 10px on all sides: CSS img { margin: 10px; } HTML Images and CSS Background Images: There are two ways to add images to a web page: using the img element or using the background-image property in CSS. The img element is used to add an image that is part of the content of the page. The background-image property is used to add an image that is behind the content of the page. When to Use HTML Images: You should use the img element when you want the image to be part of the content of the page. For example, you would use the img element to add an image of a product on an e-commerce website. When to Use CSS Background Images: You should use the background-image property when you want the image to be behind the content of the page. For example, you would use the background-image property to add a background image to a web page. CSS Margin and Padding: The margin and padding properties are used to add space around HTML elements. The margin property adds space around the outside of the element, while the padding property adds space around the inside of the element. When to Use CSS Padding: You should use the padding property when you want to add space between the content of an element and its border. For example, you would use the padding property to add space between the text in a button and its border. When to Use CSS Margin: You should use the margin property when you want to add space between an element and other elements on the page. For example, you would use the margin property to add space between two buttons on a page. Example The following code shows an example of how to use the img element and the background-image property: HTML

My Website

Bootstrap Utilities: Bootstrap Utilities are a collection of helper classes that can be used to style your web pages. They are a great way to quickly and easily add common styles to your elements. One of the Bootstrap Utilities is the embed class. This class can be used to embed videos from YouTube, Vimeo, and other video platforms. To embed a video from YouTube, you can use the following code: HTML

This code will embed the YouTube video with the ID video_id in your web page. You can customize the appearance of the embedded video by using the embed-responsive-item class. For example, you can change the width and height of the video, or you can add a border around the video. HTML Lists: Lists are a way to group related pieces of information so that they are easy to read and understand. There are two main types of lists in HTML:

1. Unordered lists
2. Ordered lists Unordered Lists: Unordered lists are a collection of related items that have no special order or sequence. They are typically marked with bullets. To create an unordered list, you use the ul tag. Each list item starts with the li tag. For example, the following code creates an unordered list of hobbies: HTML

Painting Reading books Playing the guitar

Ordered Lists: Ordered lists are a collection of related items that follow some order or have a sequence. They are typically marked with numbers. To create an ordered list, you use the ol tag. Each list item starts with the li tag. For example, the following code creates an ordered list of web technologies: HTML

HTML

CSS JavaScript

Styling Lists: You can style the lists using CSS. The list-style-type property is used to change the bullets or numbers used in the list. For example, the following code changes the bullets in the unordered list to squares: CSS ul { list-style-type: square; } The following code changes the numbers in the ordered list to Roman numerals: CSS ol { list-style-type: lower-roman; } HTML Hyperlinks: Hyperlinks are text or images that allow users to navigate to other web resources or a specific element within the HTML document. They are also called links. The a element is used to create hyperlinks. The href attribute specifies the URL or path of the web resource that the link points to. The target attribute specifies where to open the linked web resource. For example, the following code creates a hyperlink that points to the Google homepage: HTML Google The target attribute can be used to open the linked web resource in a new tab or window. For example, the following code opens the linked web resource in a new tab: HTML Google You can also use the a element to create hyperlinks that navigate to different sections within the same HTML document. To do this, you need to add an id attribute to the section that you want to navigate to. Then, you can use the href attribute to specify the value of the id attribute as the URL of the link. For example, the following code creates a hyperlink that navigates to the section with the ID my-section:

When you place more than 12 grid columns in a single row, the extra grid columns will wrap in a new line. For example, the following code creates a row with 15 columns: HTML

This is the first column. This is the second column. This is the third column. This is the fourth column. This is the fifth column.

The first four columns will be displayed on the first line, and the fifth column will be displayed on the second line. Responsive Breakpoints: Bootstrap provides different Bootstrap Grid Column class name prefixes for five responsive tiers (responsive breakpoints). These breakpoints are used to define how the layout will be displayed on different screen sizes. The five responsive tiers are:

1. Extra small devices (<576px)
2. Small devices (>=576px)
3. Medium devices (>=768px)
4. Large devices (>=992px)
5. Extra large devices (>=1200px) The class name prefix for each responsive tier is:
6. col-: This is the default class name prefix. It is used for all devices.
7. col-sm-: This class name prefix is used for small devices and larger.
8. col-md-: This class name prefix is used for medium devices and larger.
9. col-lg-: This class name prefix is used for large devices and larger.
10. col-xl-: This class name prefix is used for extra large devices and larger. For example, the following code creates a column that will be 6 columns wide on small devices and larger: HTML This is a column that is 6 columns wide on small devices and larger. Class names in combination: You can use a combination of different Bootstrap class names for each Bootstrap Grid Column. This can be used to create more complex layouts. For example, the following code creates a column that will be 4 columns wide on small devices, 6 columns wide on medium devices, and 8 columns wide on large devices and larger: HTML This is a column that is 4 columns wide on small devices, 6 columns wide on medium devices, and 8 columns wide on large devices and larger.

CSS Box Properties: The CSS box properties define the margins, padding, and borders of an HTML element. Margin: The margin property defines the space between the element's border and the adjacent elements or the edge of the viewport. Padding: The padding property defines the space between the element's content and its border. Border: The border property defines the lines that surround the element. Bootstrap Spacing Utilities: Bootstrap provides a number of CSS class names that can be used to quickly and easily set the margins, padding, and borders of an HTML element. Margin Utilities: The margin utilities are prefixed with m-. The asterisk () symbol can be any number in the range of 0 to 5. For example, m- defines a margin of 5 pixels. Padding Utilities: The padding utilities are prefixed with p-. The asterisk () symbol can be any number in the range of 0 to 5. For example, p- defines a padding of 3 pixels. Background Color Utilities: The background color utilities are prefixed with bg-. You can use one of the following Bootstrap class names to apply a background color to an HTML element:

1. bg-primary
2. bg-secondary
3. bg-success
4. bg-danger
5. bg-warning
6. bg-info
7. bg-light
8. bg-dark Developing Layouts for Five Responsive Breakpoints Bootstrap provides five responsive breakpoints that can be used to define how the layout will be displayed on different screen sizes.
9. Extra small devices (<576px)
10. Small devices (>=576px)
11. Medium devices (>=768px)
12. Large devices (>=992px)
13. Extra large devices (>=1200px) You can use the Bootstrap grid system and the spacing utilities to create layouts that are responsive to these five breakpoints. Color Palette: Bootstrap provides a color palette that can be used to style the elements in your layout. The color palette consists of 10 colors:
14. Primary
15. Secondary

Contact

The nav element is the container element for the navbar. The ul element is used to list the links in the navbar. The li element is used to represent a single link in the navbar. The a element is used to create a hyperlink. The nav element has the following CSS properties:

1. background-color: This property is used to set the background color of the navbar.
2. color: This property is used to set the text color of the navbar.
3. font-size: This property is used to set the font size of the navbar. The ul element has the following CSS properties:
4. list-style-type: This property is used to set the list style type of the navbar.
5. padding: This property is used to set the padding of the navbar. The li element has the following CSS properties:
6. margin: This property is used to set the margin of the navbar.
7. padding: This property is used to set the padding of the navbar. The a element has the following CSS properties:
8. color: This property is used to set the text color of the hyperlink.
9. text-decoration: This property is used to set the text decoration of the hyperlink. CSS Selectors: CSS selectors are used to select the HTML elements that we want to style. The different types of CSS selectors are:
10. Simple selectors
11. Class selectors
12. ID selectors
13. Type (tag name) selectors
14. Attribute selectors
15. Universal selectors
16. Pseudo-classes
17. Compound selectors
18. Complex selectors Simple Selectors: Simple selectors are the most basic type of CSS selectors. They are used to select HTML elements based on their tag name. For example, the following selector selects all the elements: h Class Selectors: Class selectors are used to select HTML elements that have a specific class attribute. For example, the following selector selects all the

    elements that have a class of "paragraph": .paragraph

ID Selectors: ID selectors are used to select HTML elements that have a specific ID attribute. For example, the following selector selects the

element that has an ID of "populationParagraph": #populationParagraph Type (Tag Name) Selectors: Type (tag name) selectors are used to select HTML elements based on their tag name. For example, the following selector selects all the

elements: p Attribute Selectors: Attribute selectors are used to select HTML elements that have a specific attribute. For example, the following selector selects all the

elements that have an id attribute with the value of "populationParagraph": [id="populationParagraph"] Universal Selectors: The universal selector is represented by an asterisk (*). It is used to select all HTML elements. For example, the following selector selects all the HTML elements: * Pseudo-classes: Pseudo-classes are used to select HTML elements based on their state or condition. For example, the following selector selects all the

elements that are currently active: p:active Compound Selectors: Compound selectors are used to combine multiple selectors. For example, the following selector selects all the

elements that have a class of "paragraph" and are currently active: .paragraph:active Complex Selectors: