tsunamiCoffee_v1.0

What's Changed

• Add the background image #778 by @oldoc63 in #779
• Background Properties #778 by @oldoc63 in #780
• Add a padding to the left and right of the navigation’s list items #781 by @oldoc63 in #782
• Inside of the .supporting img selector, set the height and width dime… by @oldoc63 in #784
• Set the right margin of the image to 5 percent #785 by @oldoc63 in #786
• Use rem units to make the h1 text equivalent to 40 pixels #787 by @oldoc63 in #788
• Add a width of 100 percent to the .location img CSS rule #789 by @oldoc63 in #790
• Width under 960 pixels #791 by @oldoc63 in #792
• Write a media query for screens under 700 pixels #793 by @oldoc63 in #794
• You can make and element dissapear using display none #793 by @oldoc63 in #795
• Resize for small screens #796 by @oldoc63 in #797
• make the rating’s h1 font size the equivalent of 32 pixels using rem … by @oldoc63 in #798
• Select the images in the gallery and style them so that they fill the… by @oldoc63 in #799
• Hide the nav inside the footer to appear better on small screens #796 by @oldoc63 in #800

Full Changelog: mediaQueries_v1.0...tsunamiCoffee_v1.0

mediaQueries_v1.0

What's Changed

• Avoid hard coded measurements and use relative measurements instead #748 by @oldoc63 in #749
• create relatively-sized content with em in CSS #750 by @oldoc63 in #751
• If you are interested in sizing elements consistently across an entir… by @oldoc63 in #753
• To size non-text HTML elements relative to their parent elements on t… by @oldoc63 in #755
• When percentages are used to set padding and margin, however, they ar… by @oldoc63 in #757
• elements on a website can lose their integrity when they become too s… by @oldoc63 in #759
• You can also limit the minimum and maximum height of an element #760 by @oldoc63 in #761
• When a website contains media, it’s important to make sure that it is… by @oldoc63 in #763
• The image will cover the entire background of the element, all while … by @oldoc63 in #765
• CSS uses media queries to adapt a website’s content to different scre… by @oldoc63 in #767
• Specific screen sizes can be targeted by setting multiple width and h… by @oldoc63 in #769
• Another media feature we can target is screen resolution #770 by @oldoc63 in #771
• the browser will require both media features to be true before it ren… by @oldoc63 in #773
• Media features can be separated in a comma separated list #774 by @oldoc63 in #775
• The points at which media queries are set are called breakpoints #776 by @oldoc63 in #777

Full Changelog: FlexGrid_v1.0...mediaQueries_v1.0

FlexGrid_v1.0

What's Changed

• The Tea Cozy HTML #640 by @oldoc63 in #641
• the dimensions of the padding and border are included in the element’… by @oldoc63 in #643
• Body: sets the background color to black #644 by @oldoc63 in #645

• is an id selector, used to target a single specific element with a … by @oldoc63 in #647

