Tag: css

Posted on

WDI Day Eleven: Project Week 1, Part 2

This morning consisted of several hours of pure frustration, as I couldn’t figure out one particular issue. In the future, I really need to learn how to let some issues go and revisit them later, since today I ended up realizing the problem I wanted to solve, wasn’t a problem at all. In fact what I initially set out to do, didn’t make much sense!

I wanted to work on event listeners for keypresses, so users could move to the front and back of cards with the enter and right-hand arrow key. Then I realized that the enter key was sufficient enough for when users are adding input, but that the right arrow key wasn’t intuitive enough. Instead, I made the entire cards clickable, so users could navigate that way.

I also learned how important it is to really plan out the logic behind your applications before you start coding. If I had thought through more of the main functionalities I wanted, I may not have run into as many issues as I did, where I had to readjust my code along the way. However, I suppose you can’t always plan out everything. Sometimes your coding will unfold organically.

Posted on

WDI Day Ten: Project Week 1, Part 1

Today was the first day of our project week. This week, we’re all expected to get to GA bright and early and work away all day long on our first major project. Our task is to complete a familiar game with HTML and JS. We had the following games to choose from:

  • Tower of Hanoi
  • Trivia
  • Flash Cards
  • Simon
  • Hangman

I decided to go with flash cards, simply because creating a game on its own will be a challenge enough. I’m still struggling to figure out the logic when I start projects, and I’m hoping that will change over time.

Over the weekend I managed to complete most of the project’s functionality, so for the most part I worked on compiling the content for the cards, finding images for the front and back of the cards, and working out some of the styling issues. I kept running into issues with event listeners, since my game involves users guessing the answer to a card in an input, then clicking to view the back of the card, then clicking once more to see the next card. The game includes scoring, a timer, and the option to play again when the game is over.

Posted on

WDI Day Four: Portfolio Website Lab

Today was our first lab day. We started off with a lesson in Git, and then off we went to work on building a site for our portfolio. I’ll admit, I’m at a bit of an advantage when it comes to working with layout. Since I’ve had extensive experience in web design, I happily tackle styling whenever it comes up. I managed to style the basics for my overall portfolio site during the day, and started thinking about how I’d like to rollout JavaScript as a later functionality.

Things to add later:

  • Tabbed browsing for portfolio sections (web, application, and illustration)
  • Sorting filters
  • Transitions for the anchor links
  • Additional scrolling animations
  • Making the site mobile-friendly

Overall, I felt like I accomplished a fair amount, however I’m more excited about starting JavaScript tomorrow since today was yet another review day for me.

Posted on

WDI Day Three: CSS and the Tech World

Today was yet another review day for me, yet I still had several fun takeaways, not to mention that they had a panel that spoke to us about the tech industry in the DC area. It was great hearing about useful Ruby Meetups like the ones in Silver Spring and Arlington. Also, I liked hearing about how it’s useful to take your previous, unrelated work experience and find a way to spin those skills into something that’s a great asset to your work as a web developer. The book, “The Passionate Programmer,” was also recommended which is something I’ve heard about before and now will definitely read.

With our CSS lesson, I learned a lot more about flexbox which is something I need to fiddle with more. Previously, I had heard of it but had never used it, simply because my work usually involved making sure older browsers could support my CSS styles. Flexbox is a fun way to create clean layouts and center elements. The lesson also reminded me that box sizing is a great thing to use since it makes it so I don’t have to worry about all the math and calculations involved with padding and margins.

Some helpful resources related to the CSS work included:

Posted on

WDI Day Two: Git & CSS

It’s amazing how it’s only been two days, and already we’ve covered quite a bit of ground. Although I was already familiar with Git, and have used CSS extensively as a web designer, today was still a day where I learned a few new tricks.

First off, there’s the text editor that I use quite a bit, Atom. I’ve never really looked into the keyboard shortcuts involved with it, and realized how there are so many ways that I can improve my workflow:

  • ⌘ + , Open preferences
  • ⌃ + g Go to line
  • ⌘ + p Go to file
  • ⌘ + r Go to symbol
  • ⌘ + ⇧ + p Toggle Command Palette
  • ⌘ + ⌥ + Left/Right Toggle Files/Tabs
  • ⌘ + w Close Current Window/File if Saved
  • ⌘ + s Save current file
  • ⌘ + ] Tab Right
  • ⌘ + [ Tab Left
  • ⌘ + z Undo Change
  • ⌘ + y Redo Change

With Git, I learned a little more about discarding changes made to the staging area – something that I’ve never really played around with much before.

With CSS, I learned a few new things about animations and selectors. First off, playing the FlukeOut game made me realize how many advanced selectors are out there that I haven’t had a chance to really implement in any of my previous work as a designer. And as far as animations go, I realize I have quite a bit of research to do to really feel comfortable with them.

And lastly, I discovered how fun and easy it is to build blogs with Jekyll.

All in all, it was a really busy and productive day. I can’t believe it’s only been two days – it feels like I’ve been coding away at WDI for weeks. It’s safe to say I’m pretty please with the curriculum thus far.