Topknot Clare
Topknot Clare
  • 27
  • 284 275
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
Переглядів: 2 378

Відео

JavaScript Tutorial: For Loop Basics
Переглядів 2,3 тис.6 років тому
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
Переглядів 6 тис.6 років тому
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
Переглядів 2,7 тис.6 років тому
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
Переглядів 5 тис.6 років тому
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
Переглядів 1,5 тис.6 років тому
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
Переглядів 2,4 тис.6 років тому
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
Переглядів 245 тис.6 років тому
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
Переглядів 6 тис.6 років тому
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: ua-cam.com/video/1HohSyeSVWo/v-deo.html Website: www.topknotclare.com Tw...
CSS Grid Layout Basics
Переглядів 1,8 тис.6 років тому
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: ua-cam.com/video/nN5xpyAnzAg/v-deo.html Website: w...
Layout Control with CSS Grid
Переглядів 8786 років тому
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: ua-cam.com/video/txZq7Laz7_4/...
HTML + CSS Tutorial: Creating a Contact Form
Переглядів 9166 років тому
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
Переглядів 4796 років тому
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: ua-cam.com/video/7ZRuI3MXuOw/v-de...
WordCamp Atlanta 2018 VLOG
Переглядів 1426 років тому
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
Переглядів 4616 років тому
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
Переглядів 5706 років тому
How to Position Elements on a Web Page with CSS
Horizontal Navigation Bar: Applied CSS
Переглядів 4546 років тому
Horizontal Navigation Bar: Applied CSS
Artsy Feminine Apartment: Sims 4 Speed Build
Переглядів 976 років тому
Artsy Feminine Apartment: Sims 4 Speed Build
How to Style a Navigation Sidebar: Applied CSS
Переглядів 5646 років тому
How to Style a Navigation Sidebar: Applied CSS
Contemporary Charm: Sims 4 Speed Build
Переглядів 516 років тому
Contemporary Charm: Sims 4 Speed Build
How to Style Interactive Links With CSS Pseudo-Classes
Переглядів 5416 років тому
How to Style Interactive Links With CSS Pseudo-Classes
Styling Web Pages: Intro to CSS (+ HTML Class/ID Attributes)
Переглядів 8706 років тому
Styling Web Pages: Intro to CSS ( HTML Class/ID Attributes)
Upgraded Starter: Sims 4 Speed Build
Переглядів 1156 років тому
Upgraded Starter: Sims 4 Speed Build
Using Images on Web Pages with HTML
Переглядів 5366 років тому
Using Images on Web Pages with HTML
How to Make Bulleted and Numbered Lists in HTML
Переглядів 1,2 тис.6 років тому
How to Make Bulleted and Numbered Lists in HTML
Creating Links on the Web: HTML Anchor Tag
Переглядів 6586 років тому
Creating Links on the Web: HTML Anchor Tag
HTML Basics: The Language of Web Pages
Переглядів 1,4 тис.7 років тому
HTML Basics: The Language of Web Pages

