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

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