• nav ul display flex justify-content space around #648 by @oldoc63 in #649
• Styling menu and menu li a #650 by @oldoc63 in #651
• Item box is external to menu li a box #652 by @oldoc63 in #653
• mission background-image #654 by @oldoc63 in #655
• Styling .missiontext #656 by @oldoc63 in #657
• Final changes #658 by @oldoc63 in #659
• Block-level elements like these boxes create a block the full width o… by @oldoc63 in #661
• position: relative allows you to position an element relative to its … by @oldoc63 in #663
• When an element’s position is set to absolute, all other elements on … by @oldoc63 in #665
• Sticky by @oldoc63 in #668
• Flex containers are helpful tools for creating websites that respond … by @oldoc63 in #671
• Flexbox provides the inline-flex which allows us to create flex conta… by @oldoc63 in #673
• If the parent element is too small, the flex items will shrink to acc… by @oldoc63 in #674
• We can specify how flex items spread out from left to right, along th… by @oldoc63 in #676
• The align-items property makes it possible to space flex items verti… by @oldoc63 in #678
• The flex-grow property allows us to specify if items should grow to f… by @oldoc63 in #680
• the default value of flex-shrink is 1 #681 by @oldoc63 in #682
• flex-basis allows us to specify the width of an item before it stretc… by @oldoc63 in #684
• The flex property allows you to declare flex-grow, flex-shrink, and f… by @oldoc63 in #686
• Additional Grid Properties #687 by @oldoc63 in #688
• create a 2-column, 4-row layout #689 by @oldoc63 in #690
• set the grid-area property to have a proper value #689 by @oldoc63 in #691
• In the .container ruleset, use the grid-template-columns property to … by @oldoc63 in #692
• In the .container ruleset, use the grid-template-rows property to mak… by @oldoc63 in #693
• grid-area will set the starting and ending positions for both the row… by @oldoc63 in #695
• We can use justify-content to position the entire grid along the row … by @oldoc63 in #697
• align-items is a property that positions grid items along the block, … by @oldoc63 in #699
• align-content positions the rows along the column axis, or from top t… by @oldoc63 in #701
• This property will override justify or align for any item on which it… by @oldoc63 in #703
• there are instances in which we don’t know how much information we’re… by @oldoc63 in #705
• grid-auto-rows specifies the height of implicitly added grid rows #706 by @oldoc63 in #707
• You can pair row or column with dense, like this: grid-auto-flow: row… by @oldoc63 in #709
• pupSpa initial settings by @oldoc63 in #711
• Set Display to Grid #710 by @oldoc63 in #712
• use the grid-template-rows property with a value of: 100px 8fr 5fr 4f… by @oldoc63 in #714
• set grid-template-columns to six equal sections using fr #715 by @oldoc63 in #716
• Refactor with grid-template property #717 by @oldoc63 in #718
• Fix the broken layout #719 by @oldoc63 in #720
• grid-column shorthand using span #721 by @oldoc63 in #722
• In the .one and .two rulesets, use grid-column again to have each <di… by @oldoc63 in #724
• add a gap property, and set its value to 20 pixels #725 by @oldoc63 in #726
• make each of the boxes its own grid #727 by @oldoc63 in #728
• grid column end corrected by @oldoc63 in #729
• Make container grid #731 by @oldoc63 in #732
• Give the container three equal size columns #733 by @oldoc63 in #734
• Add a gap of 20px #735 by @oldoc63 in #736
• Ruleset .card-column display grid #737 by @oldoc63 in #738
• Set the grid-template-rows property to have 1 20px row and 5 100px ro… by @oldoc63 in #740
• inside .card-column, use the align-content property #741 by @oldoc63 in #742
• Add another card column for Completed Projects to keep track of all o… by @oldoc63 in #744
• Inside .card-column, use the grid-auto-rows property to implicitly se… by @oldoc63 in #746
• Completed Projects Final Style by @oldoc63 in #747

Full Changelog: toDoApp_v1.0...FlexGrid_v1.0

toDoApp_v1.0

What's Changed

• Fix a to-do web app #624 by @oldoc63 in #625
• Turning some of the elements into flex and inline-flex containers #626 by @oldoc63 in #627
• The elements inside the new inline-flex containers should grow to fil… by @oldoc63 in #629
• Add a flex-direction property with the value that orders the items in… by @oldoc63 in #631
• Inside the .row ruleset, add a flex-wrap property #632 by @oldoc63 in #633
• add a justify-content property with the value space-around #634 by @oldoc63 in #635
• Add a justify-content property with the value that centers the items … by @oldoc63 in #637
• add the align-items property with the value center #638 by @oldoc63 in #639

Full Changelog: Flexbox_v1.0...toDoApp_v1.0

Flexbox_v1.0

What's Changed

