forked from kallaway/100-days-of-code
-
Notifications
You must be signed in to change notification settings - Fork 0
/
2020 Round2 100daysofcode
5930 lines (4373 loc) · 202 KB
/
2020 Round2 100daysofcode
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
#Day 1 January 29, 2020
#100daysofcode Round2 Day 1 Jan 29, 2020
Decided to re-start my 100daysofcode challenge back to day 1 because of too many missed days of coding last december.
I also continued the tutorial series that I'm working on about Web Development for Total beginners.
I also incorporated the freecodecamp challenges while building the travel blog in my tutorial for me to also get to review my lessons.
Lesson 06 Part 5: Anchor Elements https://youtu.be/hxtyazcc-Lw
#Day 2 January 30, 2020
Today I just added a search bar on the navigation area and made some changes to the colors of the Travel Website I'm working on.
#Day 3 January 31, 2020
Today I just worked on the travel website that I'm making and continued on
making tutorial videos related to how I'm building the site. I'm also looking
into applying for a remote job as a web developer. I just want to ask for advice if its ok
if I just start with a $6 per hour rate. I'm willing to start with that rate per hour and just want
to get the necessary experience to further improve my skills. Any advice would be highly appreciated.
hiring@desk-place.com
Dear Sir / Ma'am,
I saw your post in Facebook that you are looking for a part-time or full-time web developer that would be interested to work remotely.
I am highly interested for the position. Here are the details as requested from the instructions given in the job post.
Name: Rodrigo Bonzerr S. LopezYears and asking Rate per hour: Started re-shifting to web development since 2016 and
I'm willing to start at the $6 dollars rate per hour.
#Day 4 Feb 1, 2020
#100daysofcode Feb1,2020
Today I just continued doing the javascript challenge in freecodecamp.
WOrking on the Counting Cards problems. Also enrolled on freecodecamps UI Design Fundamental free course.
In Scrimba.
https://www.freecodecamp.org/news/learn-ui-design-fundamentals-with-this-free-one-hour-course/
#Day 5 Feb 2, 2020
Feb2,2020
Continued with the short course in Scrimba,
I'm also working on improving the design for my personal free tutorial wordpress site.
Found out about the WCAG 2.0 contrast Guidelines. https://www.w3.org/TR/WCAG20/ also
found out about contrast checking tools and I'm going to check out how to use them.
Learned the rule about contrast ratio should be at least 4.5:1 at the least.
Contrast is important for accessibility.
We'll take a look at the WCAG 2.0 contrast Guidelines.
Contrast is defined as being in a "strikingly" different state from something else.
Scale just as with alignment, white space, contrast, and the other fundamentals,
the size of every UI element must be carefully considered.
Define you, Destroy you or strengthen you
#Day 6 Feb 3, 2020
#100daysofcode Round2 Day 6 Feb 3 2020
Continued with my Javascript Challenges in Freecodecamp.
Also continued on the lessons that I'm making for webdev for total beginners.
Making some time to also work on understanding how to use the color contrast analyzer browser plugin.
https://youtu.be/WCEZ1NBznMM
#Day 7 Feb 4, 2020
Working on my FCC challenge in Javascript and also still reseaching about tools related to contrast checking. Also worked on design challenge today. I also checked out an alternative opensource softwares that I can use such as darktable for editing and improving resources. Anyone knows an alternative for adobe XD?
https://www.majesticsignstudio.com/blog/best-color-combinations-for-readability/
https://www.color-hex.com/color/ffff00
https://webaim.org/resources/contrastchecker/
#Day 8 Feb 5, 2020
Reviewed some of my lessons in javascript from Bob Tabor and remembered that I can use the www.//caniuse.com to check features of javascript which shows us about the description and current version on whether it is supported or not. Also checked out babeljs.io which use the combination of techniques that takes your code and see how it converts it to old versions.Added these to my resources. Been working on reviewing my knowledge in javascript. Always agreed with Bob about writing code that its fun and encouraging.
https://babeljs.io/
https://caniuse.com/#info_about
#Day 9 Feb 6 2020
Followed through the snake game of Sir Chris De Leon and it's amazing how he can make a game
within that 4 minutes video. Really interested in taking his course for game dev. Just need
to find funds. Now I just need to study how the code worked.
Applied some Css to center the game and added some colors to the background.
https://youtu.be/xGmXxpIj6vs
#Day 10 Feb 7, 2020
I found a good article about five projects that new developers
can work on and going to try out in building those projects. Learned how to use the
CodeSandbox. Also worked on an FCC game&Understand how to clear the canvas when moving the object.
https://medium.com/better-programming/a-list-of-fun-projects-you-can-build-as-a-developer-be8e56f1748c
#Day 11 Feb 8, 2020
#100daysofcode #R2D11 Feb 8 2020
Today I just continued with the FCC game coding course. Worked on creating a ball png
in Inkscape and was able to make the paddle work.
#Day 12 Feb 10 2020
#100daysofcode #Round2 version 2 Day 12 Feb 10 2020
Missed out coding yesterday, today continued with the javascript game but encountering some errors.
Was able to make the ball bounce around. Encountered the word refactor and working on understanding what it means.
Was working to solve and issue since this morning up tonight and finally found the error and issue with game.js
file from where I created the class and it was just simply not in the same directory. It really gave me a headache :)
#Day 13 Feb 11 2020
Today just continued with the js game and was able to use the paddle to collide with the ball.
Also trying to make a brick png for the assets.
#Day 14 Feb 12, 2020
Worked on a brick png still needs some improvement. I'm having some issues with the forEach declarations.
Going to find out why it's not working. ALso learned how to maximize the use of the initial letter CSS trick.
Also worked on creating customized radio buttons in the travel website that I'm working on.
#Day 15 Feb 13, 2020
#100daysofcode #R2D2 02/13/2020 Just finished the tutorial on building customize radio button.
I'm also still working on the JS game. Found the issue with the ball not hitting the bottom wall.
Was finally able to make the level 1 work.
https://youtu.be/Y7Qd7uNr1ek
#Day 16 Feb 14, 2020
#R2D16 Feb 14, 2020 Today I was able to implement destroying the bricks when colliding with the ball.
Worked with some gamestates Paused and Running options. I was able to make the game toggle from pause to running.
#Day 17 Feb 15, 2020
#100daysofcode #R2Day17 Feb 15, 2020 Was able to make a pause screen, gameover screen, and working
on leveling up. Having an issue with the gameover screen. Trying to find out the error.
#Day 18 Feb 19, 2020
#100daysofcode #R2D18 02/19/2020Working on finishing first section of FCC in Javascript.
Thinking about taking a Master's Degree in computer science as aligned to my Bachelor's degree
do you guys think it will be worth it?
Any recommended learning institution w/c is not that expensive
#Day 19 Feb 20, 2020
#100daysofcode #R2D19 Feb 20, 2020 Still working on the first section of FCC,
also working on understanding the vocabulary of the language. So objects can store property that has a key-valued format.
Want to further be able to explain the keywords of the language.
#Day 20 Feb 21 2020
Working on completing the Record Collection challenge in FCC. Was able to read through an article about not learning everything.Watch the link to the video of React Alicante about frontend without going insane. So many things to learn indeed. Importance focusing on USERS.Really good video :) https://youtu.be/_kVxXV0TQ7M
React Router 4 && SASS + BEM to aphrodite
Reach Router && APHRODITE to styled components
ReasonML && Styled-components to Glamorous
Apollo 2.0 && Glamorous to emotion
Typescript
CSS Grid
Service workers
Web Components
Rest to GraphQL
#Day 21 Feb 22, 2020
#100daysOfCode #R2D21 Feb 22, 2020 Today I just created a tutorial about how to use the div element
and created an example of a basic html layout in codepen. I also worked on the FCC challenge for Javascript fundamentals.
#Day 22 Feb 23, 2020
#100DaysOfCode #R2D22 02/23/2020 I read content about QUIRKS MODE( curios because of Boku no Hero) and STANDARD mode related
to using the DOCTYPE. Watched a video about questions that might come up during an interview for a job as a
web developer. https://youtu.be/zHPdfN_zU_o
#Day 23
#100DaysOfCode
Worked on a freecodecamp game logic Model View Controller approach for the Rabbit trap game. Organizing
codes using this method and familiarizing myself with how communicaiton works through public methods.
I learned that its good to practice modularity which can save time.Still have a question about convention
in making an object.Still don't understand some concepts like why some new objects uses capital letter than small letters.
Maintainability
Modularity
Self-contained class
#Day 24 Feb 25, 2020
#100DaysOfCode
Checking out how to use canva and still continued with the FCC platformer game tutorial.
Had a difficult time understanding some of the
concepts so going to do some more research about the topic.
I'm also researching any standard guide for pricing in building websites for
clients if your planning to go freelancing. I'm also currently working on a possible freelance job
and still trying to check on how to price the services that I'll be providing.
#Day 25 Feb 26, 2020
#100DaysOfCode
I was asked to build a website that has a flipbook effect similar with the example in fliphtml and found a jquery plugin
that can be used to apply that effect.
Also found out about GreenSock animation library. Wondering how much should I charge if work on this project
within the 3week requirement
time span of the client. Also made a strikingly website portfolio.http://rodrigobonzerrlopez.mystrikingly.com/
#Day 26 Feb 27, 2020
#100daysOfCode #R2D26 Feb 27 2020
Still working on the flipeffect project, still having doubts if I can finish this project within 3 weeks but thinking positive.
Was able to implement the turnjs jquery project and used fliphtml5 for an example bigger version of the page flip.
https://youtu.be/ZfR-QNNssvk
#Day 27 Feb 28, 2020
#100DaysOfCode
Going crazy why the second shelf was not moving and the culprit was the classname. Still don't have experience in buying a
domain name and using hosting. Wondering if I should go for godaddy or wordpress directly for getting both.
https://rbsldevtech.godaddysites.com/gallery
#Day 28 Feb 29, 2020
#100DaysOfCode
Trying to refactor the code and applied flex-box to prepare for working in the responsiveness of the project.
I'm also studying SEO for Wordpress on how to understand it more deeply.
#Day 29 Mar 1, 2020
#100DaysOfCode
Watched a funny video about Floyd's algorithm. Still working on the flipbook portfolio page. Also been doing research on how
to use elementor, strikingly, godaddy hosting and purchasing domain names.
#Day 30 Mar 2, 2020
#100DaysOfCode #R2D30 Mar 2, 2020 Worked on the footer section. Also looking for some jquery plugins for animation scroll.
Was able to implement and
make the Animation scroll work. Still going to add some animation in the navigation and the work on responsiveness
#Day 31 Mar 5 2020
#100DaysOfCode
#100daysOfCode #R2D31 Mar 5 2020
Still working on the positioning of the elements and images, need to work on responsiveness.
Applied some simple animation for the buttons in the navigation area. Also worked on creating a grid layout configuration. Saw a job post with requirements of learning elastic search. Trying to do some reading about it and researching about what Timber is about. Reviewed how to create grid format using float and clearfix.
https://docs.google.com/forms/d/e/1FAIpQLSd2OlICtlqTzf-bvY--cedCcjIUg7PAE29TRb5gq601bRsUsw/viewform
Used max-width which helps in specifiying the width that we specified if we have enough width but if the viewport is smaller it will simply fill 100% of the available space.
Margin: 0 auto is the trick to center block elements inside of annother block elements.
This works when we say that we want the margin to render automatically, this means that the browser whgen rendering the page will automatically figure out rendering the margin on the left and the right side. Since its both set to auto, it means that left and right will be the same.
Since CSS will automatically calculate the left and right margin so that they will be the same so of course the element will be centered.
Learned about the calc() function and how it can be used to mix units inside of that functions.
select start ^
Select any class that ends $
select all * that contains
#Day 32 March 6, 2020
#100DaysOfCode March 6, 2020
Working on applying parallax effect to card sections. Research about what is lead generation. ALso search some
SEO plugins and learned about On-page, Technical, Off-page. Learned that AMP is a framework. Encountered the word
Structured Data. Learned about Page speed insights. Also found creately.com
Pagespeedinsights
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Frbslfreetutorial.wordpress.com%2F
pingdom website speed test
https://tools.pingdom.com/#5c2b7bf3af400000
On-age SEO tasks - Titles, meta tags,content-optimizations
Technical SEO tasks page speed optimization, redirects, canonicals, and href lang.
Yoast SEO and All-in-one SEO pack
SEO Plugins
1. Rank Math
2.
#Day 33
#100DaysOfCode
#100DaysOfCode #R2D33 Mar 7 2020
Reviewing php and also learned how to install WordPress locally in my computer. Found the reason why I couldn't reposition
the footer images, it was a typographical error again. Applied some linear gradient in the footer text.
#Day 34
#100DaysOfCode
#100DaysOfCode #R2D34 Mar 8 2020
Installed heroku in my computer. Applied some transform animation in the footer section and read about difference between web app and websites.
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-shadow
https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
https://fonts.google.com/?query=Bebas+Neu&selection.family=Bebas+Neue
https://www.youtube.com/watch?v=M7sRyDa9ioc&list=PL85nsL7G6KsA2bEMrM2xtzJPo2ySAq_Wm
#Day 35 March 10, 2020
#100DaysOfCode #R2D35
Wasn't able to code yesterday but was able to make a tutorial to review concepts about text-shadow.
Working on how to make the footer images to have some hover
animations. Really need to find a remote work as an alternative bec. of the ncov.
#Day 36 March 11, 2020
#100DaysOfCode
Still working on the footer section, trying to also find how to make the outline for the hover effect to become a little more smaller.
#Day 37 March 12, 2020
#100DaysOfCode
Current looking into ASP.NET, learned that razor is a language that involves html and C# and .net.
DId the ASP.NET Core 101 tutorials today while working on adding some other sections in my flipbook project.
Downloaded dotnet-sdk. Learned about Model that involves a C# file. Json property w/c is an attribute that we
can stick on the top of our property and be able to use it to map. ALso encoutered the terms refactoring tools.
Two strings methods reminder. Learned the cup of tea Nerd Humor.
ToString > is already something that objects already have. We need to have it with a public override because objects already have it for free.
We want to do our own version. NOw we want to convert a json representation of a product.
Serialize is taking all the object information and then converting it back to the text that will be part of the Json. Serial means to do something one after the other.
public override ToString()
{
JsonSerializer.Serialize<Product>(this)
}
Learned how to map the JsonPropertyName and mapped it to the the public string IMage.
#Day 38
#100DaysOfCode #Day 38
Today reviewed how to make rounded images in html. Was able to understand better how the style attribute
inside of the img element works and how it overrides the styles in the stylesheet and
how the width and height attribute inside of the img element can be overriden by the styles in a stylesheet.
https://www.w3schools.com/html/html_images.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
https://www.w3schools.com/CSSref/css3_pr_border-radius.asp
https://www.w3schools.com/howto/howto_css_rounded_images.asp
https://github.com/
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/add-borders-around-your-elements
file:///C:/Users/RogueX-pc6/Downloads/webdevIntrossamplever3/index.html
file:///C:/Users/RogueX-pc6/Desktop/webDevIntro/index.html
https://duckduckgo.com/?q=yellow+green+rgb&atb=v194-1&ia=answer
https://css-tricks.com/multiple-class-id-selectors/
#9ACD32
https://www.sessions.edu/color-calculator/
https://www.w3schools.com/csS/css3_shadows.asp
#Day 39
#100DaysOfCode #Day 39 March 15, 2020
Reviewed the concept of HTML File Paths and Property Accessors. Understand Pointer events for css
animation that helps you to remove the clickability of a button after animation.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors
https://www.w3schools.com/html/html_classes.asp
https://www.w3schools.com/CSSref/css3_pr_box-shadow.asp
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
https://www.w3schools.com/howto/howto_css_animate_buttons.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate1
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate3
https://duckduckgo.com/?q=%23FF00D3+complementing+color&atb=v194-1&ia=web
https://www.sessions.edu/color-calculator/
https://codepen.io/pen/
https://www.youtube.com/watch?v=CxC925yUxSI
#Day 40 March 17 2020
#100DaysOfCode #Day 40 March 17 2020
We are now at enhance quarantine in the Philippines because of NCOV. Stuck here at home and online class
for my students were also suspended. Now trying to use free time to learn and made the
button onClick to fade in new text after the the text of the h1 element fades out CSS trick.
#Day 41 March 18, 2020
#100DaysOfCode #R2D41 03/18/2020
Reviewed some of my lessons in Advance CSS and SASS. Working on building a website for my apartment.
Going to start making my cooking blog website too plannign to learn how to cook while in quarantine.
Made a video on how to make a Pinoy dish Pork Giniling. Stay safe, stay humane, and stay alive.
C04-S02-L05
#Day 42
#100DaysOfCode #R2D42 March 19 2020
3rd day of being stuck inside of the house. Did some laundry and
reviewed pseudo elements today. Pseudo classes are special states of a selector.
Reviewing my Advanced CSS and SASS course from Jonas Schemdt Lesson . Trying to figure out hover effect of Manoj Silag
C04-S02-L06
#Day 43
#100DaysOfCode #Day 43 March 20, 2020
Today I'm reviewing how Cascade works.Reviewed how the !important declaration and specificity works.
Understanding the cascading values. Changed all absolute px units to relative rem units.
C04-SO3-L04 Cascade Importance> Specificity> Order
C04-SO3-L05 Specificity In Practice
C04-SO3-L06 HOw CSS Values are Processed
C04-SO3-L07 - Inheritance
C04-S03-L08 - Converting PX to REM
C04-S03-L09 - How CSS Renders a WEBSITE: THe VISUAL FORMATING MODEL
Comm Plan.
Net Name - COVID Watch Net
Pri Freq - 3.996Mhz LSB
Sec Freq - 3.993Mhz LSB (down 3Khz)**
Alt Freq - 3.990Mhz LSB (down 3Khz)**
Start time - 0100Z Sat 21 Mar (20 Mar Fri 2000 CDT)
All stations be prepared to relay. Any station able to relay must be in
contact with NCS or Alt NCS. As 75m is more a regional band and the
noise floor can be significant use of amplifiers is desired.
**Net Control Station (NCS) moves to Sec Freq if Pri freq is
occupied or splatter is occurring at the NCS location. In the event the
Sec freq is occupied or is unworkable continue down to Alt frequency. If
Sec freq is used start time will be 2005z and if conditions require the
Alt freq use then start time will be 2010z. With the crowded nature of
75m band don't forget, minor adjustments in operating freq may be
required based on usage by other operators or nets.
End of Comm Plan.
#Day 44
#100DaysOfCode #R2D44 March 21 2020
Today I created another tutorial in one of the project that I'm building.
Also checked an article about value pricing your work. Trying to find a remote work &
found one job asking how much would a landing page usually cost. Trying to also refactor some of
my projects to use rem instead of px.
BLOCK standalone component that is meaningful on its own.
ELEMENT is a part of a block that has no standalone meaning. If we take out this elements inside of the block they wouldn't have any meaning or they won't be useful. Example recipe block then recipe__info which is mainly just for the recipe information.
Take note that the recipe block still appears within all the class names within the block.
We can also see that we have very low specificity ledgers. We always use classes and they are never nested. This is why they have a very low specifity which is why BEM is widely used for easy to maintain code.
MODIFIER is a flag that we can put on a block or element in order to make it different from the regular blocks or elements or version.
For instance there maybe some rules for buttons and we used the modifier to make a more specific and different button and in our example a round one.
Naming approaches in naming classes. This are standalone components that can be used anywhere in the project
SMAXX
Object oriented Css
BEM
C04-S03-L10 Architecture and Design
C04-S03-L11 Implementing BEM in the Natour Project
https://sass-guidelin.es/
https://itnext.io/a-guide-to-component-driven-development-cdd-1516f65d8b55
https://www.atomicdesign.tv/
Components - one file for each components
Layouts - define overall layout of the project
Abstracts - put code that doesn't output any css such as mixins and variables
Pages - styles for specific pages of the project
Themes - implementing visual themes
Vendors - third party css goes.
Base - put basic project definitions
Give Background Color to a DIV Element
Set the ID of an Element
Use an ID Attribute to style an element
Adjust the padding of an element
Adjust the margin of an element
https://itnext.io/a-guide-to-component-driven-development-cdd-1516f65d8b55
https://studywebdevelopment.com/hourly-billing-vs-value-pricing.html
https://github.com/rodprogramdev/100-days-of-code/blob/master/2020%20Round2%20100daysofcode
https://www.freecodecamp.org/learn
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
<html>
<head></head>
<body>
<a href="#" id="btn" class="button" > TRY THIS CASCADE </a>
<p>
Inline styles has higher specificity over Id's > Id's has higher specificity over Classes > Classes has higher specifity over Element selectors.
</p>
</body>
</html>
body{
background-color:black;
color: white;
}
#btn {
color:pink;
}
.button{
color: red;
}
a{
color: blue !important;
}
#btn.button {
color: orange;
}
#Day 45
#100DaysOfCode #R2D45 Msarch 22 2020
Reviewed more about cascading today and finished the tutorial about it for solving
some of the challenges in freecodecamp. Also found
out some new features that's been implemented by wordpress and tried to tinker with it for a while.
#Day 46
#100DaysOfCode #R2D46 March29,2020
Just got back into reviewing CSS Grids and working on the Travel blog tutorial that I'm making. Also played around
with CSS functions and Variables.Also read more about different CSS Selectors and how I can use them in my project.
https://www.w3schools.com/csSref/css_selectors.asp
https://www.w3schools.com/csSref/css_functions.asp
https://www.w3schools.com/css/css3_variables.asp
#Day 47
#100DaysOfCode #R2D47 March30,2020
Working on improving my freetutorial site today and added a guitar tutorial of my original composition.
Also reviewed some of my lessons in my Udemy Course and applied it in my project for property rental website.
Trying to play around in making cards.
https://rbslfreetutorial.wordpress.com/guitar-lessons/
#Day 48
#100DaysOfCode #R2Day 48 March312020
Been trying to work on the positon of div in my project still working on some ideas.
#Day 49
#100DaysOfCode #R2Day49 April 1 2020
Practice using git again almost forgot how to push files to a remote repository. Reviewed steps in adding, and making branches.
https://rodprogramdev.github.io/rbsrental/
#Day 50
#100DaysOfCode #R2Day50 April22020
Reviewed how to make branches in git. Tried applying column grid in the project.
#Day 51
#100DaysOfCode #R2Day51 April42020
Working on the footer and cards with icons for today. Trying to review how to use icon-fonts.
#Day 52
#100DaysOfCode #R2Day52 April52020
Currently reviewing the absolute and relative positioning concept to better understand how it works. Learned that em can actually cascade. Rem means root em. I know that rem is very useful for responsive design grids especially if you want to change everything jsut using the root font-size.
https://www.lifewire.com/absolute-vs-relative-3466208
https://www.youtube.com/watch?v=ngt-qQKaTpA
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Units example</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
.parent{
background:blue;
height: 200px;
width:200px;
}
.child {
background: yellow;
height: 50%;
width:50%;
}
html{
font-size: 16px;
}
<div class="remparent">
<div class="remchild--1"><h2>4rem</h2></div>
<div class="remchild--2"><h2>4rem</h2></div>
<div class="remchild--3"><h2>4rem</h2></div>
</div>
<div class="remparent">
<div class="remchild--1"><p>Hi there!</p></div>
<div class="remchild--2"><p>I am REM!</p></div>
<div class="remchild--3"><p>We will SCALE!</p></div>
</div>
.remparent{
background:blue;
height: 200px;
width:200px;
}
.remchild--1 {
background: yellow;
font-size: 1rem;
}
Absolute lengths are self-regulating and they don't base their dimensions on anything else on the page. They don't base it on parent element or another font. They base it on real world measurements which are great for use in printing.
Inches (in)
Centimeters (cm)
Millimeters (mm)
point and picas
Points (pt) -these are typographic terms in your document is the physical measurement. We are talking about physical dimensions of a printed example.
Picas (pc) a point in picas is 12 pts
Pixels is what we've been using and a lot are familiar with this absolute unit. Eventhough they are absolute units they are not based on the viewport width or another elements font-size. They are best thought as device pixels
because the size of the pixels can vary depending on the device. If you have a high density device such as a cellphone screen or a low density monitor. You will find the idea of pixels on all devices. You would see that other lengths map directly to pixels. You will notice that when you inspect an element they get rendered in pixel. Javascript is rendered in pixel. This is why it is the most commonly used css units.
Relative lentghts gets their measurements from something else
The parents dimensions(%)
The currently Declared font-attribute(em,rem,ex,ch)
The viewport dimension(vw,vh,vmin,vmax)
Percentages(%)
Font-sizes(em&rem)
Viewport Dimension (vw&vh)
Viewport Max(vmax)
Viewport Min(vmin)
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS POSITIONING</title>
</head>
<body>
<h1>Musashi Miyamoto</h1>
<p>"Get beyond <span id="lf">LOVE and GRIEF</span> and exist for the good of men"</p>
</body>
</html>
#lf{
position: static;
background-color: lightblue;
}
when we position something statically it stays within the normal flow of the document.
Even if we change the top property. It will not move. It still stays within the normal flow of the document. Top, left, right, bottom properties will still stay the same way and don't do anything at all.
When we change the position property to relative.
You would see that nothing happens. With relative positioning you can move the element but it moves from where it would naturally would flow within the normal flow of the document. The box stays from where it is.
But if we set the properties you can see that the box drops 20px from the top of the normal flow.
ABSOLUTE:
Now you can see that the other words after the box moves over to the left and we can see that the box gets burried within.
Whats happening here is that when use the absolute property. It gets remove completely from the normal flow.
You can see that the rest of the document or the part which is in the normal flow assumes that it is not even there. You can see that the box gets completly remove from the normal flow.
When we position it using top20px you would see that it positions itself from the top of the normal flow of the document.
If we give it a top: 0px and left 0px; we can see that it is up in the left corner of our document.
IF we use relative we can see that its still exactly the same as if it is statically positioned. So for the relative positioning the rest of the document in that flow makes room for the element. While with absolute it completely gets remove from the flow and the room for it is remove as well and the rest of the flow adjust accordingly.
NORMAL FLOW - static positining default elements remian within the normal flow
ABSOLUTE POSITIONING: Elements are removed from the normal flow and positioned from the topleft of current context and other elements adjust accordingly.
RELATIVE POSITIONING- elements removed from the normal flow positioned from the would be normal flow position and other elements will maintain their position.
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS POSITIONING</title>
</head>
<body>
<section class="header">
<h1>HEADER SECTION</h1>
<p>"Get beyond <span id="lf">LOVE and GRIEF</span> and exist for the good of men" - Musashi Miyamoto</p>
</section>
<section class="scroll">
<h2>SECTION SCROLL</h2>
</section>
</body>
</html>
/*#lf{
position: static;
background-color: pink;
}*/
/*#lf{
position: relative;
background-color: pink;
top:20px;
}*/
/*#lf{
position: absolute;
}*/
/*#lf{
position: absolute;
top:20px;
background-color: pink;
}*/
/*#lf{
position: absolute;
top:0px;
left:0px;
background-color: pink;
}*/
/*#lf{
position: relative;
top:20px;
left: -80px;
background-color: pink;
}*/
#lf{
heigth: 100vh;
position: fixed;
background-color: pink;
}
.scroll{
height:100vh;
background-color: lightblue;
}
#Day 53
#100DaysOfCode #R2Day53 April 8 2020
Today i had my first experience in a web designer exam for a job that I'm applying for.
I was able to pass the first interview yesterday and took an exam today to design a homepage landing page.
WEB DESIGN EXAMINATION
Project: Flip Flop Shop
Wireframe: dont have to follow placement of boxes , text buttons. wireframe is just to let designer know what sections are there on homepage.
USP: Unique Selling Points (refer to project briefing)
Test: to be completed in 1 day, at their own time at home
#Day 54
#100DaysOfCode #R2Day54 April 13 2020
Worked on the card section for the rental project that I'm working on.
still reviewing my lessons on responsive design and also worked on my javascript course for today.
#Day 55
#100DaysOfCode #R2Day55 April 14 2020
Today I'm trying to work on adding some contents to the footer section.
Also wondering what would be a good linear gradient for the background-image that will fit white.
#Day 56
#100DaysOfCode #R2Day56 April 17 2020
Today I'm looking into how I can apply a database into one of my project. I'm also working on further
understanding how portforwarding would work so
that I can try to check how I can put up a server using my computer and test out my project from there.
#Day 57
#100DaysOfCode #R2Day57 April 20 2020
Reading about tomcat apache server. Enrolled in a Python and Javascript course in EdX and started with the lessons and going to work on some of the projects.
https://tomcat.apache.org/tomcat-7.0-doc/manager-howto.html#Introduction
https://www.youtube.com/watch?v=ke1SgU_HY80
If you're the Twitter type,
follow @cs50,
say hello to classmates with hashtag #cs50,
follow (and say hello!) to @brianyu28, and/or
follow (and say hello!) to @davidjmalan.
#Day 58
#100DaysOfCode #R2Day58 April 21 2020
Checkout Kibana and continued with my CS50 course today. Worked on the navigation section of my rental site
and added some additional contents to a git and github presentation that I'm working on.
https://www.wikihow.com/Create-and-Delete-Files-and-Directories-from-Windows-Command-Prompt
#Day 59
#100DaysOfCode #R2Day59 April 22 2020
Continued with my course CS50 today. Learned how to use the git status command in git today.
Also reviewed some C++ code. Also looked at reviewing the use of yarn from the project that I
tried to work on for fcc manila header section. I also upgraded yarn.
#Day 60
#100DaysOfCode #R2Day60 May 2 2020
Haven't been able to post, but I've been learning some new git commands like git log,
git reset, git reflog. Also understood the concept of merge conflicts.
#Day 61
#100DaysOfCode #R2Day61 May 4 2020
Today I'm testing out how HTML APIs works. Tried adding some svg icon to the footer of my rental project. ALso continued with my CS50 course in edx. Still no responsiveness applied yet.
https://rodprogramdev.github.io/rbsrental/
Hover: effects
https://freefrontend.com/css-hover-effects/
#Day 62
#100DaysOfCode #R2Day62 May 5 2020
Today I enrolled into google analytics for beginners Going to try and embed a
tracking code in to one of my projects. Is anyone interested in building a portfolio template
website that we can use to showcase our portfolios and then practice using git to collaborate?
Also continued with my CS50 course in edX. Keys in python looks similar to properties in an object in
javascript and there is no need for semicolons.
https://analytics.google.com/analytics/academy/course/6?utm_medium=email&utm_source=registration
https://analytics.google.com/analytics/academy/course/6/unit/1/lesson/3
#Day 63
#100DaysOfCode #R2Day63 May 7 2020
Today I was able to check out github satellite for team and project management.
Also working on my CS50 course currently in python flasks topic. Jinja2 templating language for flasks.
Python Flasks
https://isitchristmas.com/
https://jinja.palletsprojects.com/en/2.11.x/
Github open source projects
https://projects.raspberrypi.org/en/projects/python-web-server-with-flask
https://kentcdodds.com/blog/first-timers-only/
https://github.com/MunGell/awesome-for-beginners/blob/master/README.md
https://dev.to/harshboricha98/roadmap-of-coding-for-starters-44cp
https://threejs.org/
Wireduconline
https://stackshare.io/stackups/angularjs-vs-python
#Day 64
#100DaysOfCode #R2Day64 May 9 2020
Applied BEM in header-section and section-cards and trying to implement SCSS in the rental project that I'm working
on. Reviewed how to make multiple lines of code into a mixin and call it using @include. Reviewed the DRY principle
don't repeat yourself. Also used arguments in @mixins.In a mixin the code is copied to the selector
In an %extend the selector is the one copied to the code.
Mixins reusable piece of code that we write into a mixin.
Whenever we use that mixin, that code is put in a place, where we used or called that mixin. Its like a huge
variable that has multiple lines of codes.
Lets imagine that we wanted to use the clearfix not only in the navigation but in multiple places. It would
be more practical to create a mixin in place of the clearfix code that we have which is composed of multiple lines.
We can pass in an argument in a mixin
Extends allows us to place a placeholder and put a bunch of styles and have other selectors extend that placeholder.
placeholder using the percentage sign.
In a mixin the code is copied to the selector
In an extend the selector is the one copied to the code. We only use extend when the rules that we are extending are inherently and
thematically inherent.
Lesson 23 advance CSS
#Day 65
#100DaysOfCode #R2Day65 May 10 2020
Able to review how to perform npm init to install package.json file.
npm install node-sass and also install jquery. Also read about website legal requirements for privacy policies.
Able to review how to perform npm init to install package.json file.
npm install node-sass and also install jquery. Also read about website legal requirements for privacy policies.
This will make sure that the package.json file is updated and list this package as one of our developer dependencies. It means that node sass is a tool that we used to develp our project
npm install node-sass --save-dev
We can now see that node sass is listed as a dev dependency
we can also use jquerry
npm install jquery - we don't need to put --save-dev because jquery is not a tool for development. Its a javascript file that we want to include in our project.
npm install jquery --save
this will create a field for dependencies, this is what we need in our project. It helps with the functions. While in node sass its just a tool.
npm uninstall jquery --save
to uninstall
we can delete the node_modules folder when we try to upload our files, because we already have our devDependencies in our package.json file.
Then we can just go and perform
>npm install
https://www.mountaingoatsoftware.com/agile/user-stories
https://www.motocms.com/blog/en/website-legal-requirements/
#Day 66
#100DaysOfCode #R2Day66 May 11 2020
I'm currently learning appengine from google on how I can deploy an app using it. I'm still pretty new with API's,
it seems like the process of using this is almost similar to angular need to dive in more deeper.
#Day 67
#100DaysOfCode #R2Day67 May 12 2020
Today I continued with my CS50 lesson 3 about Database PostgreSQL. Also created a heroku app for the CS50 Project1.
Trying to create a learning schedule for a week while in quarantine.
https://www.postgresql.org/about/
https://www.simplifiedpython.net/python-mysql-tutorial/
mailchimp
https://www.infosecurity-magazine.com/news/mailchimp-found-leaking-email/
#Day 68
#100DaysOfCode #R2Day68 May 13 2020
Read through the instruction of Project0 in my CS50 and currently working on it right now.
Installed SCSS for the project and currently working on each of the pages.
"repository": {
"type": "git",
"url": "git+https://github.com/rodprogramdev/RBSL-CS50-Project0.git"
},
#Day 69
#100DaysOfCode #R2Day69 May 14 2020
Learned about the concept of RACE CONDITIONS. Encountering some errors in git when I try to run git in
the repository I made for Project0. I'm trying to implement bootstrap in the navigation section of the Project 0.
trying to find out how to remove the background color of the container.
https://getbootstrap.com/docs/4.0/utilities/colors/#background-color
https://bootstrap.themes.guide/how-to-customize-bootstrap.html
https://bootstrap.themes.guide/how-to-customize-bootstrap.html
https://stackoverflow.com/questions/17179235/overriding-bootstrap-nav-background-color
SQLAlchemy
https://www.sqlalchemy.org/
https://docs.python.org/3.8/library/csv.html#csv.reader
https://en.wikipedia.org/wiki/Race_condition
#Day 70
#100DaysOfCode #R2Day70 May 15 2020
Today I studied how to download and install potgresql. Also working on the media querries for #CS50 python and js course Project 0.
Also did some challenge in my FCC javascript section. Aiming to also finish my lessons there.
#Day 71
#100DaysOfCode #R2Day71 May 16 2020
Reviewed my lessons from Sir @Jonasschmedtman advanced CSS and SASS course for
writing media querries. I also continued with some of the lessons in freecodecamp for
javascript currently at do while loop. Still working on Project 0 of #CS50. Trying to maximize my time while in quarantine.
#Day 72
#100DaysOfCode #R2Day72 May 18 2020
Also applied npm scss into my rbsrental project and practice writing the scripts to compile