Creating a Mars Weather App - HTML & CSS part 4

This was insanely fun to make but took me a lot longer than I anticipated, so I've broken up into 4 parts.

Part 4: The 'previous weather' section (this video)

In this part we take a look at creating the previous weather section, playing around with a very small amount of JS, plus some transitions, a simple animation, and flexbox.

/// The Github Repo

/// The Figma design

---

Keep up to date with everything I'm up to

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[MarisaClardy]

I want to see an extended version of this, where you make this entirely responsive.

[marcel]

Just discovered you through this video and immediately subscribed when I saw the amazing content that you make. Would love to see a part 5, where you make the website responsive. Keep it up!

[GeorgesMayrink]

This was OUTSTANDING! It was so much fun (and so educative) to watch how you think and work. There is plenty I will have to revisit after some studying but I got the general idea of it all. I am also following your course on responsive design and it is fantastic. I’ve been learning a lot from you and your channel. Thank you, Mr. Powell, and regards from Brazil.

[swapnilshah]

Thanks a lot Kevin. Love the content. The series was really helpful. Learnt a lot of out of it. Please share more .

[abdishakur]

We appreciate a lot for your tireless tutorials. Thank you again 😍

[adonaielohim]

It's nice to find someone that is focusing on css tutorials , keep up the good work sir :)

[criminallyinsaneskel]

I love what you did with the animation delay, really cool!

[sageeconway]

Love your channel! Love this series! Especially your mistakes and how you fix them.

[nerdophile]

I want to see this in production with all the api integration, it will be so cool. Looking forward for responsive version of this code.

[MsAnnieHuang]

Two things I would need to change to make it look the same as the final outcome. 1. Add position: relative; within body. Otherwise the position: absolute; in the .previous-weather does not always make it stick to the bottom (after a few clicks on slide up and down the panel). 2. I need to keep transform: translate(-50%, calc(-100% - 3rem + 1px));
for .show-previous-weather. The current browser version of chrome and firefox (Sep 2020), make it a thin gap between the .show-previous-weather and .previous-weather. Not sure why though, My solution is pull down a show-previous-weather by 1px to get the overlap onto the panel.

[Hotatoes]

thanx for the project alot all the love from Egypt :D

[sebbo-der]

Nice one. It is a pretty cool project to make a Mars weather app. I will head up directly over to Web Dev Simplified.


Just for your .previous-weather-title you could mod the css like this:


.previous-weather__title {
display: inline-block;
margin-left: 50%;
transform: translate(-50%);
transition: 500ms;
}


and the .show-weather you can add:


.previous-weather__title {
margin-left: 0%;
transform: translate(0%);
}


Tada, you get the nice slide to left effect.


Go ahead and make further great content. css is underrated.

[sashatv]

Amazing and so useful! Thank you, Kevin!

[maskman]

This is definitely an awesome project, but css naming has bothered a lot of people, and we have to constantly switch between html and css, writing tons of css codes which is really troublesome and intimidating. tailwindcss solves this problem, it helps people get into css world without hassle, it is so easy to customize and it surely beats bootstrap/sass/scss and all other ui library/framework out there. I think Mr. Kevin Powell should created a tailwindcss crash course on youtube channel as an intro, then make some project based paid courses. I think more and more people will embrace tailwindcss because it really makes life easier especially for developers who are intimidated by css and those who are tired of css naming !!!

[triangle-ft]

I am actually facing the same problem as Alan Lewis. Could you please suggest a solution for the same? And I loved your video. It was amazing!

[alanlewis]

Hi Kevin. I'm enjoying your videos, but, how are you able to nest CSS classes?? That is not allowed by CSS. In my editor (VS Code) I get errors when nesting classes inside classes. Can you explain why you do this, and why your editor does not show it as an error? In following the series for Mars weather, I cannot get the arrow to 'flip / rotate' when the previous weather is expanded. It stays pointing up all the time.

[petropzqi]

Could you use target when clicking the arrow button to hide/show?

[jeromesnail]

16:00 => we should have put a top: 0 instead of the translate(-50%, *calc(* -100% - 3rem *)* )

[mihailodukic]

Hi Kevin! Hope you are doing well . I was wondering if you are keen on creating a small video showcasing how to properly style select, input{date}, and other elements in html. I hardly can find good sources on how to style these manually. Since you always have creative ways of showcasing designs . Maybe this would be Interesting. Hope you take it into consideratio . Regards !!!

[DaveCollison]

A transform scale of 1 -1 would turn the arrow upside-down