Web development
Front end vs backend
The Front End is the stuff that you see and interact with: HTML, CSS , and JS. The Back End is everything else: so many choices!
Restaurant Analogy example: The backend is everything that happens in the kitchen; the front end is what is plated and sent to your table
HTML
HyperText Markup Language defines the structure of a webpage. Example "put an image here" "put a form here"
The "nouns" of a webpage.
CSS
Cascading Style Sheets Defines the style of HTML"make all text purple" "give the first image a yellow border"
The "adjectives" of a webpage.
JavaScript
Adds logic and interactivity to a page."Do some math" "Change color when the user clicks" "Load new data from twitter"
The actions or "verbs" of a webpage.
2)Intro to html
Objective: Understand the difference between closing and self closing tags,Write tags with attributes,Given an image write the corresponding HTML.
General rule
<tagName> Some Content </tagName>
Every HTML document we create will start with this boilerplate:
<!DOCTYPE html>
<html>
<head>
<!-- Our metadata goes here -->
<title></title>
</head>
<body>
<!-- Our content goes here -->
</body>
</html>
Comments
<!-- This is a comment. It doesn't do anything!-->
<!-- ….!-->
Common Tags
<h1>I'm a header </h1>
<h2>I'm a slightly smaller header </h2>
<h6>I'm the smallest header </h6>
<p>I'm a paragraph</p>
<button>I'm a button!</button>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
</ol
Closing Tags
<h1>I need a closing tag </h1>
<p>Me too!</p>
Self-Closing Tags
<!-- No closing tag or inner text needed -->
<img src="corgi.png">
<link href="style.css">
<!-- Don't worry about what these tags do yet →
Attributes
Adding Additional Information To Tags
<tag name="value"></tag>
<img src="corgi.png">
<p class="selected">woof woof</p>
<a href="www.google.com">Click me to go to Google</a>
<link rel="stylesheet" type="text/css" href="style.css">
Images
<img src="corgi.png">
Links
<a href="url">Link Text</a>
<a href="www.google.com">Click me to go to Google</a>
<a href="www.reddit.com">Click me to go to Reddit</a>
Tags(HTML)
Html, head, title, body, headline(from h1 to h6), paragraph(<p> </p>, br, b or strong(bold) , i or em( for italics world), sub or h2O and sup or a2+2ab+b2 <sup></sup>, <br> to break paragraph <ul> vitra <li>
Commet <!-- --> form inside it input(attribute: type (text,number,radio(gender),checkbox(your interest) and name
Select option( for example country selection (nepal, india and china) and textarea tag(message box) , iframe for linking other site , audio video tag
Attribute
After first tag name and value given by =
<p title=”Shirshak kandel”></p>
a(anchor or linking tag) with attribute href
Thanks for sharing this useful content. AT&T Software LLC comes with an incredible team of website and mobile application developers who can customize the perfect solutions to transform your business.
ReplyDeletewoocommerce developer
hire woocommerce developer