Ivana Velíšková

HTML/CSS snippets

As I continue to learn and improve in my development, I like to show where I started with my development and what I have learned in my time. There's always so much to learn and improve upon, but everyone starts somewhere. Here are a few of my early HTML/CSS projects and code snippets. I've grown so much since then and like to look back and understand why my code wasn't great or maintainable at the time. It helps remind me that I've come so far since I've started.

I always like to start with my own personal site. The very first site that I ever built after I learned HTML/CSS. I look back and say, "what was I thinking?" But really, it's important for me to say I've grown so much since then. I, now, understand how to use flex-box. I can use a static site generator without getting confused by documention. I understand BEM methodologies and responsive web design and progressive enhancement. These are all important techniques I have learned in a short amount of time.

See the Pen My website by Ivana Veliskova (@ivanaveliskova) on CodePen.

As part of developing my initial site, I had practiced several of the code snippets beforehand so I knew what I wanted and how I wanted it to look and function. It also helped me understand different transition effects as well as getting a fundamental understanding of absolute and relative positioning.

See the Pen Description by Ivana Veliskova (@ivanaveliskova) on CodePen.

See the Pen Hover Icon by Ivana Veliskova (@ivanaveliskova) on CodePen.

Finally, when I was building out my first portfolio, I didn't have much development experience, so I needed to show that I have some skills that could be relatable to web development and design. I used to make my own ballroom costumes, back when I used to be a dancer, and I love to bake and just have fun with making something really cool, so I decided to showcase those things that show my design abilities and that I see things through to the end. Now I have bit more to show coding wise so I don't include them in my portfolio as much, but I still Instagram and occasionally write about something I made on my blog.

See the Pen Portfolio page items by Ivana Veliskova (@ivanaveliskova) on CodePen.

At one point or another I had learned about one-div.com It's a really cool site where the creator has created all these icons and logos using a single div. I thought this was really cool. I later learned about icon fonts and then I learned why those are bad and learned about svgs. But it was a good starting place to learn about icons and how to manipulate pseudo-elements.

See the Pen myLYOy by Ivana Veliskova (@ivanaveliskova) on CodePen.

At one point, we got an intern at work and so I began to be sort of her mentor. I got to go in and look at things I have learned and try to understand why they work a certain way and then go and explain it to her. I love that feeling, that 'aha!' moment where I'm in the middle of explaining something and it occurs to me exactly why something work the way it does. I used to get these moments when teaching dance and it was a great feeling and I'm glad I can continue to have those moments when I teach someone html/css.

See the Pen EKoeWy by Ivana Veliskova (@ivanaveliskova) on CodePen.

I forget exactly why I built this html/css snippet. I think I was trying to explain how different displays work but also explain positioning and floats. I believe this was built for a GDI class I was preparing, although it might be a little overwhelming now that I look back upon it.

See the Pen Playing around with CSS position/alignment/floats/etc. by Ivana Veliskova (@ivanaveliskova) on CodePen.