0% found this document useful (0 votes)
4 views3 pages

Web Development Essentials Guide

The document provides a comprehensive overview of client-side programming languages and essential coding practices, including HTML, CSS, JavaScript, and Python. It covers key concepts such as element types, positioning, units of measurement, and best practices for responsive design. Additionally, it includes shortcuts for coding efficiency and instructions for creating a virtual environment in VS Code.

Uploaded by

earnandinvest.pk
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views3 pages

Web Development Essentials Guide

The document provides a comprehensive overview of client-side programming languages and essential coding practices, including HTML, CSS, JavaScript, and Python. It covers key concepts such as element types, positioning, units of measurement, and best practices for responsive design. Additionally, it includes shortcuts for coding efficiency and instructions for creating a virtual environment in VS Code.

Uploaded by

earnandinvest.pk
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

Cleint side language:

1) javascript
2) Html
3) php
4) python
5) ajex
6) Css
7) React

......
# is for id
. is for class
.......
Shortcuts:
to go to next line from wherever you are: ctrl+enter
for multiple cursors :shift and press
for formatting : ctrl+shift+F
for copying the whole line : ctrl+D
for moving the line: alt+Down-Arrow or up

ctrl+/ (comment)

.........
1>>>Stack Overflow for problem solving or bugs
......
simple width property creates scroll-Bar means overflow of the content.
But max-width does not. so use it.
......
1em = 16px
........
<<span>> is inline mean take the content space only, <<Div>> is block
But some tags are inline but still they actually have block properties , here we
divide inline elemets into two types:
1)Replacable: "Video", "embed" , "img" , "iframe"
2)Non-Replacable: "bold tag", anchor tag" , "span" , "i" ,"em"

..........

note: Pecentage unit is a related property.


In width & Height calculation percentage is related to parent width & Height.
In padding & Margin calculation Percentage is related to parent Width.
In font-size calculation percentage is related to parent font-size.
1. Always try to give width value in percentage unit , not in px for better
practice.
2. if you want to give height value in percentage unit, user should must give their
parent height value in px unit, otherwise it won't work.
3. if we want to give padding in percentage, it will calculate it from parent's
width.
4. example-: parent width: 500px; we give 10% padding in his child. so our padding
should be 50.
5. Margin also work same as padding.
6. the percentage unit not work in border.
7. font-size also calaculate from it's parent font-size.
8. vh stands for viewport height and vw for viewport width. As you can see, the
first unit is based on the viewport height, and 1vh is equivalent to 1% of the
viewport height. vw works the same, but for viewport width. So, 1vw equals 1% of
the viewport width.
.....
Normal font size is 16px except heading tags
.......
It is preferable to give the padding in "em" because when we will increase the font
size then the padding will also increase.

.......
Absolute Position takes the position according to the viewport, like if i give 5px
top it comes down from the top viewport and if you give the 5px from left it
actually comes away from left viewport side.
when the position of parent is other than static like of "ul" then the child takes
the position as of its parent, but if its static then it takes the position
markings as of viewport.

.......
How to center a box:

position: fixed
margin: auto
inset: 0

........
Cricle an image
border-radius:50%;
border:any(px)
........
centering the text in a box:
1)remove height
2)Give padding
3)remove margin from text if needed....
.......
Flex-Properties:
1)Width: max-content;
2)width: min-content;
3)Flex-shrink=0; "shrink the content or border box not to be done if set to zero"
4)Flex-grow= 1; "lets the element to take the space empty width"
......
centering text with flex(Important);
display:flex;
justify-content:center;
align-items:center;
.......
In inline element the margin top , bottom and padding , width doesn't work.
.......
Sonny Sangha(Youtube-Channel)
This one introduces you to the real life web dev projects

......
For gradient check: web: "[Link]"
......
Z-index only works when position property is given. Otherwise it doesn't work.
......
On Inline elements we cannot give width propertiy.

................>>>>>>JavaScript>>>>>>>>>................

1) (Var)...is....function scopr->"var is function scoped when it is declared within


a function. This means that it is available and can be accessed only within that
[Link] when we print that variable then the value will return in console.

2) If i print through [Link] in start of this variable it will not give error
in console but returned "undefined".

.......
1) (let).....let is block scoped
A block is a chunk of code bounded by {}. A block lives in curly braces. Anything
within curly braces is a block.
So a variable declared in a block with let is only available for use within that
[Link] if i print that value in console then it will give error.

2) If i print through [Link] in start of this variable it give error in


console.

.........>>>>>>>>>><<<>>............<<<<<<<<>>>>>>>.........
.......How to Create Virtual environment on VS-Code.............
1)open terminal type:[python -m venv *path(E:\Python All) add \venv* hit enter
2)then type (.\folder name\Scripts\activate)e.g. (.\All\venv\Scripts\activate)

If 2nd dosn't work type these there commands one by one :


Step 1:
set-ExecutionPolicy RemoteSigned -Scope CurrentUser
Step 2:
Get-ExecutionPolicy
step-3
Get-ExecutionPolicy -list

You might also like