Episode 29: Behind the scenes of the CSS Race (AIRBNB project)

Don’t you remember the time where I said I would implement a CSS and HTML tutorial for fun here and there, haha don’t you remember the times when that statement was easier said than done. Haha, good times.

The last post I made about HTMl and CSS was about animations (which I will finish in a later post). It’s just that I have got a ton of stuff going on, especially to do with the AIRBNB challenge. I sit here on the CENTRAL LINE train to Liverpool street, waking up at 9 am and having slept at 2 am to accomplish a race of CSS.

I had (less than 24 hours) to do up our AIRBNB because if there’s a designer in the team, this webpage gotta look good. It would be a disgrace to my degree and my life’s passion. Overall, it took longer than I thought it would. However, when you get critiqued by your “almost-famous-designer-boyfriend” back at home about your design, you realise there are so many considerations for a website that you haven’t done.Miraculously, adding all those considerations are not required given that we only did this in a week. Give a team some credit.

This CSS blog is going to be about all the stuff I manage to achieve in less that 24 hours for a project. Some of these are a lot easier than you think.

W3schools is a jackpot.

So, through my late night with CSS, these are the following list of things I learnt below:

• Button hovers
• Make your button look like you are pressing a button
• Making sure the text fields are not padded and you can fill in to the required length.
• Website layout and alignment
• Adding images to the right size and positioning them in CSS
• Playing around with shadows on objects and allowing yourself to move the shadows.
• Customising your cursor (To the default options or someone’s face) I lived for this cursor.

Apart from the new skills that I will cover today (which are not that hard when I look back on it), the rest were pretty straight forward or that I covered it. The hardest part I thing in this race was making sure you had considered all the design elements and how the website flowed. For example, initially I would have a sign up and login button designed the same way and placed right beside each other. However, given the input fields, how would one know whether those input fields were for signing up or login.

Ergh, design issue, which made me have to back-track on all the design features I had implemented.

I’ve probably mentioned this a lot of times but I will continue to do so as I don’t believe anyone out there is reading every single blog post I right. If you are, claim and I’ll apologize.

Is it important to make something functional or work? Yes, that’s the most important thing out of everything. However, if the market is where everyone can make something work, will your product get recognition? Let’s face reality shall we? No, because your product is just like any other.

If maps were designed badly, it would be terrible for us to find our way.

As awful but as honest as it sounds, the “look” of a product boosts up its value to great heights along with its functionality. How a user interacts with a website, app or digital service is pivotal to whether a user will choose your product. This is where I say “I am so proud I have a graphic design degree” and also that “I’m happy to be at Makers” because I am what the creative industry calls, a hybrid. Designers today are meant to be the connectors of industries and to customers. We make sure we understand parts of each spectrum and channel our skills so that person A’s stuff will be interpreted exactly by point B, when the data gets to person B.

I side-tracked, let’s get to my CSS adventure.

Intro: Admire MY WORK’S WORTH ON THE AIRBNB.

What I’m about to say will sound like bullshit, but I really thought through the design carefully. The flow of a website, as I’ve seen on many pinterest accounts, has a certain flow and ideation of how each page looks. For instance, how the first two pages start from circle, expand into the window, then inside the website, everything is rectangular almost.

Note: This is 80% done, but not done as there are design errors I could fix if I didn’t discipline myself with a deadline. Things like the rounded images and dates I could have fixed, but anyway…

…….. I am not going to go through all my code

It wouldn’t make sense but I’ll explain how to do each part. Right now, this website is also not responsive to the window.

Button Hovers:

Talking about this button here…

Let’s say I have a button under the class login and let’s checkout the CSS file for it. This means that when we write it in our html is has to be <button type = “submit” … you can google the rest.

I know it’s a lot, but most of them seem pretty explanatory except for the following.

• color here is the font-color
• background-color is the color of the button
• padding is what gives the border it’s shape
• border radius is what gives the button some curves to make it a curve rectangle
• outline equals to none and this is important for a button feature as the default way we click on a button, it glows and that sometimes doesn’t suit every look.

Now, the only thing we have to add to the login class of this button, is another section of CSS called Hover.

“:hover” will allow you to change the button’s feature when your mouse hovers over it! It’s as simple as that! In this case, I am just changing the colour of the button of the background from Red to Aqua. I am also changing the version of the cursor (so from an arrow it changes to a hand) which is pretty sick. I’ll touch on that later on.

Look at this magic.

How do you make a button that actually presses?

Shadows. Let’s get into it by adding a box shadow element to our button.

What a box shadow will do is “create a shadow” under your button. You might have to adjust things like the padding, color and radius in order to match the shape of your button like I have. Great, step one.