КОМЕНТАРІ

  • @TypicalDev_1-bf9ky
    @TypicalDev_1-bf9ky 16 днів тому

    thanks subbed

  • @latejanuary
    @latejanuary 24 дні тому

    This is awesome! Thank you!

  • @Johnmengdzebernge
    @Johnmengdzebernge 25 днів тому

    We shall see

  • @IHeArTrOcK20
    @IHeArTrOcK20 25 днів тому

    Shit i need q beginner to the the beginner video 😢

  • @ReligionAndMaterialismDebunked
    @ReligionAndMaterialismDebunked 28 днів тому

    Great! Thanks a bunch! Shalom. <3

  • @0day_da
    @0day_da Місяць тому

    🚀

  • @rikoflishas
    @rikoflishas Місяць тому

    cool!

  • @justin-sd4fb
    @justin-sd4fb Місяць тому

    I’m totally new to anything programming or coding , how do I as a novice and a newbie learn . Cause it’s like I’m in a different country watching this video. How do I learn the ABC

  • @aminamaccido4692
    @aminamaccido4692 2 місяці тому

    I can’t be the only one not seeing the code!

  • @kulfi4374
    @kulfi4374 2 місяці тому

    mam i need you right now after watching this tutorial . this is the one that has help me to understand the concept so easy just by watching it for the first time. i hate coding but some how i need coding to survive. so i nned help from these type of organic content were i can learn without being overwhelemed. i know its been years since you posted but i would reallhy helpful if u continue making content . ps: if you need concpets to be posted post angular for begginers :)

  • @detonario
    @detonario 2 місяці тому

    horrible

  • @Pau_Pau33
    @Pau_Pau33 2 місяці тому

    who is here in 2024?😆 thank you so much and it's easy to understand,

  • @firstclass2222
    @firstclass2222 3 місяці тому

    Thank you 😊..

  • @RepentKenya2005
    @RepentKenya2005 3 місяці тому

    Pleaser post more love your content...❤

  • @MrLu4o
    @MrLu4o 4 місяці тому

    I am very curious, why she stoped uploading ?

  • @ags2099
    @ags2099 4 місяці тому

    good stuff right here, well done

    • @ags2099
      @ags2099 4 місяці тому

      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 4 місяці тому

    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 5 місяців тому

    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 5 місяців тому

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

  • @antonbudnik3895
    @antonbudnik3895 6 місяців тому

    I like the instructor. Helpful content. Well done!

  • @euipaik1102
    @euipaik1102 6 місяців тому

    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 6 місяців тому

    you are not skibidi

  • @dks6515
    @dks6515 6 місяців тому

    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 7 місяців тому

    you make it so nice and simple

  • @bigglyguy8429
    @bigglyguy8429 9 місяців тому

    Lovely voice, clear explanation. Thanks :)

  • @augurelite
    @augurelite 9 місяців тому

    Great tutorial! Very clear thank you

  • @codexhaxer5075
    @codexhaxer5075 10 місяців тому

    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 5 місяців тому

      Lmao maybe learn to troubleshoot

    • @MeRandomVery
      @MeRandomVery 5 місяців тому

      ​@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 5 місяців тому

      ​@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 10 місяців тому

    Thank you! It was useful

  • @sak-superagentkaboom5968
    @sak-superagentkaboom5968 10 місяців тому

    Is this tutorials updated to 2023 ?

  • @Tikato-jz8qu
    @Tikato-jz8qu 11 місяців тому

    Thank you so much

  • @Flely
    @Flely 11 місяців тому

    I've been looking for this! Thanks!

  • @funnycatcomedyvideos
    @funnycatcomedyvideos 11 місяців тому

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

  • @EAGLE_Standoff
    @EAGLE_Standoff 11 місяців тому

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

  • @anakinskywalker1509
    @anakinskywalker1509 Рік тому

    Jesus loves y’all

  • @nileshgautam1408
    @nileshgautam1408 Рік тому

    2:25 there you go

  • @baharalekberova791
    @baharalekberova791 Рік тому

    Great! Thanks a lot💙

  • @abodisom_official
    @abodisom_official Рік тому

    👌👌👌👌

  • @Adesh_Dhope_2024
    @Adesh_Dhope_2024 Рік тому

    It's simple and amazing explanation

  • @roachjuice5222
    @roachjuice5222 Рік тому

    Great video, thanks a lot👍🏾

  • @eagleman98
    @eagleman98 Рік тому

    You keep saying semantics, what is that

    • @phoenixaxis329
      @phoenixaxis329 5 місяців тому

      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 5 місяців тому

      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 Рік тому

    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 Рік тому

    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 Рік тому

    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 Рік тому

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

  • @BelegaerTheGreat
    @BelegaerTheGreat Рік тому

    Perfect video!

  • @zapperss
    @zapperss Рік тому

    😭😭

  • @happybanda8780
    @happybanda8780 Рік тому

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

  • @HaifengZhu-pn3uq
    @HaifengZhu-pn3uq Рік тому

    helpful

  • @VibeMusic996
    @VibeMusic996 Рік тому

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

  • @MetinBagdat
    @MetinBagdat Рік тому

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