loading...

4 Things I Learned From Building My First Site Solo

clairemuller profile image Claire Muller ・4 min read

Last week me and my fellow cohort mates at Flatiron School Seattle finished our module 3 projects; the assignment was to build a single-page application using vanilla Javascript and a Ruby on Rails backend. The rest was pretty much up to us, and I decided to make Jeoparody! This was the first website I built all by myself, and I learned a lot from it. So for my blog post I thought it would be helpful to write about the top things I learned.

CSS is weird

Going into this project, I felt fairly confident in my CSS skills. I’d worked on the Codecademy CSS Course and tinkered around in the console, so I thought it was pretty straightforward. When you don’t know what you don’t know…

My biggest struggle was figuring out how to vertically center text inside a div. ‘Why is this so hard?’ I asked myself after spending at least an hour adjusting the padding, margin, height and width. I finally discovered that simply wrapping the text in a p tag will do the trick! Unless...the text is longer and wraps to become multi-line. Still haven’t figured this one out.

CSS

Seed smart

While we’re on the topic of things I thought I had down pat: seeding my database. I found this awesome API, jService, that has every clue and category from every season of Jeopardy. That’s roughly 185,000 clues! I was pumped! I set up my Clue and Category models, figured out the best way to iterate through each page of the API, and the seeding began.

Fifteen minutes in, seeding failed! I quickly learned that one shouldn’t assume an API with 100,000+ entries is perfect. Tons of clues were duplicated, there were empty strings, missing values, you name it. After a lot of trial and error, the solution was to create two if statements that check each clue before it’s added to the database. The first one makes sure that the clue actually has the keys I want: question, answer, and category. The second if statement ensures that the values aren’t just empty strings.

clues.each do |clue|
  if clue.key?("question") && clue.key?("answer") && clue.key?("category")
    if !clue["question"].empty? && !clue["answer"].empty? && !clue["category"]["title"].empty?
      create_clue(clue)
    end
  end
end

Event listeners are picky

I haven’t had a lot of experience using event listeners, but they’re obviously an important thing to master. The first one that I implemented on my website was pretty straightforward. When a user first comes to the page, they put in their username and click the submit button. The event listener hears the ‘click’ and does its thing:

document.getElementById('submit').addEventListener("click", function(e){
  e.preventDefault();
  username = document.getElementById('username').value.toLowerCase();
  findUser(username);
})

There was no need to ‘remove’ this event listener because the div that it’s inside is hidden once the user logs in. Easy! The next event listener I used was for each of the clue divs. I had figured out how to remove the dollar amount from the div once a user had clicked it, but the event listener remained. I tried a few things and eventually asked for some help. My instructor gave me the very simple solution of simply adding a class of ‘clicked’ to a clue div that had been clicked. This allowed me to write the following inside the event listener:

if (clueDiv.classList.contains('clicked')) {
  return;
}

So once again, the event listener still exists on each clue div, but if a user clicks on one that they’ve already clicked on, it will simply return. Easy! My final event listener is the one that gave me the most trouble. Once a user has clicked on a clue, a div appears that asks if they got the question right or wrong.

Yes or No

I added an event listener that listens for a keydown of ‘Y’ or ‘N’ and went on my merry way. I soon realized that a user could continue to press ‘Y’ long after they’d finished the clue, and their score could increase forever! Thus, I finally had to tackle removing an event listener. After much trial and error, I discovered that removeEventListener is picky. Until now, I had been writing the whole function inside of the event listener, instead of referencing a separate function. This doesn’t fly when you try to remove the listener! In short, this was the only solution:

document.body.addEventListener("keydown", yesOrNo);
document.body.removeEventListener("keydown", yesOrNo);

Comments are necessary

I’ve always been pretty good about writing comments in my code, but it wasn’t until I started this project that I realized just how necessary they are. After I had my backend all set up, I wrote that first fetch request and it began...I was in the zone.

When I’m in the zone, coding my little heart away, it’s easy to forget to write a quick comment to help out my future self. But it’s so important! Because even if I think I know exactly what all my code is doing, I’ll eventually be going to sleep. And the next day, when I’m reading my code, I have no idea what’s going on. So don’t forget to leave yourself some notes to save future you from future headaches.

Conclusion

To conclude, I learned a lot from building my first website. If you’re new to coding, I would highly recommend building a single-page application. It’s great practice and helped solidify my knowledge of HTML, CSS and Javascript. Happy coding!

Discussion

pic
Editor guide
Collapse
zkriszti profile image
Krisztina Závecz

As for vertical alignment, if you do not need to support old browsers, flexbox will be your savior. :) Also there is a really useful post on css-tricks.com about centering (either vertically or horizontally) which will show you handy alternatives in case you can't use flex. Google "css-tricks.com centering", it should be among the first few results.

Collapse
clairemuller profile image
Claire Muller Author

Thanks so much, I'll check that out!

Collapse
flrnd profile image
Florian Rand

Also, about css-tricks, this is gold: css-tricks.com/snippets/css/a-guid...

Thread Thread
clairemuller profile image
Claire Muller Author

This looks like a great resource, thanks!

Thread Thread
simonhaisz profile image
simonhaisz

I've used that guide so much at work that when I type 'fl' into my browser that's the first suggestion in the list.

Thread Thread
chiangs profile image
Stephen E. Chiang

Checkout flexbox zombies... A fun way to learn flexbox.

Thread Thread
zkriszti profile image
Krisztina Závecz

LOL, same here with the CSS-tricks flexbox guide 😁😁

Thread Thread
jamiekaren profile image
Jamie Ferrugiaro

You had me at zombies...

Collapse
zkriszti profile image
Krisztina Závecz

