Archive of: 100daysofcode

• Neat responsive flexbox layout

  May 2, 2021

  If you haven’t heard of Heydon Pickering, I certainly recommending checking out his website heydownworks.com, and learning all about the things he makes regarding web design and development. I watched a video of Heydon’s CSS Day 2019 talk about the Flexbox Holy Albatross and tried it out in this post. I’m still trying to full wrap my head around it (I feel like I could make a flexbox joke there), but it’s definitely going to be handy in the future.

  100daysofcode, CSS, HTML, flexbox

• CSS Grid Fidget Toy

  May 1, 2021

  I started today’s post off trying to find a way to rotate a grid of divs and try to find a way to make some of those divs stand upright within the rotated grid. That was a bit too difficult, and may not possible in the way I was hoping. So I ended up making this. I’m not sure what it is, but I tried using some JavaScript from my lightbox in another way.

  100daysofcode, HTML, CSS, JavaScript

• Possible responsive table solution

  April 30, 2021

  The first thing that came to mind yesterday when thinking about how to approach making a table responsive was to provide two versions of the table within the HTML of the page, and then simply show the appropriate version at certain breakpoints. I’m not sure how this might affect the accessibility of the tables if both are included, but I believe this may be a possible solution.

  100daysofcode, CSS, HTML, tables

• Table Practice

  April 29, 2021

  It has been quite some time since I worked with tables in HTML, so I thought I’d get some practice in today. I’ve never made use of the caption element and I did not know about the caption-side property in CSS either. It’s always nice to learn new things about older elements and how I can style them via CSS. Note to self: I need to learn more about making responsive tables.

  100daysofcode, HTML, CSS, tables

• Additional tweaks to my lightbox

  April 28, 2021

  I wanted to improve the transition for the lightbox and try out using backdrop-filter with it to see how it might look. I think I have a solid starting point to use this within my website for photo gallery pages, but I’ll have to see how things look and feel once I give it a try.

  100daysofcode, CSS, HTML, JavaScript

• Tiny tweaks to my Lightbox script

  April 27, 2021

  After yesterday’s small success, I wanted to try and improve the display of the lightbox for smaller screens or mobile devices. The image was not staying within the viewport yesterday, and the page was still scrollable. I wanted to disable scrolling while the lightbox is visible.

  100daysofcode, HTML, CSS, JavaScript

• 100 Days of Code - Week 11

  April 27, 2021

  Last week’s code posts were a lot of fun.

  100daysofcode, CSS, HTML, JavaScript

• Vanilla JS Lightbox Challenge

  April 26, 2021

  Are lightboxes tricky to build? My experience leads me to think yes. I’ve managed to put something together that works as long as I know the number of imgs and URLs to reference. I need to learn how to attach a click event to each a element that can trigger the lightbox. Just typing this out gives me an idea… HUZZAH! I figured it out. It’s not perfect, but I’m so dang happy that came to me.

  100daysofcode, CSS, JS, JavaScript

• Card display with horizontal scrolling

  April 25, 2021

  I really like the Popular This Month section on the CSS-Tricks homepage, and I have wanted to try and build something similar to what they’ve done. It was fun to work on, but there are quite a few things I need to improve before adding something like it to a site. I enjoy trying to rebuild bits of other websites I see. It’s a fun challenge and I learn a lot in the process.

  100daysofcode, CSS, HTML

• Learning about a few modern CSS Pseudo Class Selectors

  April 24, 2021

  I read a useful article on Smashing Magazine today that taught me about a few CSS pseudo-class selectors that I wasn’t aware of. I’ve spent a good amount of time today on a challenge involving Object Oriented JavaScript that has left my brain a little tired, so I thought I’d try out some of these selectors for practice. The link to the article can be found within the post’s HTML.

  100daysofcode, CSS, HTML, pseudo-selectors