Weather apps are one of the best projects to build as a beginner since they teach you tons of concepts around utilizing APIs and transforming complex data. They also generally have a ton of tricky CSS as well. In this video I will show you how to build a simple weather app that doesn’t even need a server to work.

JavaScript Simplified Course: https://javascriptsimplified.com


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/js-weather-app
JavaScript Simplified Course: https://javascriptsimplified.com
Why I Don’t Use Class Selectors In JavaScript Article: https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:50 - Setup
02:35 - Header HTML
07:32 - Header CSS
12:37 - Day Section HTML
14:49 - Day Section CSS
16:40 - Hour Section HTML
19:29 - Hour Section CSS
20:56 - HTML Templates
23:09 - Connecting To The API
28:10 - Transforming API Data
39:10 - Rendering The  Data
52:52 - Getting The User’s Location


#WeatherApp #WDS #JavaScript

How To Build A Weather App In JavaScript Without Needing A Server

https://bit.ly/3GGV7Y6 👈 Take my Interactive CSS Course. Use "UI2023" for 23% Off!
-- Today, I'm going to show you exactly how to take the UI design we created in the 2023 UI/UX design crash course video (https://youtu.be/QwSN4n2sjR8) and make it a working reality in the browser with HTML and CSS. You're going to learn about the fundamentals of HTML and CSS, in order to create websites and layouts.

Codepen demo:
https://codepen.io/designcourse/pen/ExpNjxQ

Project files:
https://coursetro.s3.amazonaws.com/stuff/fauxica.zip

Figma design document:
https://www.figma.com/community/file/1192839712389547623

A few of the things you will learn in this video:
- Basic HTML & CSS Anatomy
- Structuring HTML
- CSS Flexbox & the CSS Grid
- CSS Transitions & Animations
- And much more..

0:00 - Intro
0:38 - HTML & CSS Anatomy
5:49 - The Code Editor
7:47 - Getting Started with HTML
12:51 - HTML Navbar
28:45 - HTML Hero Section
50:16 - CSS Font Size 62.5%
54:32 - CSS Navbar
1:20:18 - CSS Hero (Left Column)
1:40:20 - CSS Hero (Right Column)
1:54:30 - CSS Animations
2:08:40 - Final Thoughts

Let's get started!

#frontend #html #css 

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

The 2023 Frontend Development Crash Course - Learn HTML & CSS

https://skl.sh/designcourse19 - First 500 people to sign up will get their first 2 months free!
-- Welcome to this lengthy crash course to Frontend Development here in 2019. This course assumes you have never touched HTML, CSS or JavaScript. 

Initially, we're going to take 20 minutes to discuss the conceptual elements as it pertains to frontend development, including understanding the terminology and structure of HTML, CSS and some JavaScript. Then, we spend the rest of the course taking the UI design mockup that we created in the UI Design Crash Course (linked below) and make it a reality in the browser by writing HTML and CSS from scratch!

By the end of the course, you will:
1. Understand the basics of HTML
2. Understand the basics of CSS
3. Write HTML & CSS to make a static mockup work in the browser.
4. Understand Responsive Web Design
5. ...and much more.

If you want to start from the VERY beginning of this entire project, first watch these 2 videos where we design the UI using Adobe XD:

Step 1. The 2019 UI Design Crash Course for Beginners
https://www.youtube.com/watch?v=_Hp_dI0DzY4

Step 2. Responsive Web Design Tutorial in Adobe XD
https://www.youtube.com/watch?v=Ejbu4ZyCCrs

Step 3: Watch this video!

IMAGE ASSETS are located here and the final project:
https://s3.amazonaws.com/coursetro/frontend-dev-project.zip


Enjoy the video?  Subscribe up, leave a like and a comment!


- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

My site:                                 https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

The 2019 Frontend Developer Crash Course - HTML & CSS Tutorial for Beginners

Learn the basics of HTML5 and web development in this awesome course for beginners. 