also, when you have the basics in place, you can check out flexbox froggy to have some fun & put your understanding to the test :)

Collapse
flrnd profile image
Florian Rand

I agree 100%. It's important push yourself out the comfort zone and build something. It doesn't need to be perfect, bad code can be refactored, and bad design redesigned. The important thing is when we build something by ourselves the first time (unless some kind of genius which it's clearly not my case), we face problems and made mistakes, and those problems and mistakes help a lot in the learning process.

This is not related, but you have an unbelievable trust in humans not cheating (where you correct (y/n)) 😈

Collapse
clairemuller profile image
Claire Muller Author

I was so excited when I started that I didn't think about how hard it would be to have the user type in the answer. Fuzzy matching is a little too complex for me at this point! That's why there's no high score, it's more for practice :)

Collapse
flrnd profile image
Florian Rand

Another way to practice is adding those to a roadmap of future features / things to fix. Anyway, keep the good work!

Collapse
yaser profile image
Yaser Al-Najjar

Hi Calire,

I'm pretty sure it's been a lot of fun (I still remember my first days in programming... wooh it was very exciting 😃)

I always love to hear people first experiences cuz I'm mentoring new comers in (our programming academy)coretabs.net, so yeah bring us more of those posts!


I've been doing backend for long (about 8 years so far) that I didn't care to up my CSS and styling game.

Recently, I had to finish some work in CSS... I thought CSS was very weird, but I realized that I had to go through the basics to get things right.

Key notes:

  1. Know whether the element is a block element or inline element (put two of them in the document and if they're on the same line, they're inline elements), like this:
<a href="#">my link</a>
<a href="#">other link</a>

<p>my paragraph</p>
<p>my other paragraph</p>
  1. Use bg color as an indicator (instead of imagining how the element looks like).
<style>
    a {
        background-color: #ccc;
    }

    p {
        background-color: red;
    }
</style>

<a href="#">my link</a>

<p>whatever</p>
  1. Know how to manage that element, by knowing the (text styling techniques)[w3schools.com/css/css_text.asp] and by knowing about the (box model)[w3schools.com/css/css_boxmodel.asp]

As for aligning vertically to the center, just ensure that it's a block element (if not use display: block;), and use height and line-height of the same size... and there you have it right in the middle 😉

<style>
    a {
        background-color: #ccc;
        height: 50px;
        line-height: 50px;
        display: inline-block;
    }

    p {
        background-color: red;
        height: 50px;
        line-height: 50px;
    }
</style>

<a href="#">my link</a>

<p>whatever</p>

Now feel free to remove that ugly background color!

Collapse
clairemuller profile image
Claire Muller Author

I was originally setting the line-height equal to height, but if the text is too long and wraps to the next line, it creates a huge space between the two lines. :(

Collapse
yaser profile image
Yaser Al-Najjar

Ah, line-height is for one line text... here the multi-line way:

It's like converting this paragraph into a table (using display), so that we can use vertical-align

<style>
    p {
        background-color: red;
        width: 150px;
        height: 150px;
        display: table-cell;
        vertical-align: middle;
    }
</style>

<p>whatever stuff right here to go to the next line</p>
Collapse
glowkeeper profile image
Steve Huckle

I've been a professional coder for twenty-five years, and in that time, I've barely written a single comment. Instead, name functions and variables descriptively, since that'll help comment your code for you (IMHO). Furthermore, keep functions super simple, so when you (or someone else) comes back to them, a year or two later, it ain't that hard to work out WTF they're doing. I reckon that is best supported by the declarative/functional style, espoused these days by es6 and react, as opposed to the imperative style to which your post leans...

Collapse
mloru profile image
Mirko Lorusso

+1 (even though I think that comments are important too)
I'm nearly a noob (PHP) dev and I'm reading Clean Code by R.C. Martin, and this is one of his tips too.
Some of the things he wrote might sound almost "weird", but it's a mother lode to me, especially as a not-so-experienced developer.
(Sorry for my English, I hope it's understandable).

Collapse
mbjelac profile image
Marko Bjelac

100% agree on the descriptive names.

Also, tests are a HUGE help. They serve as in-depth documentation for your code, which is continuously up to date.

There are a lot of testing frameworks for JS, currently I use Jest.

I strongly recommend trying out test-driven development (TDD) ... check out a clear & concise video of why it matters. As frontends are not only putting backend model props into templates anymore but have their own behaviour, I think its really important that they are treated the same as backend code (i.e. that they have tests, and preferably that they are test-driven).

Collapse
davidrojo profile image
David Rojo

Hi Claire, I know CSS gets weird sometimes, but it's a beautiful language and I think is a super mature technology that you have to learn.

About positioning elements, you should start learing flex and grid, as these options allows what you want to accomplish.

Here you have a pen with the effect you want: codepen.io/anon/pen/dLwEmv

To learn more about grid here you have the resource that opened my eyes about css grids: youtube.com/channel/UC7TizprGknbDa...

Collapse
jamiekaren profile image
Jamie Ferrugiaro

Very cool Claire! I really enjoyed your post and will definitely save this for when I create my own first official site.

Tried the game out as well, it worked great! I got nothing correct. >.<

Collapse
clairemuller profile image
Collapse
joshualjohnson profile image
Joshua Johnson

Nice work! You'll never forget your first web application. It is always so much fun to see your work start to actually come together!

Collapse
clairemuller profile image
Collapse
k_penguin_sato profile image
K-Sato

Nice!! I really enjoyed playing it!! Very ingenious!!

Collapse
clairemuller profile image
Collapse
thechrisbutler profile image
Chris Butler

I just spent about twenty minutes sucked into your website. Well done. ;)

Collapse
clairemuller profile image