Rough (visualising code)

<label for="first"> First button</label><br>

<input type="radio" name="1" id="first">

<input type="radio" name="1" id="second">

<label for="Second button"> Second button</label>

First button

(radio button1) (radio button 2) Second Button

<input type=”checkbox” value=”indoor” name= “1” id=”checkbox1”>

<main> </main>
<form action= “
<label for= “checkbox1”> label should appear here for the button, we describe the button first and then
give a text label next to it using this tag” </label>

id: unique identifier for any element every element should have a different id
For the responsive design certificates- Building a
product landing page: use editor X inspiration
HTML To start and close tags we use <h1>—-> heading tag h1 largest heading and h6 smallest heading
The lorem ipsum text is randomly scraped from a famous passage by Cicero of Ancient Rome. Lorem
ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition
continues on the web.

Comments in HTML start with <!-- and end with a -->eg: <!— Hello Comment -->
These are placed around html elements and not within the elements

HTML5 introduces more descriptive HTML tags. These include main, header, footer, nav, video, article,
section and others.

Main Tag- Helps with SEO of the website, be sure to include main content within the main tag

These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with
Search Engine Optimization (SEO) and accessibility. The main HTML5 tag helps search engines and
other developers find the main content of your page.

Nesting of two P elements implies that you need to include <p> 1 </p> and <p> 2 </p> both of them
Adding images <img src=“source.jpg” alt=“Alternative name for the image in case the image fails to
load”>

Inserting Images:

<img src= “”>

Linking to external pages with Anchor Elements

