Creating a Mars Weather App - HTML & CSS part 1

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

Part 1: The HTML (this video)

In this part, we're just writing the HTML and setting the stage for what's to come. In the next parts, we'll be exploring a lot of fun CSS stuff, from setting up and using custom properties, some fun CSS grid and flexbox stuff, and a whole bunch more!

/// The Github Repo

/// The Figma design

--

Come hang out with other dev's in my Discord Community

---

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!

[khotambakhromov]

when your two most liked developers collaborate on one project is very nice :)

[c__beck]

I absolutely love it when you and Kyle collaborate! Keen to see the full playlist ^_^

[maskman]

the project is way too awesome, two geniuses co-work together to bring the best project to audiences, you two are the best !!!

[digigoliath]

MARS, we have landed!

Wow, my favourite guys Kevin & Kyle, collaborating on a project! I know this series will be great. So much to learn while having loads of fun. Awesome!! TQVM.

[yaldakarimi]

Thank you for your great tutorials. You are the best

[nabiisakhanov]

Best collaboration ever, it's extremely useful!

[abdishakur]

Cool weather app, keep going Kevin ✌, can't wait to watch all until part 4 😍 .

[SuperGylden]

Your video is as always very inspirational. I have learned a lot about css and grid watching them.



If you also want the weather app to be top notch accessible you could consider changing the text for screen readers to something like "north" or "east" or even "north-east" as that would give an actual description of the wind direction. We do not very often go out onto 45 degrees wind ;).


Screen readers read the page in the html code. So if you place a button in-between the inputs it will be very difficult for the user with a screen reader to know what to choose from. It's better to place it after the two input fields.


Looking forward to the serie

[michaeloosthuizen]

A great project to keep those skills sharp!

[johnschmidt]

Just found your channel. You've got lot of great videos. New subscriber here!

[trevornorrey]

Weird place Mars. Do they always have September 31st or only in leap year?😀👽

[xstrafez_c]

This looks very cool. Thanks so much! c:

[brofromspace]

Bro, thank you very much. Yuo really helped me to build a nice weather website))))

[nathancornwell]

I literally recommend your discord channel, your courses and your youtube content like daily . Specially your course on scrimba .

[bike-bytes]

Hi Kevin, a very good video about API programming. I love your courses on youtube. The region on Mars is Elysium Planitia not Plantitia...😊 Greetings from Germany

[shashankagarwal]

Hi Kevin,
I am new in Web Development and right now i am looking to learn and build projects.
if i follow along and build the similar one-page web application under your video guidance.
So am i able to use this project for my portfolio ?

[aleb]

HTML to add at 16:26 -- when he comes back from the future -- just under <div class="previous-weather">

<!-- When clicked, toggle '.show-weather'
to .previous-weather div -->
<button for="weather-toggle" <span class="sr-only">Show previous weather</span></button>

<h2 class="main-title 7 days</h2>

[biomcanx]

What addon were you using to convert to divs etc.? I am sorry I couldn't understand what you are saying.

[JabiScript]

A bit late to the party, but why not use sections instead of divs to separate the date, temp, and wind for accessibility?

[therealrajan]

I hope you would release all the remaining videos at once. Would really appreciate it! I wanted to do the front-end part part all by myself and the javascript from Kyle too.