sahithweb

[sahithweb]

WordPress

WordPress is a content management system that is free and open-source (CMS). It's a popular tool for people who want to create websites and blogs but don't know how to code. The software is completely free. It is completely free to download, use, and modify.

WordPress does not necessitate a degree in computer engineering. It was designed with non-technical users in mind. The user interface is simple and easy to use. You can simply download a theme to give your website a fresh look. You simply install a plugin to add a new feature, such as a contact form. Web development tasks that previously took hours to perform can now be completed in minutes.

Used for business

A corporate website will need to get even more mileage out of WordPress, as it will often have more pages and articles than a typical personal blog or site, as well as additional capabilities. WordPress, on the other hand, is amazing at satisfying those needs, thanks to its robust built-in CMS capabilities and the open-source community's continued iteration of solutions.

You can pick a website theme that best suits your needs and then tweak it to fit your business. The layout process is made even easier using page builders like Elementor and Divi.

You'll be able to integrate and expand your business with WordPress thanks to plugins for SEO, lead acquisition, analytics, and more.

[sahithweb]

Responsive Web design

Responsive Web design is a concept that argues that design and development should adapt to the user's behavior and environment, taking into account screen size, platform, and orientation.

Flexible grids and layouts, pictures, and judicious use of CSS media queries are all part of the process. When a user transitions from a laptop to an iPad, the website should adapt to the new device's resolution, picture size, and scripting capabilities. The user's device settings may also need to be considered; for example, if the user has a VPN for iOS on their iPad, the website should not limit the user's access to the page. In other words, the website should be equipped with technology that allows it to respond to the user's choices automatically.This would eliminate the need for a different design and development phase for each new gadget on the market.

Adjusting Screen Resolution

As the number of devices increases, so do the screen resolutions, definitions, and orientations. Every day, new gadgets with new screen sizes are released, and each of these devices may be capable of handling differences in size, functionality, and even color. Some are in landscape mode, while others are in portrait mode, and still others are square. Many new technologies, as evidenced by the increasing popularity of the iPhone, iPad, and advanced smartphones, can transform from portrait to landscape mode at the user's discretion.

[sahithweb]

CSS Grid

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Fixed and flexible track sizes

You can create a grid with fixed track sizes – using pixels for example. This sets the grid to the specified pixel which fits to the layout you desire. You can also create a grid using flexible sizes with percentages

Item placement

You can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. Grid also contains an algorithm to control the placement of items not given an explicit position on the grid.

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.

Example:

Html

<div class="list">

 <div>One</div>

 <div>Two</div>

 <div>Three</div>

 <div>Four</div>

 <div>Five</div>

</div>

Css

.wrapper {

 display: grid;

}

All the direct children are now grid items. In a web browser, you won’t see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items. At this point, you may find it useful to work with the Grid Inspector, available as part of Firefox's Developer Tools. If you view this example in Firefox and inspect the grid, you will see a small icon next to the value grid. Click this and then the grid on this element will be overlaid in the browser window.

[sahithweb]

CSS flexbox

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.

When we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS grid layout  , which controls columns and rows together.

Another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. In the past, CSS was heavily weighted towards horizontal and left-to-right writing modes. Modern layout methods encompass the range of writing modes and so we no longer assume that a line of text will start at the top left of a document and run towards the right hand side, with new lines appearing one under the other.

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items.

[sahithweb]

CSS box model

Each element in a page is represented by the browser's rendering engine as a rectangular box according to the standard CSS basic box model when it is laid out. CSS controls the size, location, and properties of a webpage (color, background, border size, etc.)

Content area

The "actual" content of the element, like as text, an image, or a video player, is contained in the content area, which is bounded by the content edge. The content width (or content-box width) and content height are its dimensions (or content-box height). It frequently features a background color or image.

If the box-sizing property is set to content-box (default) and the element is a block element, the width, min-width, max-width, height, min-height, and max-height values can be used to specify the size of the content area.

Padding area

The padding area expands the content area to include the padding of the element, and is defined by the padding edge. The padding-box width and padding-box height are its dimensions.

The padding-top, padding-right, padding-bottom, padding-left, and shorthand padding attributes determine the padding thickness.

Border area

The padding area is extended to include the element's boundaries by the border area, which is defined by the border edge. The width of the border-box and the height of the border-box are its dimensions.

The border-width and shorthand border attributes determine the thickness of the borders. When the box-sizing property is set to border-box, the width, min-width, max-width, height, min-height, and max-height values can be used to specify the size of the border region. When a box has a backdrop (background-color or background-image), it extends to the border's outer edge (i.e. extends underneath the border in z-ordering). The background-clip css property can be used to change the default behavior.