• Any element can be a flex container #551 by @oldoc63 in #552
• In te .container set the display: inline-flex #553 by @oldoc63 in #554
• The child elements (flex items) moved toward the upper left corner of… by @oldoc63 in #556
• You wont see any changes since flex-start is the default value #555 by @oldoc63 in #557
• The justify-content property should have a value of flex-end #555 by @oldoc63 in #558
• Justify-content property with a value of center #555 by @oldoc63 in #559
• Stretch and shrink the browser window to compare #555 by @oldoc63 in #560
• Justifiy content property with a value of space-between #555 by @oldoc63 in #561
• It is also posible to align flex items vertically #562 by @oldoc63 in #563
• All the elements will be positioned at the top of the parent containe… by @oldoc63 in #564
• All elements will be positioned at the bottom of the parent container… by @oldoc63 in #565
• The elements will be positioned halfway between the top and the botto… by @oldoc63 in #566
• The bottom of the content of all items will be aligned witn each othe… by @oldoc63 in #567
• Change to min-height 75px in .left, .center, .right ruleset #562 by @oldoc63 in #568
• Flex-grow specify if items should grow to fill a container #569 by @oldoc63 in #570
• flex-grow is declared on flex items #569 by @oldoc63 in #571
• flex-shrink property can be used to specify which elements will shrin… by @oldoc63 in #573
• Assign .top.side a flex-shrink value of 2 #572 by @oldoc63 in #574
• Assign .middle.side a flex-shrink value of 0 #572 by @oldoc63 in #575
• Assign the .bottom.center div a flex-shrink value of 2 #572 by @oldoc63 in #576
• Django Introduction #578 by @oldoc63 in #579
• flex-basis allows us to specify the width of an item before it stretc… by @oldoc63 in #580
• The sides absorb the grow #577 by @oldoc63 in #581
• Add a flex-grow property with a value of 3 #577 by @oldoc63 in #582
• Add a flex-basis property with a value of 300px #577 by @oldoc63 in #583
• add a flex-shrink property with a value of 3 #577 by @oldoc63 in #584
• Effect of shrink and basis on the center #577 by @oldoc63 in #585
• The flex property allows you to declare flex-grow, flex-shrink, and f… by @oldoc63 in #587
• Refactor top .side using shorthand flex property #586 by @oldoc63 in #588
• Refactor with flex shorthand top and bottom #586 by @oldoc63 in #589
• We might want flex items to move to the next line when necessary #590 by @oldoc63 in #591
• Using flex-wrap #590 by @oldoc63 in #592
• align-content spaces the rows from top to bottom #593 by @oldoc63 in #594
• add an align-content property with a value of flex-start #593 by @oldoc63 in #595
• add an align-content property with a value of flex-end #593 by @oldoc63 in #596
• add an align-content property with a value of center #593 by @oldoc63 in #597
• add an align-content property with a value of space-between #593 by @oldoc63 in #598
• add an align-content property with a value of space-around #593 by @oldoc63 in #599
• Inside the .left, .center, .right ruleset, change the height property… by @oldoc63 in #600
• The main axis and cross axis are interchangeable. We can switch them … by @oldoc63 in #602
• The flex-direction property is declared on flex containers #601 by @oldoc63 in #603
• the shorthand flex-flow property is used to declare both the flex-wra… by @oldoc63 in #605
• the first value in the flex-flow declaration is a flex-direction valu… by @oldoc63 in #606
• It is also possible to position flex containers inside of one another… by @oldoc63 in #608
• Inside the .main ruleset, add a display property with a value of flex… by @oldoc63 in #609
• Inside the .main ruleset, add an align-items property with a value of… by @oldoc63 in #610
• Inside the .container ruleset, add a display property with a value of… by @oldoc63 in #611
• Inside the .container ruleset, add a flex-direction property with a v… by @oldoc63 in #612
• Inside the .container ruleset, add a justify-content property with a … by @oldoc63 in #613
• Inside the .container ruleset, add an align-items property with a val… by @oldoc63 in #614
• For child repeat flex, justify and align #607 by @oldoc63 in #615
• Flexbox is an art and a science #616 by @oldoc63 in #617
• In .cards ruleset, add a display property with a value of flex #616 by @oldoc63 in #618
• Now, inside the .cards ruleset, set the flex-wrap property to have a … by @oldoc63 in #619
• Inside the .cards ruleset, set the justify-content property to have a… by @oldoc63 in #620
• In the .col ruleset, set the display property to have a value of inli… by @oldoc63 in #621
• In the .col ruleset, set the flex-direction property to have a value … by @oldoc63 in #622
• In the .col ruleset, set the justify-content property to have a value… by @oldoc63 in #623

Full Changelog: Breadcrumbs_v1.0...Flexbox_v1.0

Blueberries_v1.0

What's Changed

• Add a UI element that hints to some questions #534 by @oldoc63 in #535
• Add breadcrumbs using an unordered list #536 by @oldoc63 in #537
• Assign the class 'breadcrumb' to the unordered list #538 by @oldoc63 in #539
• Set the display property for the .breadcrumb > li selector to inline … by @oldoc63 in #541
• Separate the breadcrumbs with '/' #542 by @oldoc63 in #543
• Add classes to the breadcrumb list #544 by @oldoc63 in #545
• .breadcrumb li+li::before to require that both list items also have t… by @oldoc63 in #546
• Try changing the color or setting ::after content to make a 'close' n… by @oldoc63 in #547

Full Changelog: breadCrumbs_v1.0...Breadcrumbs_v1.0

breadCrumbs_v1.0

What's Changed