Want more from Mike? He's starting a coding RPG/Bootcamp - https://simulator.dev/

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:54) Choosing a Text Editor
⌨️ (0:08:13) Creating an HTML file
⌨️ (0:20:31) Basic Tags
⌨️ (0:36:47) Comments
⌨️ (0:42:13) Style & Color
⌨️ (0:48:07) Formatting a Page
⌨️ (0:59:16) Links
⌨️ (1:07:33) Images
⌨️ (1:16:12) Videos & Youtube iFrames
⌨️ (1:23:00) Lists
⌨️ (1:28:53) Tables
⌨️ (1:37:21) Divs & Spans
⌨️ (1:44:54) Input & Forms
⌨️ (1:53:44) iFrames
⌨️ (1:57:21) Meta Tags

Course developed by Mike Dane. Check out his YouTube channel for more great programming courses: https://www.youtube.com/channel/UCvmINlrza7JHB1zkIOuXEbw

🐦Follow Mike on Twitter - https://twitter.com/mike_dane

🔗The Mike's website: https://www.mikedane.com/

⭐️Other full courses by Mike Dane on our channel ⭐️
💻Python: https://youtu.be/rfscVS0vtbw
💻C: https://youtu.be/KJgsSFOSQv0
💻C++: https://youtu.be/vLnPwxZdW4Y
💻SQL: https://youtu.be/HXV3zeQKqGY
💻Ruby: https://youtu.be/t_ispmWmdjY
💻PHP: https://youtu.be/OK_JCtrrv-c
💻C#: https://youtu.be/GhQdlIFylQ8

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

HTML Full Course - Build a Website Tutorial

Purchase the full course here! 
https://developedbyed.com/

Today I will share with you the first 3-4 hours of The Creative HTML5 & CSS3 course.
In this free 2 chapters we will explore getting started with html and css from absolute scratch.
So if you are a beginner in web development or you just want to brush up your skills these two chapters will help you with that.
If you enjoy the content of this course, in the full version we will explore other things such as flexbox, css grid, sass and more. 
We will also build out 3 awesome projects using html and css from scratch!

Microphones I Use
Audio-Technica AT2020 - https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 - https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) 
DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon)
Logitech G305 - https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon)

DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.


🛴 Follow me on:
Twitch: https://www.twitch.tv/developedbyed
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #css #html

Learn HTML5 and CSS3 For Beginners - Crash Course

https://bit.ly/3iSlL2H - Become a frontend developer (50% off limited time!)
-- https://bit.ly/3F2H8Id 👈 Learn UI/UX Today. Use "LAUNCH" for 15% Off!
-- Today, we're going to do a crash course on learning HTML and CSS. We're going to cover a project we created in Adobe XD a couple weeks ago, and make it FULLY responsive!

Codepen demo:
https://codepen.io/designcourse/pen/JjbPdqd

Project files:
https://coursetro.s3.amazonaws.com/stuff/2021frontend.zip

0:00 - Introduction
2:45 - A Special Offer
3:20 - Code Editor
6:35 - Writing the HTML
58:57 - Writing the CSS
1:46:42 - Mobile Navigation
1:55:16 - Responsive CSS
2:16:43 - Closing

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

HTML and CSS Tutorial for 2021 - COMPLETE Crash Course!

http://bit.ly/3GlRs1Z 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, I'm going to show you how to create a very cool scroll-activated gallery animation using HTML, CSS, JavaScript and GreenSock. You can use what's learned here to do any other sort of cool scroll-activated things!

Codepen demo:
https://codepen.io/designcourse/pen/xxJZRZb

Project inspiration from:
https://dribbble.com/shots/19808872-Homyz-Property-Landing-Page-Website

0:00 - Intro
0:18 - Tools used
0:33 - HTML
0:52 - CSS
1:24 - JavaScript
2:28 - Final result

#frontend #javascript #css 

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX:                         https://designcourse.com
My personal FB account:   http://fb.com/logodesigner
Coursetro FB:                       http://fb.com/coursetro
Coursetro's Twitter:             http://twitter.com/designcoursecom

Join my Discord!                https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon?  Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. 

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

Awesome Scroll-Activated Animated Gallery - Quick Tut

Check out my courses to become a PRO! 👇
https://developedbyed.com/

Today we are going to start a series where we will be reacting to all kinds of things related to web development. Starting off, we will take a look at the best codepends of 2021.

🛴 Follow me on:
Twitch: https://www.twitch.tv/developedbyed
Twitter: https://twitter.com/developedbyed
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/developedbyed/

#programming #website