Categories
Front-End

5 practice projects to learn HTML and CSS

HTML and CSS (just the two, yes, classic front-end stuff) are often overlook in favor of JS. Many developers reach a point where they understand the base concept for layouts, standard styling properties and the way to build elements. Often accompanied with a library like Bootstrap or Foundation.

But it turns out that there is a lot more to building layouts than just that. In fact, it’s rather easy to spot the TON of badly written front-end code. Its truly rare to see a project where things make sense, there is no useless properties, overly-complex stylings and hacks left and right to solve problems caused by bad code in the first place.

More than once I’ve deleted 300+ lines of code to write 50-60 lines that do the same job with less bugs and it’s easier to understand.

So, if you think that there is still some room to grow, try out the following projects in your spare time! Note, the order is not in terms of difficulty or anything.

Categories
Front-End

Responsive Containers in CSS

Responsive is nothing new — you build a page, it looks great on desktop, it has to look great on mobile as well. To achieve this we most often use media queries, but there is one other way – responsive containers

We should all know by now how to achieve that. You have media queries, you have relative values, you have grid systems and so forth.

Categories
Front-End

Should you wrap block elements with anchor tags?

A question that pops every now and then — should you wrap block elements with anchor: <div> with anchor tag <a> ? This is one of the many decisions front-end developers have to make on a daily basis.

TLDR: Yes, you can. Don’t sweat over it.

First – what is the difference between a block and an inline element like <a>?

By default, a block-level element occupies the entire space of its parent element (container), thereby creating a “block.” 

Block-Level Elements, MDN
Categories
Design Front-End Tips

How I crafted my view for the League of Legends champions select screen

It all started in my school years when I and my buds were playing together online in the hours after school till midnight (and after more often than not).

Now, I wasn’t a hardcore gamer, not even close, though I could say that I am more or less proud of my “Global Elite” rank achievement on CS:GO.

So it was then when I stumbled upon League of Legends – an MOBA style game by Riot Games – a game with more than 100 million active users each month!

So you can see how quickly I got addicted to it, hitting hours and hours every day. In case you don’t know it (or the MOBA genre in general) it’s a team based 5v5 game where each player controls a champion with a set of unique abilities.

I won’t get into details about the gameplay as this is not the goal of this writing, but I must say a few general words to explain it better anyways.

Categories
Design Front-End Productivity Tips

Decision making as a designer and front-end developer in a WordPress agency

First, let’s start with what “decision making” is, and more importantly – good decision making.

When trying to make a good decision, a person must weight the positives and negatives of each option, and consider all the alternatives.

Clients come with problems. And they want them solved. Most of the time that’s a business problem, not technical. They want growth, they want improvement, they want income. Designing and developing must come with this core idea in mind. You want to provide a product that will improve your client’s business.

But to do so as an agency, you have to understand the business of your client. Why a certain design decision is better than another. What is the user base? How will this design decision affect the technical implementation of it and therefore the budget of your client? Long term commitment is crucial for understanding this.

Categories
Design Front-End

Should a Front-End developer be a good designer as well?

No. Yes?

Maybe. And here’s why:

It depends on the work really. Here is one example: You are a front-end developer working in an agency. The task of converting a designed business site comes. What do you do?