Topknot Clare
Topknot Clare
  • 27
  • 251 873
JavaScript Tutorial: While and Do...While Loops
Happy Web Dev Wednesday! This week we adapt our for loop from last week to demonstrate the difference between a while loop and a do...while loop.
Enjoy!
Website: www.topknotclare.com
Twitter: topknot_clare
zhlédnutí: 2 163

Video

JavaScript Tutorial: For Loop Basics
zhlédnutí 2,1KPřed 6 lety
We're back at it again for Web Dev Wednesday! This week we touch on the basics of a handy dandy lil programming tool called a LOOP. Loops allow us to execute the same block of code multiple times or in certain conditions without cluttering up our code with lines and lines of the same stuff. We will start our loopy times with a demonstration of the FOR loop. Enjoy! Website: www.topknotclare.com ...
JavaScript Tutorial: Dealing Tarot Cards Using An Array of Objects
zhlédnutí 5KPřed 6 lety
Happy Web Dev Wednesday! This fine Independence Day we dive into some applied JavaScript to practice a popular beginner's project: dealing a deck of cards. Instead of the standard deck, however, we spice things up with a mini tarot deck to draw from instead ;) NEW THIS WEEK: Going forward, project files shown in the video will be available for download on the accompanying post on www.topknotcla...
JavaScript Tutorial: How to Store Properties & Methods in an Object Variable
zhlédnutí 2,5KPřed 6 lety
Happy Web Dev Wednesday! This week we introduce a new, complex data type in JavaScript: the OBJECT. There are many practical applications for objects, so I will probably create a more advanced example in the coming weeks to demonstrate the power of this new variable. In the meantime, enjoy! Website: www.topknotclare.com Twitter: topknot_clare
JavaScript Tutorial: How to Use an Array to Store Many Values in One Variable
zhlédnutí 5KPřed 6 lety
Happy Web Dev Wednesday! This week we introduce a new data type in JavaScript: ARRAYS. We even incorporate an array into our color-changing box page to demonstrate the benefits of storing data in an array. Enjoy! Website: www.topknotclare.com Twitter: topknot_clare
JavaScript Tutorial: How to Simplify If/Else Conditionals with Ternary Operators
zhlédnutí 1,4KPřed 6 lety
Happy Web Dev Wednesday! This week I'm revising our single if/else color-changing box to turn that if/else conditional into a ONE LINE ternary operator for the SAME FUNCTIONALITY that takes up LESS CODE REAL ESTATE. I hope you find this video helpful! Enjoy! Website: www.topknotclare.com Twitter: topknot_clare
JavaScript Tutorial: How to Replace If/Else Chains with a Switch Statement
zhlédnutí 2,2KPřed 6 lety
The JS Web Dev Wednesdays continue! This week we learn to use a SWITCH STATEMENT to check a condition on our web page and perform separate actions based on how the condition evaluates...WITHOUT an ugly chain of if/else conditionals. ~*We love conditional statements here at Topknot Clare *~ Enjoy! Website: www.topknotclare.com Twitter: topknot_clare
JavaScript Basics in 10 Minutes
zhlédnutí 216KPřed 6 lety
Happy Web Dev Wednesday! This week we are moving on to the wonderful world of JavaScript. As a basic starting point, we will discuss variables, events & functions (ft.conditional statements) as a way to explore the dynamic functionality we can add to our web pages by including JavaScript. Enjoy! Website: www.topknotclare.com Twitter: topknot_clare
CSS Grid Justify and Align
zhlédnutí 5KPřed 6 lety
Happy Web Dev Wednesday! This week we continue exploring the possibilities of CSS Grid. Using justify-items/justify-self and align-items/align-self, we now have greater control over where in the grid our elements are positioned. Also surprise guest appearance by grid-auto-rows ;) Enjoy! Last week's "CSS Grid Basics" video: czcams.com/video/1HohSyeSVWo/video.html Website: www.topknotclare.com Tw...
CSS Grid Layout Basics
zhlédnutí 1,5KPřed 6 lety
Happy Web Dev Wednesday once again! This week I spend more time explaining CSS Grid, how it works and how powerful it can be for greater layout control on web pages. Last week's tutorial incorporating grid into a page of our sample website will probably make more sense AFTER this one. I hope this is helpful! Layout Control on Sample Site Video: czcams.com/video/nN5xpyAnzAg/video.html Website: w...
Layout Control with CSS Grid
zhlédnutí 781Před 6 lety
It's Web Dev Wednesday once again! Today we dip our toes into the exciting world of CSS GRID. This week we set up the About page on our sample website, but I'm thinking I will delve deeper into CSS Grid and all its potential uses next week as well. Very exciting stuff! Morten Rand-Hendriksen "CSS Grid Changes Everything (About Web Layouts)" Talk at WordCamp Europe: czcams.com/video/txZq7Laz7_4/...
HTML + CSS Tutorial: Creating a Contact Form
zhlédnutí 802Před 6 lety
Happy Web Dev Wednesday! This week we are going back to the basics and learning some new HTML to tie into our styling practice. Forms are an integral part of any well-rounded website. Today we incorporate a custom contact form into our sample website. Enjoy! Website: www.topknotclare.com Twitter: topknot_clare
How to "Animate" Elements with CSS Transitions
zhlédnutí 424Před 6 lety
Happy Web Dev Wed! Today's tutorial covers a sneaky way to get animated features on a page using ONLY CSS: transitions! To make our familiar sample website a bit more dynamic, today's demo animates the page's images when you hover over them. NO JavaScript and nothing fancy! Website: www.topknotclare.com Twitter: topknot_clare Media Queries Tutorial: czcams.com/video/7ZRuI3MXuOw/vide...
WordCamp Atlanta 2018 VLOG
zhlédnutí 138Před 6 lety
FACE REVEAL?? As a way to take you along with me to WordCamp Atlanta....MY FIRST EVER VLOG! Say hello to my face for once & check out the #wcatl venue, vibe, some downtown ATL navigating, and a little bit of what it was like to attend the conference. I had a great experience and hope you enjoy this little peek inside! Website: www.topknotclare.com Twitter: topknot_clare
Responsive Web Design with CSS Media Queries
zhlédnutí 426Před 6 lety
Happy Web Dev Wednesday! Today we talk a bit about responsive web design and how to style your page differently for different viewport widths on different-sized devices. Thank you for watching, and I hope you found this video helpful! Website: www.topknotclare.com Twitter: topknot_clare
How to Position Elements on a Web Page with CSS
zhlédnutí 512Před 6 lety
How to Position Elements on a Web Page with CSS
Horizontal Navigation Bar: Applied CSS
zhlédnutí 410Před 6 lety
Horizontal Navigation Bar: Applied CSS
Artsy Feminine Apartment: Sims 4 Speed Build
zhlédnutí 92Před 6 lety
Artsy Feminine Apartment: Sims 4 Speed Build
How to Style a Navigation Sidebar: Applied CSS
zhlédnutí 497Před 6 lety
How to Style a Navigation Sidebar: Applied CSS
Contemporary Charm: Sims 4 Speed Build
zhlédnutí 47Před 6 lety
Contemporary Charm: Sims 4 Speed Build
How to Style Interactive Links With CSS Pseudo-Classes
zhlédnutí 475Před 6 lety
How to Style Interactive Links With CSS Pseudo-Classes
Styling Web Pages: Intro to CSS (+ HTML Class/ID Attributes)
zhlédnutí 770Před 6 lety
Styling Web Pages: Intro to CSS ( HTML Class/ID Attributes)
Upgraded Starter: Sims 4 Speed Build
zhlédnutí 105Před 6 lety
Upgraded Starter: Sims 4 Speed Build
Using Images on Web Pages with HTML
zhlédnutí 484Před 6 lety
Using Images on Web Pages with HTML
How to Make Bulleted and Numbered Lists in HTML
zhlédnutí 992Před 6 lety
How to Make Bulleted and Numbered Lists in HTML
Creating Links on the Web: HTML Anchor Tag
zhlédnutí 574Před 6 lety
Creating Links on the Web: HTML Anchor Tag
HTML Basics: The Language of Web Pages
zhlédnutí 1,2KPřed 6 lety
HTML Basics: The Language of Web Pages