Now, what happens to a button when we press down on it. It almost shifts downwards and indents into something right? That also happens when we click the button. So, now we can use something like “login:active” similiar to “login:hover”

“active” means when you click on the button in our case as the button is engaged. Here, I’ve changed the color of the box shadow as we want to give the illusion that a button is being pressed into something. We also have added a cool feature called transform. What this will do is shift our “non-shadowed button” down, and thus into the shadow. This gives the illusion that the button is being pressed into an indent.

Overall, if you are lost, this is how my CSS looks for the login button

The danger of text fields.

I only realised this mistake this week, where I was doing one thing for a text field that I shouldn’t do.

Yes this part.

When you look at this text field for the user, we aim that the person can fill out stuff in that text field so it can be seen. However, the question for any person trying to figure out this CSS is how can we extend the fill box (as it gives us a default size that most of the time we want to change)

This is what we are aiming for.

You would think, since we’ve padded our button, that we should just increase the padding on the right.

padding: 10px (top), 150px(right), 10px(bottom), 14px(left)

Something like this right? What this will do is not increase the text field! This means if someone has a really long email, it will be cut off in the middle of our text field! (Imagine the above gif where the continuous type stops at half way of the grey box)

To solve this and actually do this right, We should simply increase the text field…right? That sounds obvious, but not when you are discovering CSS.

This is for the email fill in text box(The first one in the gIF)

See how we used (WIDTH) to extend our text box fields? This is what we should do instead of cop out with padding.

Shadows, why are they great?

They make things cooler than they are. It’s a clean touch that makes designs quite unique as you’ve seen on my air-bnb page. For shadows I’ll talk about the sign up and login page where the circles are.

Look at these cool hipster shadows.

Let’s look at the first one and let me show you the CSS for it.

Everything seems pretty clear, even the box-shadow element as we’ve covered it. However, what is the rest of this lingo that’s all to do with box-shadow.

What I find really strange with this feature is how it accepts colours in the format of rgba (which is bloody annoying) but it does. There are many ways to achieve the shadow effect. I simply picked this one as it was the one effective one I found first.

Let me try explain this (I may be wrong but this is from my experience using it) If we imagine the shadow as a spotlight and it’s pivot is from the center. The -moz-box-shadow and -webkit-box-shadow are almost the elements that change how far it’s from the white circle and the y axis of the shadow.

Let me write this again:

• moz-box-shadow = the change on the x-axis (of how far the shadow is from the white circle)
• -webkit-box-shadow = changes where it is on the y axis

By interacting with these two, you can position the shadow from where it’s coming from and where you want it to be. We use the rest of the box-shadows to have a box shadow and make sure all the coordinates are placed.

Customising Cursors:

See how it changes from a type to a glove?

What’s really cool about this feature is that there a set of default cursors you can call. You can check them out here.

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

The code for the cursor is simple.

cursor: pointer;

(this will give you a glove pointing to the button)

That’s it! But what if we want to customise our cursor ? :). What I’ve done and achieve is just an image cursor although I wanted it to be a GIF.

I initially tried to upload my gif to GIPHY but it only seems to use the first image, which sucks. With this cursor however, you always have to set a default one at the end so it knows what to replace the default cursor with the following image.

lol

I wish I could take a screen video of this but on our confirm booking page but it requires me to start up the whole website and I would have to input the data to so and it’s a lot to do for 9 am in the morning.

Bonus question: How did you get the circle like outside the window.

Note: This website is not responsive so if you shrink the window of this website, the layout will be messed up! So, how did I get this layout for my computer?

I believe it was the following features:

• size: contain
• background-position: center;
• margin: 0px;
• padding: 0:
• overflow-y: hidden;

The last element, the overflow-y will hide the extra scroll of stuff that is at the bottom of the window. By hiding the overflow of the circle, it will contain it’s size into the window. (Pretty sure how that works)

Conclusion:

If I’m wrong on anything, please do correct me. I’m just going off based of what I experienced when coding this in less than 24 hours. However, that’s all the tips I can share with you for now and I’ll hopefully be back to the initial html and css tutorials I started. Till then, see ya.

Fun fact of the day

Positioning in CSS is a hard one to get your mind around. Currently, my somewhat bad workflow is that I’m individually styling each element with the position element. This is bad because there are only so many h1-h7 tags and p tags, firstly. Secondly, if you adjusted the font (say the size), it could shift your positioning of your website!

This is why it’s better to do it in divs. A div is like a block of code that you can choose to edit and move around. It’s great for positioning and alignment.

They are a pain and something I am getting my mind around but it’s better to use divs if you want to change something minor, and still have everything in place. Still have that yet to master…