• Simple example of breadcrumbs #508 by @oldoc63 in #509
• Breadcrumbs are tipically displayed next to each other on the same li… by @oldoc63 in #510
• The + is called the adjacent sibling combinator #508 by @oldoc63 in #511
• Breadcrumbs are often not underlined #508 by @oldoc63 in #512
• Breadcrumbs should change when you hover over them #508 by @oldoc63 in #513
• href=# link will cause the page to scroll to the top of the current p… by @oldoc63 in #515
• Each page needs an appropriate breadcrumb list #514 by @oldoc63 in #516
• Hotels in Singapore #517 by @oldoc63 in #518
• Create an HTML unordered list within index.html #517 by @oldoc63 in #519
• Configure the display of the breadcrumbs #517 by @oldoc63 in #520
• Create the body of the arrows #521 by @oldoc63 in #522
• Create the before and after pseudo-elements #521 by @oldoc63 in #523
• Move pseudo elements to the proper location #521 by @oldoc63 in #524
• Arrow Style Breadcrumbs #521 by @oldoc63 in #525
• Three major types of breadcrumbs: Location, Attribute and Path #526 by @oldoc63 in #527
• Add 'location' or 'attribute' class accordingly #526 by @oldoc63 in #528
• Put the '>' between location based breadcrumbs #526 by @oldoc63 in #529
• Color the 'atribute' anchor tags differently #526 by @oldoc63 in #530
• Add a close indication #526 by @oldoc63 in #531
• Use breadcrumbs as a secondary navigation method #532 by @oldoc63 in #533

Full Changelog: theSummit_v1.0...breadCrumbs_v1.0

theSummit_v1.0

What's Changed

• Web Design Overview #471 by @oldoc63 in #472
• Your style guide/design system will include at least a section on col… by @oldoc63 in #475
• Your style guide/design system will include at least a section on fon… by @oldoc63 in #477
• Your style guide/design system will include at least a section on tex… by @oldoc63 in #479
• Set the color property to blue in order to distinguish links #480 by @oldoc63 in #481
• The most important aspect of styling links is differentiating links f… by @oldoc63 in #483
• It is sometimes helpful to provide additional context to explain link… by @oldoc63 in #485
• Changes when hovering over a link #486 by @oldoc63 in #487
• Links have four main states #488 by @oldoc63 in #489
• Set a 1-pixel, solid border #490 by @oldoc63 in #491
• Small border-radius of 10px #490 by @oldoc63 in #492
• The box-shadow should have an offset-x of 0px and an offset-y of 4px … by @oldoc63 in #493
• Active state on answer class looks like pushing a botton #490 by @oldoc63 in #494
• Elements appear flat on the screen #495 by @oldoc63 in #496
• :hover rule comes before the :active rule #497 by @oldoc63 in #498
• Clearly demonstrate to users how to interact with the site #499 by @oldoc63 in #500
• Basic a link color highlighting and underline #499 by @oldoc63 in #501
• a:hover makes tex-decoration: none #499 by @oldoc63 in #502
• Style the main get on the mountain button #503 by @oldoc63 in #504
• Create :hover and :active styles for the .btn class #503 by @oldoc63 in #505
• Show clickability for the large activity buttons at the bottom of the… by @oldoc63 in #507

Full Changelog: broadway_v1.0...theSummit_v1.0

broadway_v1.0

What's Changed

• Use properties such as display and position #451 by @oldoc63 in #452
• Header stuck to the top of the window when doc is scrolled #453 by @oldoc63 in #462
• Now the header stretches across its entire parent element #454 by @oldoc63 in #463
• inline-block will allow the li elements to flow horizontally on the s… by @oldoc63 in #464
• width of nav li set to 80px #456 by @oldoc63 in #465
• Set the position of so that we can position it relatively #457 by @oldoc63 in #466
• A z-index greater than 0 should allow the header to appear in front o… by @oldoc63 in #467
• Offset by 80 pixels from the top #459 by @oldoc63 in #468
• display: inline-block will allow the .supporting .col elements to flo… by @oldoc63 in #469
• Set the width and height of .supporting .col elements #461 by @oldoc63 in #470

Full Changelog: DisplayAndPositioning_v1.0...broadway_v1.0

DisplayAndPositioning_v1.0

What's Changed

• Flow of HTML #429 by @oldoc63 in #430
• Position: static is the default #431 by @oldoc63 in #432
• the position declaration with one or more offset properties #433 by @oldoc63 in #434
• All other elements on the page will ignore the element and act like i… by @oldoc63 in #436
• The element won't scroll with the rest of the document #437 by @oldoc63 in #438
• Sticks to a specified position as the page is scrolled further #439 by @oldoc63 in #440
• The z-index property controls how far back or how far forward an elem… by @oldoc63 in #442
• Inline elements have a box that wraps tightly around their content #443 by @oldoc63 in #444
• Block Elements: Their width property can also be set #445 by @oldoc63 in #446
• Inline-block display combines features of both inline and block eleme… by @oldoc63 in #448
• Float property can move elements as far left or as far right as possi… by @oldoc63 in #450

Full Changelog: daviesBurger_v1.0...DisplayAndPositioning_v1.0