![Topknot Clare](/img/default-banner.jpg)
- 27
- 251 873
Topknot Clare
Registrace 25. 11. 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
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
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)
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
Clark Kimberly Martin Carol Brown Steven
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 CZcams, they always redirected to different websites and not to yours...
I just love you videos so much❤
❤
You’re so amazing! Please continue making videos, they’ve been so helpful. You have a gift!
How do i get a window to typoe the code?
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
I don’t know if you still active but I was wondering if I can pay for you to teach me JavaScript
Teach me more Plz
Please come back sensei. We need you!
I grasped more in these 10 minutes then i have 8 hours reading on The Odin Project.
8:13 From this point moving forward the code stopped working for me.
It's dark on mobile phone screen, and need a reply soon
Great videos very helpful. Hope to see more