Nov 19, 2022 - Day 20 Today I completed the layout tweaks for the footer and completed the project. Thanks to Kevin Powell for an awesome tutorial!!
Nov 18, 2022 - Day 19 Today I re-organized the code for the site footer and simplified the css.
Nov 17, 2022 - Day 18 I worked on the positioning of the mid scroll pill shaped graphic today. More complicated than expected.
Nov 16, 2022 - Day 17 Completed the styling and interactivity for the slider with a few issues I will revisit closer to the end of the project (ie. no interactive elements to scroll testimonials on the larger screen). I went on to inserting the pil shaped graphic in the header and positioning it correctly for responsive layouts.
Nov 15, 2022 - Day 16 Working on the styles for the slider again today. After arranging my scripts in the html I managed to get the sliders behavior to work consistently. I went on to adjusting the styles for the slides at different screen sizes. I added some javascript from the A11y docs to help with th resonsive behaviors and I also styled the bullets for the mobile slider customizing A11y sliders stock styles to match the projects design.
Nov 14, 2022 - Day 15 Working on the styles for the slider today. I wrapped the list items for each slide in a div called slide-content to simplify some positioning issues. The main thing I was struggling with today was trying to get A11Y slider to work consistently using the browser links. One second it would work and the nexy second it wouldn't. As of now I still don't have a next and previous button and my layout is scrolling on the right side. Frustrating!! Will continue to try to figure this out tomorrow.
Nov 12, 2022 - Day 14 Started Working on the slider today and wrapped up the styling for the 3 points in the "What's Different About Manage" section. We are using the A11Y slider and on Kevins tutorial it's showing default previous and next buttons. I have no idea why they are not showing up on my slider. We also started working on the layout for each individual slide.
Nov 11, 2022 - Day 13 Worked on sorting out the background color for the numbered list of points in the "What's Different About Manage" section. Much more complicated than I expected.I worked with sorting out the layout using grid quite a bit.
Nov 7, 2022 - Day 11 Worked on the spacing for the footer content and adding the stylized numbered list to the "What's different about Manage" section. I learned how to use CCS content and add a string combined with a counter to create a custom styles list bullet. I also learned how to apply CSS grid to arrange the dayout of each bulleted item.
Nov 5, 2022 - Day 10 Worked on arranging the content in the footer aaccording to the design. Learned how to use grid-template-area to manipulate the positioning of HTML elements with CSS. I also used flex-direction to arrange the different positions of content within a specific grid-template area for the mobile and desktop designs.
Nov 4, 2022 - Day 9 Continued working on the footer styles today. I learned that if I remove a fill attribute from an svg file and then I can target the element I want to change the fill for in my css which gives me control over hover states, etc.. I also created different styles in the footer for mobile and desktop changing the size of the social icons.
Nov 3, 2022 - Day 8 Worked on the footer styles and the heading in the call to action. There are 2 different sizes for the desktop and mobile versions of the CTA heading so I had to figure out how to get the sizes to display correctly. Still need to figure this out. I also learned about how to use when() in css to write the styles for focus and hover states without having to re-write the same declarations twice. Very cool!! I needed to define a new color in my css variables to get the right color for the footer background and split the footer nav in to two columns. Finally, I learned how to use svgsprit.es to convert my social icons into sprites and insert them into the website with HTML.
Nov 2, 2022 - Day 7 Worked on the call to action section of the design and the vertical spacing between paragraphs.
Nov 1, 2022 - Day 6 Worked on styling the spacing for the main nav and was exposed to CSS clamp which I need to explore more. It was very cool how it allowed the spacing to adjust without allowing the nav elements to crash into the surrounding divs. I also worked on the vertical spacing of the first 2 sections. Here I learned about > * + * which also need to do some further study in.
Oct 31, 2022 - Day 5 Worked on creating a gradient that blocks out everything behind the mobile nav when the mobile menu is openned.
Oct 29, 2022 - Day 4 Worked on the navigation layout and some javascript for hiding and revealing mobile navigation. It's very cool to learn how to set attributes based on whether aria-expanded is set to true or false.
Oct 28, 2022 - Day 3 Worked on the visual spacing for the sections and the styling for the buttons. I also got started on the styling for the hamburger menu. Learned about using a data-type to target elements in css that are similar but are presented differently.
Oct 27, 2022 - Day 2 Finished off the HTML and started working on the CSS. Learned about margin-inline and using a function in css
Oct 26, 2022 - Day 1 Website called Manage offered on Frontend Mentor. Following along with Kevin Powell
Starting 100 Days Of Code challenge / code at least 1 hour a day