Anchor elements can help you redirect to other URLs anchor element—> a (they need a destination web
address called an href attribute. They also need anchor text <a
href=“https://www.freecodecamp.org"> this is the link to freecodecamp.org </a>

<a href=“#”> Creates a dead link </a>

Linking to internal sites on the same page using anchor <a href=“#contacts-header”>Contacts</a>

target="_blank" attribute from the anchor tag since this causes the linked document to open a new window tab.

Creating ListsUnordered lists start with an opening <ul> element, followed by any number of <li>
elements. Finally, unordered lists close with a </ul>.

input elements are a convenient way to get input from your user.
<input type=”text” placeholder=”this text displays itself inside the input field”> (these tags are
self closing)

To make the input field required add ”required” <input type= “text” required>

Creating a form element- helps to submit responses in the input field

<form action= “/url-where-you-want-to-submit-form-data">

<input type=”text” placeholder= “place your name here”>
</form>

Submit buttons: (within form element)

<button type= “submit”> this button submits the text within the input field </button>

<Label> tag

The <label> tag literally gives labels to various elements such as radio buttons and checkboxes,
etc
It acts a label maker

To create a radio button/check box field steps involved would be

Radio button (lets user select 1 out n options)

Checkbox buttons (lets users select n options- out of n: used for questions with more than 1
answers)

1. Defining the button function input in a button would be <input type= “radio” name=”fav”
id= “button”>

- type is the type of input we want whether it is a button or input type

- name= “all radio buttons should be given the same name so that once 1 option is selected
other will get deactivated”
- id attribute element helps assistive technologies create a linked relationship between the label
and the related input element

eg- <input type= “radio” name= “1” id= “button”>

<label for= “button”> Click </label>
<input type= “radio” name=”1” id= “button 2”>
<label for= “button 2”> click 2 </label>
Now out of these two buttons user will be able to select only one button. But if we change the
name of the two buttons the user will be able to select both the buttons.

Note: SAME NAMES USED TO ALLOW USER TO SELECT ONLY ONE OPTION. ALWAYS USE
DIFFERENT IDs, otherwise it will confuse the system

- Nesting inside and outside label

1. <label>
<input type= “radio” name= “1” id= “1”> Indoor </label>

2. <input type=”radio” name= “1” id= “1”>

<label for= “1”> Label </label>

Value attribute- data collected from buttons gets a “value” and submitted response gets sorted

To set a checkbox or radio button to be checked by default add checked attribute

<input type= “radio” value= “indoor” name= “1” id= “ch1” checked>

Division element elements contained inside the <div> </div> tags can be stylized with CSS
and JavaScript later on

.myDiv {
border: 5px outset red; background-colour: lightblue; text-align: center;
}
<div class=”myDiv”> <!—give attention to the capital “D” in both the tags
<p> div class stylized </p> </div

HTML is an evolving language and you need to tell the browser which version of HTML you are
using, to tell the browser that we are using HTML 5 we use html <!DOCTYPE html>
Note: You need to add <html> and </html> tags

Complete code would

<!DOCTYPE html>
<html>
</html>

CSS Basics
Changing text color

<h2 style= “color: red;”> Example of a red text </h2>

CSS Selector for multiple elements at once

<style>
h2 {color: red; font-size: 30px ; font-family: sans-serif} due to h2 written only texts within
h2 tags throughout the code will be
</style>

Font-size
color
Font-family

<h2> Only those texts within h2 tags will be colored red or stylized with the CSS class </h2>

 Element selector for CSS: If you create a style class for h2{}, p{} , etc this means only text
contained within these tags will automatically get stylized without writing anything else.
For eg <p> </P> all text within these two tags will automatically get stylized just by
enclosing the text within these tags

 Importing texts: While importing texts family names are case-sensitive and to be
wrapped in quotes if there is a space in the name
For eg- you need quotes to use “open sans” but no quotes needed to use Lobster
  Insert URL of the custom text you want to use from Google Fonts Library before style tag

GENERIC NAME V/S FAMILY NAME – degrading fonts to use

<h2 font-family: monospace, sans-serif;> hello </h2>

(Keep in mind the comma between the two fonts and ; after the generic name)

font-family: FAMILY_NAME, GENERIC_NAME; Family names are case sensitive and generic
names are alternatives which show up in case the family name is not loading

CSS classes (We can use multiple classes for an element by separating the classes with a space)
<img class= “class1 class2”>

Classes are reusable styles that can be added to HTML elements

<style>
.blue-text { color: blue;}
</style>

<style>
h2 {color: red; font-size: 16px; font-family: “open sans”; }
</style>

<h2 class= “blue-text”> A blue heading </h2>

Image manipulation

(Create a CSS class eg .larger-image {width: 500px;}

.smaller-image {width:100px; }

<img src= “source.html” class= “smaller-image”>

Borders- width, color, style

<style>
.thin-red-border { border-width: 100px; border-color: red; border-style: solid ; } </style>
Alternate way to write
<style>
.border
{border: 2px solid green }  fixed order of width, type, color

Rounding the corners

border-radius: 10px;

If border radius is set in pixels the sharp edges are rounded but if the border radius is set in %
the image is made circular

border-radius: 50%;

Setting background color of elements

{background- color: green}

Use an id Attribute to Style an Element

Note that inside your style element, you always reference classes by putting a . in front of their
names. You always reference ids by putting a # in front of their names.

If conflict between class and id in <style> computer prefers properties attached with id

<style>
#cat-photo-app
{ background-color: silver;}
</style>

Padding

You may have already noticed this, but all HTML elements are essentially little rectangles.

Three important properties control the space that surrounds each HTML element:
padding, border, and margin.
Padding: An element's padding controls the amount of space between the element's content
and its border.

--- CSS allows you to control the padding of all four individual sides of an element with the
padding-top, padding-right, padding-bottom, and padding-left properties.
(same goes for margins)

Margin: An element's margin controls the amount of space between an element's border and
surrounding elements.

--Setting Negative Margin makes the element larger

PICTURE 1: (above)
for the blue box, margin: 20px;

Picture 2:
for the blue box margin: -25px;

Easy to way to edit all the attributes at once  following code will change the margin of all
radio attributes to have a margin of 10px

[type=’radio’]
{ margin: 10px;}
Relative units- em, rem ?

body { background-color: black; color:green; font-family: monospace; }

this code will make the whole page black in colour, all the elements on the page, eg- text, will
be green in colour, all the text will be Monospace

adding a class which asks some text to be pink will make the text pink
(command from body attribute < command from CSS class)

Adding another class eg <h1 class= “pink-text blue-text”> will make the text blue </h1>

The browser uses whichever CSS class comes at last. Browser reads the CSS classes top to
bottom.

id declarations override class declarations

<h1 id= “orange-text”> </h1>

ID declaration given by #orange-text {color:orange}

In many situations, you will use CSS libraries. These may accidentally override your own CSS. So
when you absolutely need to be sure that an element has specific CSS, you can use !important.

CSS Variables

CSS Variables are a powerful way to change many CSS style properties at once by changing only
one value.

To create a CSS variable, you just need to give it a name with two hyphens in front of it and
assign it a value like this:

--penguin-skin: gray;

Applied as
background: var(--penguin-skin); (Traditionally applied as background-color: black;)

Fallback values: background: var(--penguin-skin, black);