Margin area

The margin area extends the border area to include an empty region used to separate the element from its neighbors, and is bounded by the margin edge. The margin-box width and margin-box height are its measurements.

The margin-top, margin-right, margin-bottom, margin-left, and shorthand margin attributes determine the size of the margin area. Because margins are shared between boxes, the margin region is not clearly defined when margin collapse occurs.

Finally, even if the borders and padding are still displayed surrounding the content, the amount of space taken up (the contribution to the height of the line) is controlled by the line-height property for non-replaced inline elements.

[sahithweb]

Introduction to Typography

The typography notion in CSS is regarded as one of the most important aspects of website design. The typographic notion is concerned with page style, space, and proportions. This notion is used to improve the readability of text by employing appropriate font settings, text color properties, and so on. Typography allows users to define color, text shape, size, and spacing, all of which are CSS properties, in order to make the text more legible and readable. The color of the text, the font size of the text, the line spacing, and so on are the most important typographic attributes in CSS.

. Color

This property is used for coloring the texts or elements in website layouts such as foreground color, background color, the color of the text, etc.

EXAMPLE:

ul li a{

        text-decoration: none;

        color: #fff;

        padding: 5px 20px;

        border: 1px solid transparent;

2. Font Property

This property has other shorthand properties like font-family such as font-size, font-style, font-weight, etc in this topography concept.

EXAMPLE:

body {

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

}

Spacing Property

This property is used where there is spacing required such as line spacing, letter spacing, word spacing, etc.

EXAMPLE:

.container {

        background-color: #ffffaa;

        padding:1rem;

        margin:1rem 0;

        border-radius: 1rem;

}

For text display, CSS typography is utilized for the primary properties such as font, color, and spacing. We've seen how the typography notion is applied to website layouts that incorporate text or elements with text that entice consumers to browse the websites. The typography properties in CSS include font properties such as font-family, font-size, font-weight, and font-style, as well as text properties like as letter spacing, word spacing, text-alignment, and so on.

[sahithweb]

Introduction to CSS

Cascading Style Sheets (CSS) is an acronym for Cascading Style Sheets. It is a language for describing the appearance of Web pages, such as colors, layout, and fonts, in order to make our web sites appealing to users.

CSS is a style sheet language for the web. CSS (Cascading Design Sheets) is a programming language that is used to style and layout web pages, such as changing the font, color, size, and spacing of text, splitting it into numerous columns, and adding animations and other ornamental elements. This lesson provides a light introduction to CSS, covering the fundamentals of how it works, what the syntax looks like, and how to use it to add styling to HTML.

Any website's styling is a must-have feature. It raises the website's standards and general appearance, making it easier for users to interact with it. A website can be built without CSS, however styling is required since no user wants to interact with a drab and unattractive website. As a result, learning CSS is a need for understanding Web Development.

• HTML and CSS are the foundational skills that any web developer should possess. It is the fundamental ability needed to create a website.

• Makes your website more appealing: A website that is drab and plain is unlikely to attract users, therefore adding some flair will undoubtedly make your website more appealing to them.

• Brings the design to life: A web developer's job is to turn the design he's been given into a working product. It's used to develop the website's design by styling it.

• Improves website user experience: A website with a simple yet attractive UI will make it easier for users to navigate the site. It's utilized to improve the user interface.

[sahithweb]

HTML Images

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The required src attribute specifies the path (URL) to the image.

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader)

You can use the style attribute to specify the width and height of an image.

Use the <img> tag as well as the <a> tag with the href property to use an image as a link in HTML. The <img> tag is used to include an image in a web page, while the <a> tag is used to include a link. Add the image's URL to the src property of the image tag. Include the height and width as well.

<!DOCTYPE html>

<html lang="en">

        <head>

        <meta charset="utf-8">

        <title>SAHITH ALURU 3080645</title>

        <link rel="stylesheet" href="style.css">

        </head>

        <body>

        <div id="table">

        <header>

        <h1><a href="index.html">SAHITH ALURU</a></h1>

        <h2>3080645</h2>

        </header>

        <h2 id="profile">Personal Profile</h2>

        <div id="content">

        <img src="images/sahith.jpg" alt="profile photo">

[sahithweb]

DIV AND CLASS

<div>

1.   it is a division (You can make division on html page)

2.   its nothing more than a container

3.   Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

4.   By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

<class>

1.   class is an attribute not a tag like div

2.   The class attribute specifies one or more classnames for an element.

3.   The class attribute is mostly used to point to a class in a style sheet.