Komentáře

  • @McCarthyLetitia-u5w

    Clark Kimberly Martin Carol Brown Steven

  • @RepentKenya2005
    @RepentKenya2005 Před 4 dny

    Pleaser post more love your content...❤

  • @MrLu4o
    @MrLu4o Před 28 dny

    I am very curious, why she stoped uploading ?

  • @ags2099
    @ags2099 Před měsícem

    good stuff right here, well done

    • @ags2099
      @ags2099 Před měsícem

      edit: the whole playlist concerning webdev is bonkers, you fellow webdev noob reading this should really look into it (i myself am also a huge webdev rookie)

  • @kaydeenothing9772
    @kaydeenothing9772 Před měsícem

    I don't know how to ask my question so I'm hoping somebody knows what I'm talking about and can answer. When doing these variables or events or whatever, is there a list of options of things you can put or is it pretty much any name you choose for it? So for example in the video where she did "var" for variable, she put in QueryDelector and GetElementById.... I know those specific things are needed but I'm talking about other things that would be written in this same spot.

  • @ronjv83
    @ronjv83 Před měsícem

    I also add a function😊 <button id="changeColorButton" onclick="changeColor()">Click Me</button> <div id="changeMe"></div> <div id="buttonContainer"> Do you want to continue? <button onclick="continueChange(true)">Yes</button> <button onclick="continueChange(false)">No</button> </div>

  • @jimmy_t_l_g6568
    @jimmy_t_l_g6568 Před měsícem

    I'm going to be watching this for a while. Thank you very much.

  • @antonbudnik3895
    @antonbudnik3895 Před 2 měsíci

    I like the instructor. Helpful content. Well done!

  • @euipaik1102
    @euipaik1102 Před 2 měsíci

    1000 times better than coursera courses. I wish you had a complete Javascript course on Udemy or somewhere. I’d jump on it

  • @Willerd567
    @Willerd567 Před 3 měsíci

    you are not skibidi

  • @dks6515
    @dks6515 Před 3 měsíci

    Thanks a lot for this quick tutorial. Was working on some stuff for my website in CSS and found out that CSS ofcouse doesn't have any onclick event handler stuff so i have to use Java. Actually very similar to C# i seems. Amazing tutorial, very clear and explains all the basic stuff you need to understand the code. Thanks again!

  • @AndrewSoimis
    @AndrewSoimis Před 3 měsíci

    you make it so nice and simple

  • @bigglyguy8429
    @bigglyguy8429 Před 5 měsíci

    Lovely voice, clear explanation. Thanks :)

  • @augurelite
    @augurelite Před 6 měsíci

    Great tutorial! Very clear thank you

  • @codexhaxer5075
    @codexhaxer5075 Před 6 měsíci

    Absolute trash ass video. You never showed how tf you got that big ass red square into your file and never showed you .css file and shit didn't work in my end and I had to look up on google to follow what you were saying. Why are women so confusing??? I followed and even wrote the exact same as you did and yet MINE didn't change color at all. Nothing happened. Your video just suck.

    • @umestudies5337
      @umestudies5337 Před měsícem

      Lmao maybe learn to troubleshoot

    • @MeRandomVery
      @MeRandomVery Před měsícem

      ​@umestudies5337 ☝️🤓 Uuu ac- actually like AHMMM ACTUALLYY, nobody cares abt ur dumb a$$ reply. U didn't even read my whole flipping comment u dumb b**ch. Maybe take and read and you'd see that I had TRIED to troubleshoot.

    • @MeRandomVery
      @MeRandomVery Před měsícem

      ​@umestudies5337 ☝️🤓 UMM UH-MM AC- LIKE ACTUALLY UHMMM TRY "tRoUbLeShOoTiNg". like wtf??? U clearly didn't read my comment. AND YET YOU DECIDED TO COMMENT ON MY COMMENT EXACTLY WHAT I'VE STATED I HAVE ALREADY TRIED LIKE ARE U DELUSIONAL??? DO YOU NEED GLASSES OR ARE U JUST DUMB??

  • @arasht
    @arasht Před 6 měsíci

    Thank you! It was useful

  • @sak-superagentkaboom5968
    @sak-superagentkaboom5968 Před 7 měsíci

    Is this tutorials updated to 2023 ?

  • @Tikato-jz8qu
    @Tikato-jz8qu Před 7 měsíci

    Thank you so much

  • @Flely
    @Flely Před 7 měsíci

    I've been looking for this! Thanks!

  • @funnycatcomedyvideos
    @funnycatcomedyvideos Před 7 měsíci

    Thanks for the great breakdown. The coding demo was just what I needed to see.

  • @EAGLE_Standoff
    @EAGLE_Standoff Před 7 měsíci

    This.. was the most easy to understand and helpful video about Js I’ve ever seen! thank you.

  • @anakinskywalker1509
    @anakinskywalker1509 Před 8 měsíci

    Jesus loves y’all

  • @nileshgautam1408
    @nileshgautam1408 Před 8 měsíci

    2:25 there you go

  • @baharalekberova791
    @baharalekberova791 Před 8 měsíci

    Great! Thanks a lot💙

  • @abodisom_official
    @abodisom_official Před 8 měsíci

    👌👌👌👌

  • @Adesh_Dhope_2024
    @Adesh_Dhope_2024 Před 9 měsíci

    It's simple and amazing explanation

  • @roachjuice5222
    @roachjuice5222 Před 9 měsíci

    Great video, thanks a lot👍🏾

  • @eagleman98
    @eagleman98 Před 9 měsíci

    You keep saying semantics, what is that

    • @phoenixaxis329
      @phoenixaxis329 Před měsícem

      Semantics basically have to do with the meaning of something It's like the opposite of syntax in a way, cause syntax is the structure, semantic is the meaning

    • @phoenixaxis329
      @phoenixaxis329 Před měsícem

      That's why sometimes we get syntax errors cause we missed the structure/order but usually semantic errors are only realised by the programmer when the program is not doing what they want it to do

  • @jojohehe3251
    @jojohehe3251 Před 9 měsíci

    Very interesting. I personally find switch statements a lot of effort and prefer to try other methods, but this is a good introduction to them. I thought at first glance that the obvious solution here was to simply take the index of the current colour from the array, increment it modulo the length of the array - 1. But that really doesn't seem like less work than a switch, and certainly not less processing.

  • @jojohehe3251
    @jojohehe3251 Před 9 měsíci

    Very interested to see that you're using a global variable to hold all the details here. Is that normal practice? I had to watch this twice to notice that you grabbed the div named in the HTML, put that in a global variable, then declared a class and had one of its methods explicitly invoke the global variable - very strange to my ancient memory of learning OOP in the 90s. I think we'd have been shot for that. The class isn't used to manipulate its own data, but something else's. Very interesting!

  • @heatherfeather1293
    @heatherfeather1293 Před 9 měsíci

    Nice!! I have looked up many tutorials and they are usually very long winded. It was nice to actually SEE Javascript in action and how it works with the html and css

  • @mrhess31
    @mrhess31 Před 10 měsíci

    Thank you for the video, it was very helpful. What text editor are you using?

  • @BelegaerTheGreat
    @BelegaerTheGreat Před 10 měsíci

    Perfect video!

  • @zapperss
    @zapperss Před 11 měsíci

    😭😭

  • @happybanda8780
    @happybanda8780 Před rokem

    this is really helpful, it has openned my mind completely. too short but meaningful

  • @HaifengZhu-pn3uq
    @HaifengZhu-pn3uq Před rokem

    helpful

  • @VibeMusic996
    @VibeMusic996 Před rokem

    Great explanation, I love the way you explain everything so clearly <3

  • @user-gg7du6mm8i
    @user-gg7du6mm8i Před rokem

    thank for your project. Nice job. But can!t reach the links bellow CZcams, they always redirected to different websites and not to yours...

  • @nandhabharathi8511
    @nandhabharathi8511 Před rokem

    I just love you videos so much❤

  • @nandhabharathi8511
    @nandhabharathi8511 Před rokem

  • @sweetuti1988
    @sweetuti1988 Před rokem

    You’re so amazing! Please continue making videos, they’ve been so helpful. You have a gift!

  • @firefox3155
    @firefox3155 Před rokem

    How do i get a window to typoe the code?

  • @Mrwolfgd
    @Mrwolfgd Před rokem

    I bought a fullstack course from Udemy, after html css which was really easy I got to js and got stuck because the guy was explaining about different syntax of js while showing some very very basic console.log stuff, instead of simply demonstrating js in practice like you did. It’s all I ever needed to stop staring at the screen clueless when I start writing my js file

  • @noobschthorapy
    @noobschthorapy Před rokem

    I don’t know if you still active but I was wondering if I can pay for you to teach me JavaScript

  • @naugustus939
    @naugustus939 Před rokem

    Teach me more Plz

  • @naugustus939
    @naugustus939 Před rokem

    Please come back sensei. We need you!

  • @naugustus939
    @naugustus939 Před rokem

    I grasped more in these 10 minutes then i have 8 hours reading on The Odin Project.

  • @jaddancel
    @jaddancel Před rokem

    8:13 From this point moving forward the code stopped working for me.

  • @ebisataye5054
    @ebisataye5054 Před rokem

    It's dark on mobile phone screen, and need a reply soon

  • @user-fp2sy5rl9p
    @user-fp2sy5rl9p Před rokem

    Great videos very helpful. Hope to see more