- 27
- 284 275
Topknot Clare
Приєднався 25 лис 2017
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
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)
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
thanks subbed
This is awesome! Thank you!
We shall see
Shit i need q beginner to the the beginner video 😢
Sorry for
At least you understood something
Great! Thanks a bunch! Shalom. <3
🚀
cool!
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
I can’t be the only one not seeing the code!
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 :)
horrible
who is here in 2024?😆 thank you so much and it's easy to understand,
Thank you 😊..
Pleaser post more love your content...❤
I am very curious, why she stoped uploading ?
good stuff right here, well done
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)
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.
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>
I'm going to be watching this for a while. Thank you very much.
I like the instructor. Helpful content. Well done!
1000 times better than coursera courses. I wish you had a complete Javascript course on Udemy or somewhere. I’d jump on it
you are not skibidi
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!
you make it so nice and simple
Lovely voice, clear explanation. Thanks :)
Great tutorial! Very clear thank you
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.
Lmao maybe learn to troubleshoot
@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.
@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??
Thank you! It was useful
Is this tutorials updated to 2023 ?
Thank you so much
I've been looking for this! Thanks!
Thanks for the great breakdown. The coding demo was just what I needed to see.
This.. was the most easy to understand and helpful video about Js I’ve ever seen! thank you.
Jesus loves y’all
2:25 there you go
Great! Thanks a lot💙
👌👌👌👌
It's simple and amazing explanation
Great video, thanks a lot👍🏾
You keep saying semantics, what is that
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
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
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.
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!
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
Thank you for the video, it was very helpful. What text editor are you using?
Perfect video!
😭😭
😂😂
this is really helpful, it has openned my mind completely. too short but meaningful
helpful
Great explanation, I love the way you explain everything so clearly <3
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...