4.   javascript can also use class name

5.   you can add class name to div <div class=”abc”> but you can’t do opposite

HTML was established to describe documents on the early internet as a markup language. As the internet expanded in popularity and more people used it, its requirements evolved.

Because the web was not supposed to be planned from the start, programmers utilized various hacks to get things laid out in various ways. Rather than describing information in a table, programmers would utilize the <table></table> to arrange other components on a page.

Programmers began to utilize a generic "non-semantic" tag like <div> as the use of aesthetically designed layouts grew. They would frequently assign a class or id property to these items to explain their function. For example, instead of< header>, <div class="header"> was frequently used.

Example:

<div id="header"></div>

<div class="section">

           <div class="article">

                      <div class="title">

                                 <img>

                                 <div class="header"></div>

                      </div>

           </div>

</div>

<div id="footer"></div>

It's a lot simpler to read now. When you look at the first block of code that uses semantic elements, this is typically the first thing you'll notice. This is only one example; as a programmer, you may read hundreds or thousands of lines of code. The easier that code is to read and understand, the easier your work will be.

It is more easily accessible. You are not alone in finding semantic elements to be more understandable. Search engines and assistive technology (such as screen readers for visually impaired people) can better grasp the context and content of your website, resulting in a better user experience.

[sahithweb]

Unordered list and ordered list

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain −

·      <ul> − An unordered list. This will list items using plain bullets.

·      <ol> − An ordered list. This will use different schemes of numbers to list your items.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example

<!DOCTYPE html>

<html>

  <head>

     <title>HTML Unordered List</title>

  </head>

  <body>

     <ul>

        <li>Beetroot</li>

        <li>Ginger</li>

        <li>Potato</li>

        <li>Radish</li>

     </ul>

  </body>

</html>

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

<!DOCTYPE html>

<html>

  <head>

     <title>HTML Ordered List</title>

  </head>

  <body>

     <ol>

        <li>Beetroot</li>

        <li>Ginger</li>

        <li>Potato</li>

        <li>Radish</li>

     </ol>

  </body>

</html>

[sahithweb]

Introduction to HTML

HTML stands for HyperText Markup Language. It's a markup language that's used to create web pages. HTML is a markup language that combines hypertext with markup. The term "hypertext" refers to the link between web pages. The text document within the tag that defines the structure of web pages is defined using a markup language. HTML is a markup language that the browser uses to transform text, pictures, and other content so that it can be displayed in the desired format.

HTML uses predefined tags and elements to instruct the browser on how to display the material appropriately. Remember to add closing tags as well.

HTML page structure:

<DOCTYPE! html>: This is the declaration of the document type (not technically a tag). It specifies that a document is an HTML document. There is no case distinction in the doctype statement.

<html>: This is called the HTML root element. All other elements are contained within it.

<head>: The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front-end of a webpage. HTML elements used inside the <head> element include:

<style>

<title>

<script>

·       <link>

<body>: The body element is used to encompass all of a webpage's viewable content. In other words, the body content is what appears on the front end of the browser.

Any text editor can be used to build an HTML document. Use the.html or.htm extension to save the text file. The file can be opened as a webpage in the browser once it has been saved as an HTML document.

[sahithweb]

Introduction to web design

A hypertext document is a web page. Typically, they are text documents that have been formatted using the hypertext markup language (html)

The planning and building of websites is referred to as web design. This encompasses a variety of abilities that are all grouped together as web design. Information architecture, user interface, site structure, navigation, layout, colors, fonts, and overall imagery are examples of these skills. All of these talents are coupled with design concepts to build a website that fits the goals of the organization or individual who commissioned it.

This article will go over the fundamentals of website design as well as the numerous disciplines and abilities that make up this profession.

Web Design Has Many Different Roles

Front end and Back end developer

Front end development is a type of computer programming that focuses on the coding and creation of user-visible parts and features of a website. It's about ensuring that a website's visual elements are functional.

• HTML — This is the language that defines the structure of online pages and serves as the foundation for all websites.

• Cascading Style Sheets (CSS) – This is how web pages are formatted graphically. CSS (Cascading Style Sheets) is in charge of a website's overall appearance, including layout, typography, colors, and more.

·       What is Backend Development, and how does it differ from Frontend Development? Server-side development is another term for backend development. It's everything that users don't see and includes all of the behind-the-scenes operations that take place when they utilize a website. Databases, backend logic, APIs, and servers are the primary topics covered.

·        JavaScript.

·       Python.

·       PHP.

·       Java.

·       Ruby.

·       Golang.

·       C++