Updated README

Author: vimode

3-column-preview-card-component/README.md

@@ -26,11 +26,9 @@ Your users should be able to:
 -  CSS Flexbox
 
 ## Experience & Challenges
-This challenge has a simple layout to follow. And required very little CSS too for the layout, most of the CSS code is towards the design of typography and design of the cards itself. 
+This challenge had a simple layout to follow. It required very little CSS too for the layout, most of the CSS code is towards the design of typography and design of the cards itself. 
 
-So I decide to have a little fun with it, I stuck to the design specs provided by the challenge on mobile and desktop. 
-
-But between 600px and 900px I used grid to make a little a different design choice for provided cards by adding some hover effects. I experimented with `tabindex` for each card (terrible idea, [MDN & accessbility doesn't approve](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#accessibility_concerns)), I also added hover state for each card div (another accessiblity concern) and with the help of z-index made each card/div expand their grid values on hover. This is just to experiment some CSS properties and try different possbilities of overlapping grid items. Most of the experiment parameters I set were a success, only thing I wasn't happy about was the transition animation effects I wanted to add to the card's hover, the effects weren't very pleasant because the padding would make the text dance around differently in each card on hover.
+So I decided to have a little fun with it, I stuck to the design specs provided by the challenge on mobile and desktop. But between 600px and 900px I used grid to make a different design choice for provided cards by adding some hover effects. I experimented with `tabindex` for each card (terrible idea, [MDN & accessibility doesn't approve](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#accessibility_concerns)), I also added hover state for each card div (another accessibility concern) and with the help of z-index made each card/div expand their grid values on hover. This is just to experiment some CSS properties and try different possibilities of overlapping grid items. Most of the experiment parameters I set were a success, only thing I wasn't happy about was the transition animation effects I wanted to add to the card's hover, the effects weren't very pleasant because the padding would make the text dance around differently in each card on hover.
 
 ## Continued Development & Learning
 

README.md

@@ -84,6 +84,5 @@ Discord vimo#6620
 
 ###### Pending tasks for the repo
 
-- Build a custom showcase page to display all the completed challenges.
-- Fill `README.md` for this as well as each challenge with challenge information, my experience, new technologies learned, new experiments in the challenge, time to complete each (approx. hours for each challenge)
-- Fill the index
+- Filter projects to show in the showcase page  
+

article-preview-component/README.md

@@ -31,7 +31,7 @@ Your users should be able to:
 
 ## What I learned
 
-It is easier to use relative and absolute position for elements with fixed height and width. At first I built  the article component with responsive sizing but had to switch to fixed sizing for it to make the share menu to be positioned properly.
+It is easier to use relative and absolute position for elements with fixed height and width. At first I built the article component with responsive sizing but had to switch to fixed sizing for the share menu to be positioned properly.
 
 Learned about some new elements related to the element `article`. [MDN link](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article)
 

base-apparel-coming-soon/README.md

@@ -31,11 +31,12 @@ Your users should be able to:
  - JavaScript
 
 ## Experience & Challenges
-The layout was a little difficult to understand as in the desktop view the image  takes the right side of the page but in the mobile view the hero mobile image is different and is between the logo and the main content. This would have been easy with grid but the logo area and the main content area share a common background image and background color gradient which meant the hero image would have to be on top of the these grids but grid elements don't collapse on each other. So that had think over about the layout. 
+
+The layout was a little difficult to understand as in the desktop view the image  takes the right side of the page but in the mobile view the hero mobile image is different and is between the logo and the main content. This would have been easy with grid but the logo area and the main content area share a common background image and background color gradient which meant the hero image would have to be on top of the these grids but grid elements don't collapse on each other. So that made me re-think the layout structure. 
 
 At the end I used flexbox, two separate hero images each only visible in the expected screen sizes. 
 
-For form validation I use a combination of HTML5 validation and JS taking advantage of the browser's Constraint Validation API which consists of set methods and properties available on form elements DOM interfaces. 
+For form validation I used a combination of HTML5 validation and JS taking advantage of the browser's Constraint Validation API which consists of set methods and properties available on form elements DOM interfaces. 
 
 ## Continued development & Learning
 

blogr-landing-page/README.md

@@ -27,10 +27,9 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-_This will be updated periodically while the pending tasks are being worked on._
+The various elements of the page were a bit challenging and I struggled throughout the challenge to get them match the design specs especially the images.
 
-The various elements of the page were a bit challegning and I struggled throughout the challenge to get them match the design specs especially the iamges.
-The nest navigation items needed proper planning which I clearly did not think through properly so had to redo most of the navbar markup while doing the CSS and then some more when I did the javascript for it.
+The nested navigation items needed proper planning which I clearly did not think through properly so had to redo most of the navbar markup while doing the CSS and then some more when I did the javascript for it.
 
 ---
 
@@ -45,6 +44,6 @@ The nest navigation items needed proper planning which I clearly did not think t
 - mobile view : some more gap between top nav/branding and hero content.
 - add :active properties same as :hover and :focus
 - Typography is terrible.
-- Add some animations or transtions to the nav bar items.
+- Add some animations or transitions to the nav bar items.
 - Live solution screenshot(s)
 - On submit update README with : Solution submitted at Frontend Mentor - [Submission Link]()

bookmark-landing-page/README.md

@@ -35,8 +35,9 @@ For this challenge you'll need to:
 
 ## Experience, Challenges and Learning
 
-_This will be updated periodically while the pending tasks are being worked on._
-The idea of having a utlitiy class is to use it for layout or for repeated CSS propeties, it really does save a lot of time. I have started using them and used a few in this one was for creating flex item and it saved a lot of repeated typing but when using for layout like adding max-width to every element's inner items to keep them centered on widescreen, I failed using it properly here as the background image patterns required in this would not break out of the restricions I set with my inner_layout, so I need to figure out how to use ultility classes efficiently and not adandon them halfway through the project.  
+The idea of having a utility class is to use it for layout or for repeated CSS properties, it really does save a lot of time. 
+
+I have started using them and used a few in this one for creating flex items and it saved a lot of lines of code. But when using for layout like adding max-width to every element's inner items to keep them centered on widescreen, I failed using it properly here as the background image patterns required in this would not break out of the restrictions I set with my inner_layout, so I need to figure out how to use utility classes efficiently and not abandon them halfway through the project.  
 The form elements are a little messed up and I am yet to figure out why.
 
 ---

clipboard-landing-page/README.md

@@ -26,12 +26,12 @@ Your users should be able to:
 ## Experience, Challenges and Learning
 
 Challenge was long but done much easier with grid. 
-I forced myself to use a lot of general styling so not to repeat myself further along. I think it helped a lot as at the end as my CSS ended being very short for such a long landing/home page like this. 
+I forced myself to use a lot of general styling so not to repeat myself further along. I think it helped a lot as at the end as my CSS ended up  being very short for such a long landing/home page. 
 I also added some transitions and some extra hover effects on the buttons. 
 
-I learned a really nice way to position images in anyway you want using `object-position` [MDN Link](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
+I learned a really nice way to position images in any way you want using `object-position` [MDN Link](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
 
-In this challenge, the image in the desktop view had to be cut off, I used the following CSS properties to move it off the viewport as per the design specs. 
+In this challenge, the image in the desktop view had to be cut off at the edge of the window, I used the following CSS properties to move it off the viewport as per the design specs. 
 ```
 .itemOne .itemOne_content_list:nth-child(2) img {
     object-fit:cover;

clock-app/README.md

@@ -50,9 +50,7 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-_This will be updated periodically while the pending tasks are being worked on._
-
-This was a fun challenge, it felt more like doing an App page than anything else. The CSS is a little mess as I tried a different way to do typography but the end result lead to a lot of excess CSS.
+This was a fun challenge, it felt more like doing an App page than anything else. The CSS is a little messy as I tried a different way to do typography but the end result lead to a lot of excess CSS.
 The API calls were fun to do. Connecting APIs to each other was a fun task especially when one was dependent on another.
 
 ##### Pending tasks

coding-bootcamp-testimonials-slider/README.md

@@ -31,7 +31,7 @@ Your users should be able to:
 
 ### What I learned
 
-When creating a slider do not create buttons for each slide, there is a reason everyone keeps the slider buttons common across slides. Even though I made individual buttons on each slide work for the slider its a little messy way to do it. Not the most efficient way to do it. 
+When creating a slider do not create buttons for each slide, there is a reason everyone keeps the slider buttons common across slides. Even though I made individual buttons on each slide work for the slider its a little messy way to do it. And it isn't the most efficient way to do it either. 
 
 `place-content` is a shorthand for `align-content` and `justify-content` - [MDN Link](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content)
 

creative-single-page-site/README.md

@@ -28,20 +28,17 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-_This will be updated periodically while the pending tasks are being worked on._
-
-In the world of flex and grid to streamline the position of elements on the page, overlapping patterns and elements are truly challening. I started with the intention of using grid for the complete layout but really struggled with it so ended up not using 100% grid for the elements. The overlap was tricky to work with to make it responsive. But I think it does not look that bad.
+In the world of flex and grid to streamline the position of elements on the page, overlapping patterns and elements are truly challenging. I started with the intention of using grid for the complete layout but really struggled with it so ended up not using 100% grid for the elements. The overlap was tricky to work with to make it responsive. But I think it does not look that bad.
 
 The floating wave patterns definitely need more work as their positioning is not very responsive friendly.
 
 For most of my challenges, the typography ends up being the most neglected part so I worked on it from the beginning and played around updating the root variables for typography in the media queries. I think it turned out alright. Might need some more tinkering.
 
 For numbering the ordered item list I used `counter-increment` which was fun to use and makes the list items reusable in some ways. Read on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment) or Josh Comeau's [article](https://www.joshwcomeau.com/css/styling-ordered-lists-with-css-counters/) about that, he explains it in a fun way.
 
-The js slider works well but the images have to completely switch for the mobile, tablet and desktop view. I couldn't figure out how to do that in a more streamline way so I ended up switching applying them all on click but only showing the relevant ones with the help of CSS. It worked out well but not sure it is the most elegant way to do that.
-
-The mobile nav is badly positioned, with absolute values all around. Not the best way to it. The elegant way would hav been to position the overlay first and then move the navitems inside it to position them accordingly. So that needs to be updated.
+The js slider works well but the images have to completely switch for the mobile, tablet and desktop view. I couldn't figure out how to do that in a more streamline way so I ended up switching and applying them all on click but only showing the relevant ones with the help of CSS. It worked out well but not sure it is the most elegant way to do that.
 
+The mobile nav is positioned well but with absolute values all around. The elegant way would hav been to position the overlay first and then move the navitems inside it to position them accordingly. 
 ---
 
 ##### Pending tasks

crowdfunding-product-page/README.md

@@ -31,9 +31,7 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-_This will be updated periodically while the pending tasks are being worked on._
-
-The CSS was fairly straightfoward and enjoyble. The modal required a little work than usual but otherwise the really enjoyable layout.
+The CSS was fairly straightforward and enjoyable. The modal required a little work than usual but otherwise the layout was really fun.
 The real struggle and timesuck for this challenge was the javascript for the buttons, input elements, the change in state of the numbers displayed on the homepage+progress bar.
 
 I learnt a few lessons along the way.

easybank-landing-page/README.md

@@ -23,9 +23,8 @@ Users should be able to:
 
 ## Experience, Challenges and learning
 
-_outline_
 
-Learning : Effectively create and use utlity classes for layout. (inner*container, grid*, flex\_ )
+Learning : Effectively create and use utility classes for layout. (inner*container, grid*, flex\_ )
 
 Learning : Slowly building my own CSS reset.
 

faq-accordion-card/README.md

@@ -35,7 +35,7 @@ Your users should be able to:
 
 ## Challenges
 
-Image manipulation with responsiveness was challenging and still is for me. This challenge required positioning some elements with negative properties which took me more time than it should. 
+Image manipulation with responsiveness is still very challenging to me. This challenge required positioning some elements with negative properties which took me more time than it should. 
 I struggled with positioning the background pattern image properly for all screen widths, for the two expected screen sizes it works fine but somewhere in between it does not retain the expected position.
 
 ---

fylo-dark-theme-landing-page/README.md

@@ -27,11 +27,11 @@ Your users should be able to:
 - CSS Animations
 - JavaScript
 
-## Experience, Challenegs and Learning
+## Experience, Challenges and Learning
 
-The layout was big  and had several components but most of it was easy to structure properly. 
+The layout was big  and had several components but most of it was easy to structure. 
 There are few things I could not figure out how to do, I was unable to 
-  - Unable to position the background image as per the specs. 
+  - position the background image as per the specs. 
   - `.feature_link` has a svg icon with it. On hover, the link + the icon switch to color white, I am unable to change the svg's fill color to white with the link, it does only when hovered on the icon but not on the link. 
   - `.img_quote' for bigger screen hides behind the `.template_item`, no matter how I do the z-index, I am unable to move it behind the item box. 
 

fylo-landing-page-with-two-column-layout/README.md

@@ -31,7 +31,7 @@ Your users should be able to:
 Layout was simple but tedious compared to newbie challenges. Footer had weird quirks mostly because of my markup decisions.
 The javascript for two email validations need to be worked on yet which seems a little different from previous challenges.
 
-There also seems to be a horizontal scroll on Chrome and not on Firefox, haven't found the problem yet. 
+There also seems to be a horizontal scroll on Chrome and not on Firefox, haven't figured out the problem yet. 
 
 ----