-
Notifications
You must be signed in to change notification settings - Fork 0
/
M Ziaur Rahman Sir All Video Details.txt
2089 lines (1496 loc) · 124 KB
/
M Ziaur Rahman Sir All Video Details.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
Freelancer Bangladesh Responsive Web Design & SEO 1st Batch
Our Mentor: M Ziaur Rahman
All Videos Details Is Given Below:
Class-1=> #vdo:01.About_this_sector: *Introducing this course, web design and other important things.
#vdo:02.HTML_01: *Introducing web page elements.As like: text, image, video, links.
*How to create a web site.
*On Screen Keyboard using system.
*Introducing File Extention and Showing File Extention.
*Introducing <h>, <p>, <b>, <br />,<img>, <input> tags.
#vdo:03.HTML_02: *<h> and <p> tag is block-level element or, <b> tag isn't block-level element.
*Introducing that, what is tag, atributes and how to creating link any text.
*Introducing title, href atributes and <a> tag.
*Introducing target atributes and value=(_self:Here if we reload then we can see that,
same tab showing.<by default value> ,_blank:next other new tab reload multiple time,
self:next other new tab reload one time ).
* _ this symbol name is underscore self.
#vdo:04.HTML_03: *Introducing w3schools.
*Idea of atribute and web site.
*Using img tag and src, alt, width atributes.
*Under multiple folder images link process.
*How to back our previous folder this process for image show.
*How to creating link any images.
Class-2=> #vdo:02.HTML_04: *Here We can see that, How to show All kinds of file name extention.so that,For the convenience of the work.
*Introducing heading tag. As like: h1, h2, h3, h4, h5, h6.
*Introducing html file comments system.As like: <!-- anything -->
*Introducing style atributes.For Example: color: red; background: yellow;
*Introducing View Page Source.Shortcut Keyboard command: ctrl+u.
*Introducing Inspect Element.Shortcut Keyboard command: ctrl+shift+i.l
*Practising Inspect Element.
#vdo:03.HTML_05: *Introducing Notepad++ Editor and Practising it.
*Introducing index.html / .html extention.
*same line multiple writing shortcut process: ctrl+d.
*html file comments shortcut system: ctrl+k.
*and also learn comments out system: ctrl+shift+k.
*customize our Notepad++ Editor.
*At first we should go to settings > preference > Editing > *Enable Multi Editing settings.
In this settings: we can write code together multiple line.It's called multi line editing.
*Then, settings > preference > Editing > check the *Display line number.
*If any line will too large so, we should go View > word wrap.
In this settings: we can wrap too large line in visible area.
*Then, settings > preference > Editing > check the *Display bookmark and *Enable current line highlighting.
*Here we also learn if our pc installed avro keyboard. so, we can write bangla of pressing f12 button.
*Then, settings > preference > Highlighting > *Enable smart Highlighting and *Highlight Maching tags.
*Then, settings > preference > Auto-completion > *Auto Insert > check the "", '', (), {}, [], html/xml close tag.
*Second settings: settings > style configurator > select theme > black board/any one.
and we also customize our selected theme by global styles: check the *Enable global options.
*Here we can see many kinds of customization in this settings.
#vdo:04.HTML_06: *Here we can see that, how to write a html code.For Example:
<html>
<head></head>
<body></body>
</html>
*html tag contain two types of tag: i) head. ii) body.
*Here we write html-5 version code.
*Introducing title tag.
*Watching that, how to write a proper way writing standard code.
*Introducing ul and ol tag. and li tag.
*Introducing hr tag.here hr = horizontal rule break.
*Introducing w3 validator.link=> https://validator.w3.org
here we should go: validate by Direct Input.
Class-3=> #vdo:01.class3_intro: *Here we can see that, how to give any problem post and solution.
*Here we can see that, how to take a screenshot.
*Here we can see that, which day we will submit our assignment.(sunday)
#vdo:02.npp_configure_2: *Here we can see that, which version notepad++ we should install.(7.5.9)
*we can see that, how to run any browser shortcut key.
*Process=> run>click(...)>then write one space and write "$(FULL_CURRENT_PATH)">
then click save here we will give browser name or anyname and give any shortcut
key. like- ctrl + alt + 0/anykey. Now we can run our code in this editor with the
help of this shortcut key.
*Here we can add any browser and delete any browser.
#vdo:03.HTML_07: *Here we can see that, What is a web page logo and a web page Elements.
*we can introducing w3schools.com it gives us editing option there we can write
code and watch our output.
*we should use h1 tag only one time in our webpage.which word use only one time there
we will use h1 tag. And We give other place h2 tag or any heading tag.
*Here we can learn what is paragraph tag and preformatted tag. where we want to show our
browser output same in text editor where we will use preformatted tag. here pre tag
by default use courier font.
*we should give every tag starting tag and closing tag.
*Here we can see that, what is html structure and how to use.
*Here we can see that, many kinds of text-formatting.
like=> b = bold text, strong = important text, i = Italic text, em = Emphasized text,
mark = Marked text(mark by default color value is yellow), small = Small text,
del = Deleted text, ins = Inserted text, sub = Subscript text, sup = Superscript text.
*Here we can see that, how to a single line comment and multiple line comment.
<!-- single line comment --> <!--
Multiple
line
comment
-->
*shortcut comment process is=> ctrl+k and comment out ctrl+shift+k.
*we can see how to wrap our huge text. process=> view>click word wrap option.
*If we want to style any specific text diferrently so we can use span tag.
#vdo:04.HTML_08: *Here we can see what is title. title tag contain a webpage title name.
*Here we can see that, how to link multiple html file in same root with <a> tag and <ul> tag.
*Introducing list and sublist. here we can see how to create a sublist under a list.
like=> <ul>
<li>
anyting
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
*Here we can see, unordered list(ul) and ordered list(ol).
*we should not write under ul tag of ol tag and under ol tag of ul tag.
*Here we can see that, how to connect any folder placement with link.
like => one folder back to ../ and double folder back ../../
*url full form = uniform resource locator.
*https full form = hyper text transfer protocol secured.
*www full form = world wide web.
*when we write ul or ol list then we can write under ul or ol tag (<ul type="disc"></ul>)
and we also write with css property list-style-type: disc, circle, square, none.
*we can write many types of ol list. like => <ol type="1, a , A , I, i"></ol>
*we can start any ol list type. like => <ol type="1" start="5"></ol>
here our output is ol list start at number 5.here type will change but start obviously be number.
*we can see, description list(<dl></dl>), description term(<dt></dt>) and <dd> tag is describe each <dl> tag.
*we can see, qutation tag => <q>Bangladesh</q>, here output is "Bangladesh".
*we can see, <blockquote> tag. this tag is used to define a different section.
*we can see, <abbr> tag with title attribute.(1.25.0min)
*If we want to write any address, so we can write <address> tag.
*Introducing <cite> tag, <bdo dir="rtl/ltr"></bdo> tag, dir="rtl/ltr" attributes.
*Introducing lorem ipsum website.(lipsum.com). In this website we can take some free paragraph words.
*Atom, Brackets, Notepad++, VS code, Sublime Text. This is some famous text editor for web programming.
Class-4=> #vdo:01.class4_intro: *Here this video we can see that, how to go ahead our track.
*Here M Ziaur Rahman sir says that, we should achive many kinds of skill. we should be skilled person.
*He says that, we should research many kinds of topic.
#vdo:02.HTML_09: *Here we can see that, using <a> tag we can give anything link. like=> any section, any local image/audio/video
file location, any server file location etc.
*<a href=""></a> here href full form is h = hyper, ref = reference.
*we should use id in a unique section and we should use class in all common section.
*Here we can see that, how to connect multiple html file in different file location.
*If we don't give any <a> tag href attributes value i mean value is null. so,
when we click any link we don't move any other location. we will stay same page.
*when we create a menu in our web page, we were use ul li tag and linking every page with <a> tag.
*Here we introducing <div> tag. which means division. this div is block element.
*Here we can see id attributes. which is selected in # and id name. practising this attribute.
*Here we can see class attributes. which is selected in . and class name. practising this attribute.
*Here we can see, how to comment in a html file css properties. like=> in head tag we should style tag and
then we should write our code and when we want to comment any property then we give, /*any property*/
#vdo:03.HTML_10: *Here we can see, how to show in a web page of image with local server or live server.
If we want to show any image so, we should write => <img src="anyFileLocation" alt="anyThing" />
*Here we can see that, how to see a image original size. mouse right click and select view image in a new tab
and when we hover our mouse in our title or head section then we can see our image original size.
*Any image size = 400 x 200 . here 400 is image width and 200 is image height.
*Here we can see that, how to take or use any image of other site. (Click mouse right and select copy image
address/ copy image location) now this copied link we should give our img tag under src attribute.
*we can use any image in our pc or internet location.
*Here we can see that, how to show any mp3 file. <audio controls autoplay> <source src="" /> </audio>
*Here we can see that, how to download any video in youtube tricky way. at first we should select a youtube
video and then copy that video link and then paste in a new tab. then this link www. erase and write ss and
then click enter.
*Here we can see that, how to show any mp4 file. <video controls autoplay muted> <source src="" /> </video>
*Here we should remember that, always we should give any attribute in audio or video tag.
*Here we can learn, If we want to show any youtube or any website video in our site so we should again
copy this video link and write ss instead of www. and click enter. now we can get a download link, now
we should copy this link and paste this link in our src attribute.
*In the same way we can use any others audio file play in our site. copy download link and use this link.
#vdo:04.HTML_11: *Here we can see, how to view our code in a web browser. (ctrl+U=view page sourse)
*M Ziaur Rahman sir says that, we should write our code in a structured way. so that, every person can
understand our code. and if we check our code in w3 validator there we can see our code errors.
*And he also introducing html media, browset support.
*Here we can learn iframe tag:
<iframe src="https://domain_name.extention" width="" height="" frameborder="0" allowfullscreen></iframe>
here under iframe we can give frameborder attribute but it will not valid way in this time.
se, here we can use style="border: none;" attributes.
*Here we can see that, how to show a single frame multiple website loading. under iframe tag we should write
name="same" attributes and multiple a tag with multiple website link given href="" attributes and target="same"
attributes.
*If we want to show any youtube video in our site so we should click youtube video share option and copy the
iframe part and paste our code part.
*we also show another way to a youtube video. like=> youtube video link copy and take a new tab paste the link
in this link we should erase www. and write ss then click enter button. now we can see a new look. here
we should copy the download link and paste our code. then click the enter button.now we can see a different look.
Class-5=> #vdo:01.class5_intro: *Here M Ziaur Rahman sir says that,we should note down our course all class video summary.
*Introducing meta tag. this tag contain in head tag. we give site related all information in meta tag.
*The default character encoding for HTML5 is UTF-8.
*UTF full form = Unicode Transformation Format.
*To display an HTML page correctly, a web browser must know which character set to use.
*Here we can see that, w3schools website => HTML Charset.
#vdo:02.HTML_12: *Introducing HTML Symbols.
*Some common symbol entity: © ® ™
*Here we can see that, how to use entitys and symbols with, entity value/ dec value/ hex value.
*Sample code =>(& entity ;) (&# decimal ;) (&#x hexadecimal ;)
here don't have any space in the code.
*If we want to design any small part. so, we should give all element in span tag and then design.
*Which symbols are colorful this symbol aren't be design.
*we can see, less than and greater than sign in our display. like=> < any_tag >
*If we want to give our code letter space multiple time.so, we should give => non breaking space.
*Here we can see that, if we want to give another unordered list style.so, we should give our style tag,
list-style-type: '\hexa value'; we should not give dec value.
#vdo:03.HTML_13(optional): *Here Introducing some number system. like=> binary 2 based (0,1) , octal 8 based (0-7) ,
decimal 10 based (0-9) , hexadecimal 16 based (0-9 & A-F) number system.
#vdo:04.HTML_14: *Introducing table, tr, td tag.
*we should give in table tag border-collapse: collapse;
*Introducing th tag.which cell data we want to give bold style and center or highlighted we will give th tag.
*tr = table row, td = table data, th = table head.
*Introducing thead, tbody, tfoot tag.these tags are not compulsory.
*Introducing colspan and rowspan attributes which is contain in td tag.
Class-6=> #vdo:01.class6_intro: *
Class-7=> #vdo:01.class7_intro: *Introducing SEO & meta tag.
*Google search engine gives every page 10 pices of website name.
*All meta tags contain 2 atributes.As like: name, content.
*Here most important is last meta tag: <meta name="viewport" content="width=device-width,
initial-scale=1.0" />.The viewport is the user's visible area of a web page. It varies
with the device, and will be smaller on a mobile phone than on a computer screen.
*Here first meta tag define=> this is html-5 version: charset=character set,
UTF=Unicode Transformation Format, 8=bit, UTF-8 is the preferred encoding for e-mail and
web pages,Unicode is a character set. UTF-8 is encoding.Encoding translates numbers into
binary. Character sets translates characters to numbers.
*<meta name="description" content="here we will give web page related description." />
*<meta name="keywords" content="Here we will give some important words, which words are as
usual search maximum visitors.so that our website will come search engine first page." />
* <meta name="author" content="Here we will give our website authors name.">
#vdo:02.HTML_18: *Introducing HTML-5.
*The <!DOCTYPE html> declaration for HTML5 is very simple.The character encoding (charset)
declaration is also very simple.
*HTML5 defines eight new semantic elements. All these are block-level elements.
*To secure correct behavior in older browsers, you can set the CSS display property for these
HTML elements to block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
*CDN=Content Delivery Network.
*The HTML5Shiv script must be placed in the <head> element, after any stylesheets:
*HTML5Shiv script:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
#vdo:03.HTML_19: *Introducing a web page different part.As like: header, nav, section, article, aside, footer.
*practising (header, nav, article, section, footer, details, summary, figure, figcaption.) tags.
*Nesting: The<article> element specifies independent, self-contained content.
The <section> element defines section in a document.Can we use the definitions to decide
how to nest those elements? No, we cannot!So, on the Internet, you will find HTML pages
with <section> elements containing <article> elements, and <article> elements containing
<section> elements.You will also find pages with <section> elements containing <section>
elements, and <article> elements containing <article> elements.It's called nesting.
*The <header> element specifies a header for a document or section.The <header> element should
be used as a container for introductory content.
*The <footer> element specifies a footer for a document or section.A <footer> element should
contain information about its containing element.
*The <nav> element defines a set of navigation links.The <nav> element is intended only for
major block of navigation links.
*The <aside> element defines some content aside from the content it is placed in(like a sidebar).
The <aside> content should be related to the surrounding content.
*The <section> element defines a section in a document.According to W3C's HTML5 documentation:
"A section is a thematic grouping of content, typically with a heading."
*The <article> element specifies independent, self-contained content.An article should make
sense on its own, and it should be possible to read it independently from the rest of the
web site.
*HTML5 Migration: Migration from HTML4 to HTML5: <div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>
*The Difference Between <article> <section> and <div>: In the HTML5 standard, the <section>
element is defined as a block of related elements.The <article> element is defined as a
complete, self-contained block of related elements.The <div> element is defined as a block
of children elements.
*HTML Coding Conventions: Web developers are often uncertain about the coding style and syntax
to use in HTML. Developers were forced to write valid and "well-formed" code. HTML5 is a bit
more sloppy when it comes to code validation.
*Be Smart and Future Proof: A consistent use of style makes it easier for others to understand
your HTML.In the future, programs like XML readers may want to read your HTML.Always keep your
code tidy, clean and well-formed.
*Use Correct Document Type.
*Use Lower Case Element Names: Mixing uppercase and lowercase names is bad
Developers normally use lowercase names (as in XHTML)
Lowercase look cleaner
Lowercase are easier to write
*Close All HTML Elements.
*Use Lower Case Attribute Names.
*Image Attributes: Always add the alt attribute to images. This attribute is important when the
image for some reason cannot be displayed. Also, always define image width and height. It
reduces flickering because the browser can reserve space for the image before loading.
*Spaces and Equal Signs: HTML5 allows spaces around equal signs. But space-less is easier to
read and groups entities better together.
*Blank Lines and Indentation: Do not add blank lines without a reason.For readability, add blank
lines to separate large or logical code blocks.For readability, add two spaces of indentation.
Do not use the tab key.Do not use unnecessary blank lines and indentation. It is not necessary
to indent every element.
*Meta Data: The <title> element is required in HTML5. Make the title as meaningful as possible.
*Setting The Viewport: HTML5 introduced a method to let web designers take control over the view
port, through the <meta> tag.The viewport is the user's visible area of a web page. It varies
with the device, and will be smaller on a mobile phone than on a computer screen.You should
include the following <meta> viewport element in all your web pages.
*Use Lower Case File Names: Some web servers (Apache, Unix) are case sensitive about file names.
*File Extensions: HTML files should have a .html or .htm extension.
CSS files should have a .css extension.
JavaScript files should have a .js extension.
*Android Mobile Apps development required XML.
#vdo:04.CSS_01: *Introducing CSS:
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files.
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations
in display for different devices and screen sizes.
CSS Syntax:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces.
CSS Comments:
A CSS comment starts with /* and ends with */. Comments can also span multiple lines.
There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS
Class-8=> #vdo:01.class8_intro: *Introducing a websites different elements. A website have many kinds of elements.
we can wellknown it for this video.
*Introducing- Tabs, hover tabs, accordion, dropdown, hover dropdown, click dropdown,
navigation, top navigation, side navigation/ sidebar dropdown, subnavigation menu, mega menu.
#vdo:02.CSS_02: *Introducing CSS Colors:
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
*CSS Colors RGB(Red,Green,Blue) is given 16777216 different types of color.
*We can get two types of color code:
Decimal(rgb:**, ***, **) and Hexadecimal(#******) code.
*Here we can see, one line comment and multi line comment.
*Introducing CSS Comment System (/*anything*/).
*Introducing opacity(opacity:0.1-0.9 is a dimentions of brightness, or, 1 is full main color.)
property.
#vdo:03.CSS_03: *Here we can see that, If we write inline, internal, external both side style,so we will see
inline element is effective,if inline element have anything wrong then internal element is
effective and internal element have anything wrong then external element is effective.
*Here we can see that, How to copy inspect element editing property of a browser.
*If we want to comment any css property, so we should comment our valid system.
*Here we can see that html shortcut comment system(ctrl+k) or css shortcut comment system(ctrl+k)
is same.but if we html file write ctrl+k so this is not valid way.we should write css file.
*html shortcut comment system is ctrl+k and this comment putting system is ctrl+shift+k.
*If we give multiple color or background in a css file, so last color is effective and if we want
above or another color is effective, so we should write beside this color (space!important;) then
above or another color is effective.
*HSL Value: In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form.
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white.
so,here h is any color value and sl standard quantity is (any,100%,50%).
*we can write opacity under color or background code.For Examle: rgba{**,**,**,**};hsla{**,**,**,**}
here (a) means alpha channel.
*we can give margin values of 4 process:
1)when we write css file margin:0; then our all text are to be collapse.or if we give any value
so this value is effect all side/ 4 side.
2)other process is,margin:** ** ** **; here 1st value is margin-top, 2nd value is margin-right,
3rd value is margin-bottom, 4th value is margin-left.
3)a different process is margin:** **; here 1st value is top, bottom and
2nd value is right, left.
4)or last process is, when we give margin:** ** **; here 1st value is top, 2nd value is
right, left and 3rd value is bottom.
*Here padding using system is same but its different from margin.margin is using a page
positioning system or padding is using a text background positioning system.
*we can pick any color with pixie exe. shortcut key is ctrl+alt+c = copy a selected color.
we also pick any color with a website: https://www.materialui.co/colors
* /*One line comment*/ /*
multi line comment
*/
Class-9=> #vdo:01.class9_intro: *Introducing codepen website.
*Here we can see, how to use codepen website.
#vdo:02.CSS_05: *Here we can learn, how to use opacity in a hex color code.For Example:#****** **;
*Introducing text-aligh:right, left, center;
*Introducing border-top/ right/ bottom/ left:width style color;
*Introducing border-width/ style/ color:** ** ** **;here 1st value is top, 2nd value is right,
3rd value is bottom and 4th value is left.
*Introducing border-rigth-color:**; border-left-style:**; border-top-width:**;
#vdo:03.CSS_06: *Introducing many kinds of border style. As like: solid, dotted, dashed, double, groove, ridge,
inset, outset.
*Here we can write single border style or multiple border style. As like: border-style:**; or
border-style:** ** ** **; here 1st value is top, 2nd value is right,
3rd value is bottom and 4th value is left.
*We also learn background-clip:content-box; background-clip:border-box; background-clip:padding-box;
#vdo:04.CSS_07: *Introducing outline.For Example: outline:width color style;
*Introducing border:width color style;
*Introducing outline-offset:**; here plus value is effect of outer border and minuse value is
effect of inner border.
#vdo:05.CSS_08: *Practising border-radius. For Example: border-radius:** ** ** **;
*Practising border-width. For Example: border-width:** ** ** **;
*Practising border-color. For Example: border-color:transparent ** ** **; here transparent
is a hidden color value.
*Here we introduce hover and transition. And we are practising this property.
*Here we can see that, how to create a nice button with hover effect.
*border-radius: tl tr br bl;
border-radius:20px 0px 20px 0px;
border-radius: tl tr,bl br;
border-radius:20px 10px 40px;
border-radius:tl,br tr,bl
border-radius:40px 0px;
Class-10=> #vdo:01.CSS_09: *Here we introduce some block level elements.As like:<div>, <h1>-<h6>, <p>, <article>, <aside>,
<fieldset>, <figcaption>, <figure>, <footer>, <form>, <header>, <hr>, <li>, <main>, <nav>, <ol>,
<pre>, <section>, <table>, <ul>, <video>.
*we also introduce some inline level elements.As like:<a>, <b>, <span>, <br>, <abbr>, <bdo>,
<big>, <button>, <em>, <i>, <img>, <input>, <label>, <q>, <select>, <small>, <strong>, <sub>,
<sup>, <textarea>.
*We will give in every css files: *{
margin:0;
padding:0;
box-sizing:border-box;
}
*Introducing and practising max-width:**px/**%;
*Introducing practising min-height:**px;
*Introducing practising margin:auto; height:auto; width:auto;
*Introducing practising display:inline; display:block; and display:inline-block;
#vdo:02.CSS_10: *Introducing display:none; visibility:hidden/collapse;
*Introducing min-height:10vh; here vh=viewport height.
*Introducing text-transform:uppercase; ext-transform:lowercase; text-transform:togglecase;
text-transform:capitalize;
*Introducing letter-spacing:1; means=original line spacing, letter-spacing:0.005px;
*Introducing word-spacing:3px/*; line-height:1.5em/*;
*Introducing text-indent:50px/*;
*css file comments system:we should use comments.so that we can understood design:
/*
<----first sectoin---->
*/
*practising: widht, height, padding, font-size:*, list-style:disc/none; max-width, min-height, margin:auto,
display:inline, display:block, display:inline-block, text-align:center, right, left, justify, section tag,div tag,
text-align-last:center/*/*.
#vdo:03.CSS_11: *Here we practising, how to create a menu bar by using ul, li, a tag.
*Introducing white-space:nowrap; overflow:hidden; overflow:visible; text-overflow:ellipsis;
*Introducing text-decoration-line:overline, text-decoration-line:underline, text-decoration-line:line-through,
text-decoration-line:overline underline line-through;text-decoration-color:yellow/*;
#vdo:04.CSS_12: *Introducing:box-shadow property, text-shadow property.
*box-shadow: first*px;+value right side,-value left side, second*px;+value bottom side,-value top side, third*px;
shadow, fourth*px; shadow padding.
*box-shadow:0px 0px 0px 0px color inset; here shadow will effect in the box.
*box-shadow:10px 10px 50px 10px yellow inset,10px 10px 50px 10px green,10px 10px 80px 10px red inset,
10px 10px 80px 10px blue; here we can mix multiple color shadow.
*Introducing font-family:arial; font-weight:bold; font-family:tahoma;
*practising: /*text-shadow:r8/lft, top/btm, sdw effct, color;*/
text-shadow: 0px 0px 0px black,
*text-shadow:2px 0px 0px black,
-2px 0px 0px black,
0px 2px 0px black,
0px -2px 0px black,
10px 10px 20px blue; here text shadow will effect same color and awesome.
Class-11=> #vdo:01.emmet: *Introducing emment.
*Practising codepen shortcuts: html:5=>tab, others shortcut keys have contain codepen page underline.
*Introducing shortcut coding process.
*Codepen important shortcut:{content} and [atribute].
*Multiple class name and subtitle list creating process.
#vdo:02.zen-coding: *Introducing zen-coding and limitation of zen-coding.
#vdo:03.CSS_13: *Introducing title section icon.
*Here if we want to show any icon beside the heading title.so we should done a code: under the head tag we should
write link and then click ctrl+E. and we can see a link tag with atributes rel, href. here we should write
rel="icon" and href="file location. then we will see our expected output.
*which icon we want show in heading section, there we should pick a png format file.This file should have
size=50*50, 32*32, and square shape.
#vdo:04.CSS_14: *Introducing many kinds of font family/font style. As like: serif, sans-serif etc.
*we can give multiple font family: any tag{
font-family:'*','*','*',sans-serif;
}
*we can use two process of font styles/font family: i)with link. and ii) without link.
*with link files is have google fonts website.
*And some without link font family: sans-serif, serif, arial black, arial, verdana, comic sans ms, tahoma,
trebuchet ms etc.
*we can download font family files and use css files: @font-face{
font-family:'any';
src:url("file location");}
any tag{
font-family:'any',sans-serif;}
#vdo:05.CSS_15: *Introducing font length.
*font length: 2 types=> i) absolute length
ii) relative length
i)absolute length=> cm, mm, in, px, pt, pc:
1 cm = 10mm,
1 in = 2.54 cm,
1 in = 96 px,
1 px = 1/96 of 1 inch,
1 in = 72 pt,
1 pt = 4/3 px=1.333333,
20pt = 20* 4/3 px= 26.67 px,
1 pc = 12pt,
*Introducing font style: font-style:normal/italic;
#vdo:06.CSS_16: *Here we practising that, how to use relative length.
*Here we practising viewport related length: vmax, vmin, vh, vw.
#vdo:07.CSS_17: *Introducing line height, em, rem.
*full html file content font size is 16px. h2 tag font size is 24px. p tag font size is 16px. *em means multiply
of any parents font size and em full meanings emmediate parents. or if we use rem so it means root file font
size is emmediate parents count.
Class-12=> #vdo:01.CSS_18: *Introducing background-color, background-image, background-attachment, background-repeat, background-position,
background-size, background-origin, background-clip.
*background-image:url{"https://www.***.com"};
*background-attachment:fixed / scroll.
*background-repeat:repeat / no-repeat / repeat-x / repeat-y.
*background-position:50% 50% / center center / right top / left top / center top / right bottom / left bottom /
center bottom.
*background-size:*px / *px *px / same px same px / **px auto / auto **px / contain / cover.
*background-origin:padding-box / content-box / border-box.
*background-clip:content-box / padding-box / border-box.
*practising font-size:*, font-weight:bold, width, margin, border, padding.
#vdo:02.CSS_19: *Here we practising background related somethings.
*Here we can see that, how to use and customize multiple image in a place.
As like:background-image:url(""),url(""),url("");
background-repeat:repeat,no-repeat,repeat;
background-position:top,left,0% 0%;
background-size:auto 100%,100px auto,100% 100%;
#vdo:03.CSS_20: *Introducing background-image:linear-gradient(**,**,**,**,**...);
*Here we introduce background color directions:
i)to top left, to top right, to bottom left, to bottom right, to left, to right, to top, to bottom.
ii)0deg,30deg,-70deg.
iii)0rad,30rad,-70rad.
*Here deg=degree,rad=radient.
*practising some important rgba values:
1)rgba(255,0,0,1)=red.
2)rgba(0,255,0,1)=green.
3)rgba(0,0,255,1)=blue.
4)rgba(0,0,0,1)=black.
5)rgba(255,255,255,1)=white.
6)rgba(255,255,0,1)=yellow.
*background-image:linear-gradient(
90deg,
red 0%,red 30%,
green 30%,green 50%,
purple 70%,
yellow 90%
);
*Here we can see that how to use multiple linear gradient and image. As like:
background-image:
linear-gradient(
90deg,
rgba(255,0,0,.3),
rgba(255,255,255,.5),
rgba(255,255,0,0.4)
),
linear-gradient(
45deg,
rgba(180,100,250,0.1),
rgba(0,0,255,1)
),
url("https://tse4.mm.bing.net/th?id=OIP.67xJuHreWQ5uCxPkp-wN8wHaFn&pid=Api&P=0&w=224&h=171");
background-repeat:no-repeat;
background-size:100% 100%;
#vdo:04.CSS_21: *Introducing background-image:repeating-linear-gradient, radial-gradient, repeating-radial-gradient, ellipse,
circle, circle at 50% 50%, circle closest-side at 50% 50%, circle farthest-side at 50% 50%,
ellipse closest-side at 50% 50%, ellipse farthest-side at 50% 50%, ellipse closest-corner at 50% 50%,
ellipse farthest-corner at 50% 50%.
*practise circle at 80% 30%,Here first percentage 80% is right side direction or 20% is left side direction and
second percentage 30% is top direction or 80% is bottom direction.
Class-13=> #vdo:01.CSS_22: *Introducing CSS Icons.
*we can use two types of icons. As like: i) Font Awesome Icons. ii) Google Icons.
*CDN=content delivery network. CMS=content management system.
*we should give class: fa and icon name.class=fas,fab,far,s=solid,b=bold,r=regular.icon name=fa-cart-arrow-down
etc.fa means font awesome.we should give a script tag in head tag:
<script src="https://kit.fontawesome.com/a076d05399.js"></script>.this script tag is given w3schools. on the
other hand we can use this link:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> in head tag.
*My Own font awesome account kit code=
<script src="https://kit.fontawesome.com/5c171aa6df.js" crossorigin="anonymous"></script>
*Font awesome link pattern: <script src="https://kit.fontawesome.com/yourcode.js"></script>
*We Should keep css stylesheet link tag in head section at last. so that, we will didn't face any problem in future.
*practising different types of CSS icons.
#vdo:02.CSS_23: *Introducing CSS float.
*float:left/right.
*practising a design png file same copy coding.
#vdo:03.CSS_24: *practising a design png file same copy coding.
#vdo:04.CSS_25: *Introducing CSS Combinators=> descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
*Introducing=> clear: left;=> No floating elements allowed on the left side.
clear: right;=> No floating elements allowed on the right side.
clear: both;=> No floating elements allowed on either the left or the right side.***(V.V.I)
clear: none;=> Allows floating elements on both sides. This is default.
*practising float:left, float:right;
#vdo:05.CSS_26: *Introducing CSS Layout - The position Property.As like: position:static/ relative/ fixed/ absolute/ sticky.
*if we give position:fixed, so we should give extra two property: right,bottom/right,top/left,bottom/left,top.
*An element with position: static; is not positioned in any special way; it is always positioned according to
the normal flow of the page.HTML elements are positioned static by default.
*An element with position: relative; is positioned relative to its normal position.
*An element with position: fixed; is positioned relative to the viewport, which means it always stays in the
same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the
element.A fixed element does not leave a gap in the page where it would normally have been located.
*An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of
positioned relative to the viewport, like fixed).However; if an absolute positioned element has no positioned
ancestors, it uses the document body, and moves along with page scrolling.
*An element with position: sticky; is positioned based on the user's scroll position.A sticky element toggles
between relative and fixed, depending on the scroll position. It is positioned relative until a given offset
position is met in the viewport - then it "sticks" in place (like position:fixed).
Class-14=> #vdo:01.CSS_27: *Introducing All CSS Pseudo Elements. As like=> ::after, ::before, ::first-letter, ::first-line, ::selection.
*Here when we use after and before property then we should obviously use content:'*'; and display:inlin-block/
block; and better practise is beside use clear:both; property.
*Practising font-weight:bold; position:relative; position:absolute; height:100%; width:100%; border:2px solid red;
margin-right:10px; border-radius:50%; background-image:linear-gradient(red,green); z-index:-3; opacity:0.4;
display:inline-block; clear:both; border-top:2px solid red; border-right:*; border-bottom:*; border-left:*;
#vdo:02.CSS_28: *Introducing :root{
--anything/anyname:anyvalue,color/quantity;
}
*Here we should keep this property:scroll-behavior: smooth; so that smoothly scroll by the page.
*Introducing var();function.
*we can use this any color, background, padding, margin etc.
As like: color:var(--anything);/ background:var(--anyname);
*Introducing :hover{}
*Introducing :not(any class/id/tag){
color:***;
background:***;
}
*Introducing :empty{
color:***;
background:***;
}
*Introducing :target{
color:***;
background:***;
}
here we can use target pseudo-class in a navigation bar.
#vdo:03.CSS_29: *Introducing :lang(any){
color:***;
}
*Here this lang atributes contain under a ancor tag.
*practising text-decoration:none; font-weight:bold; list-style:none;
*Introducing :link{}, :visited{}, :hover{}, :active{}.
*Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
Pseudo-class names are not case-sensitive.
#vdo:04.CSS_30: *Introducing :first-of-type{}, :last-of-type{}, :nth-of-type(any number){},
:nth-last-of-type(any number){}, :only-of-type{}.
#vdo:05.CSS_31: *Introducing :first-child{}, :nth-child(any number){}, :nth-last-child(any number){},
:last-child{}, :only-child{}.
#vdo:06.CSS_31: *Introducing input[type="email"] {background:any color;}
:focus {background:yellow;}
input:focus {background:any color;}
input[type='text']:focus {background:any color;}
input:invalid {background:any color;}
:disabled {background:any color;}
input:disabled {background:any color;}
:required {border:any px any style any color;}
:optional {border:any px any style any color;}
:read-only {border:any px any style any color;}
:in-range {background:any color;}
:out-of-range {background:any color;}
:checked {width:any px;background:any color;}
Class-15=> #vdo:01.CSS_32: *Introducing Many Kinds of Shapes. As like: Circle, spuare, Particularly focused triangle Shapes.
Using by border properties.
*Practising :before and :after. Position: relative, absolute. border, padding, height, width etc.
#vdo:02.CSS_33: *Introducing clip-path: circle(*px at *% *%); / clip-path: circle(*% at *% *%);
*Here (first px% is radius value, at left vlaue, top value).
*Introducing clip-path: ellipse(50% 50%); this is default value.
*Here first value is width value and second value is height value.
*Practising position, height, width, z-index etc.
#vdo:03.CSS_34: *Introducing clip-path: inset(*% *% *% *%);
*clip-path: inset(0% 0% 0% 0%); this is default value.here first percentage is top value second
percentage is right value third percentage is bottom value fourth percentage is left value.