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 applic...
For further actions, you may consider blocking this person and/or reporting abuse
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.
Thanks so much, I'll check that out!
Also, about css-tricks, this is gold: css-tricks.com/snippets/css/a-guid...
This looks like a great resource, thanks!
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.
Checkout flexbox zombies... A fun way to learn flexbox.
LOL, same here with the CSS-tricks flexbox guide 😁😁
You had me at zombies...
also, when you have the basics in place, you can check out flexbox froggy to have some fun & put your understanding to the test :)
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)) 😈
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 :)
Another way to practice is adding those to a roadmap of future features / things to fix. Anyway, keep the good work!
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...
+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).
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).
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:
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 😉Now feel free to remove that ugly background color!
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. :(
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
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...
Nice!! I really enjoyed playing it!! Very ingenious!!
Thank you!
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!
Thank you!
I just spent about twenty minutes sucked into your website. Well done. ;)
Thank you!
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. >.<
Thanks!