Professor K Explains
Professor K Explains
  • 106
  • 135 613
Use the web inspector to learn which HTML layout tags a website uses and why
Take your first steps in learning the web inspector by tearing down a website you already know and learning how it works! Today, we'll focus on learning what four new HTML tags for layout are for - nav, article, section, and aside - and then using the web inspector to tear down a Boston University website and explain why each tag is used where. You'll learn the basics of how to open the web inspector, how to search for an HTML element using the web inspector, how to click and navigate through code in the inspector, and what the differences are between nav, article, section, and aside. After this video, you'll be prepared to start tearing down the HTML structure of websites you use every day, and beginning to see how they work!
Chapters in this video:
[00:00] Introduction
[00:34] How layout tags relate to what we've learned so far
[01:04] The nav (navigation) tag
[01:11] The article tag
[02:02] The section tag
[02:16] The aside tag
[03:00] Layout tags in action: Breaking down a news website's structure
[03:41] Open Inspect Element to see how navigation is marked up
[04:22] How to find what HTML is connected to what elements in the web inspector
[05:12] Why does the publications element use the nav HTML tag?
[05:47] Why do I need an unordered list if I already have a nav tag?
[06:10] Can I use multiple nav tags in HTML?
[06:42] Breaking down the main content area
[07:34] Breaking down the article
[07:49] Breaking down the related sections
[08:18] How to search code using the web inspector
[08:54] Breaking down the aside tag
[09:31] Conclusion
มุมมอง: 514

วีดีโอ

How to add images and links to HTML
มุมมอง 3.3K3 ปีที่แล้ว
Learn how to add images and links to your HTML using the img and a tags! In this beginner-level HTML tutorial, you'll learn about self-closing tags and see attributes - and how they work - in action. You'll also learn the difference between relative and absolute links in HTML, and how that affects where you store images in your HTML. Chapters in this video: [00:00] Introduction [00:49] Code alo...
What are wireframes, and how do they fit in the website design process?
มุมมอง 1523 ปีที่แล้ว
Wireframes are NOT just a black and white design! In this video, you'll learn why wireframes are critical to the website design process, where they fit in, and what an example of a great wireframe looks like. You'll also see how wireframes can help you demonstrate content priority, hierarchy, and functionality in your next project. Chapters in this video: [00:00] Introduction to the website des...
How to mark up lists in HTML using the ul, ol, and li tags
มุมมอง 1.1K3 ปีที่แล้ว
Learn how to nest elements in HTML as well as three new HTML tags to mark up lists in this tutorial. You'll find out what the difference between ol and ul is, why there are different tags for each type of list, how those tags affect the presentation of lists on your website, and see both types of lists created step by step with explanations in a code along. Chapters in this video: [00:00] Intro...
Why Semantic HTML Matters: Intro to Accessibility and VoiceOver
มุมมอง 2173 ปีที่แล้ว
In this beginner frontend development tutorial, you'll learn how the usability of VoiceOver is driven by semantic HTML - HTML which is formatted in a way that reflects its meaning to a user. You'll learn how choosing elements in HTML affects screen readers, see demonstrations of what a screen reader looks like in action, and best practices for writing and marking up content in an accessible way...
Introduction to Github
มุมมอง 563 ปีที่แล้ว
Learn how to sign up for and navigate GitHub, as well as what version control is and some new terminology, in this video.
Idea Generator Tutorial Part 7: Add an event listener to the Generate Ideas button
มุมมอง 583 ปีที่แล้ว
We're in the final stretches of the Idea Generator tutorial! In this portion, we'll finish the functionality of the idea generator by adding the final event listener in JavaScript to our page: the code that makes the Generate Ideas button work. This is part 7 of an 8 part tutorial. Check out the playlist here: th-cam.com/play/PLFYdvD6EeUNmufgrXY0Gbhz_Fbh3RZi-E.html Follow along by cloning or fo...
How to Reveal Advanced Tools in Adobe Illustrator
มุมมอง 1.9K3 ปีที่แล้ว
Want to access all the advanced tools in Adobe Illustrator? If your interface in Adobe Illustrator seems to be missing some tools in the toolbar, you're not alone. In this video, I'll show you how to reveal hidden tools in Illustrator and explore some of the more powerful features of Adobe's popular design software. If you can't find the area type tool, you're missing the rounded rectangle tool...
Idea Generator Tutorial Part 6: Style the cards with CSS Grid and Sass
มุมมอง 1003 ปีที่แล้ว
Learn how to use Sass and CSS Grid to create a card-style layout as I show you how I build an idea generator app from start to finish using JavaScript, HTML, and CSS. In this part of the tutorial, we'll focus on getting rough styles for the cards and layout in for our idea generator using CSS Grid and Sass. We'll cover how to use Sass variables to connect related styles together, what partials ...
Welcome to CM501 - Design Software & Strategy!
มุมมอง 1563 ปีที่แล้ว
Welcome Boston University COM CM501 Summer 2021 students! I'm so excited to have you in my class. Here's everything you need to get started next week!
Idea Generator Tutorial Part 5: Write a function to get two random bookmarks
มุมมอง 543 ปีที่แล้ว
Learn how to randomly pull data from an array as I show you how I build an idea generator app from start to finish using JavaScript, HTML, and CSS. In this part of the tutorial, we focus on the problem of pulling two random bookmarks to create our idea generator. We'll cover how to generate a random number in JavaScript, how you can use this random number to get a random item from the bookmarks...
Idea Generator Tutorial Part 4: Improve performance by caching your API data with localStorage
มุมมอง 993 ปีที่แล้ว
Learn to improve the performance of your applications by caching data as I show you how I build an idea generator app from start to finish using JavaScript, HTML, and CSS. In this part of the tutorial, we focus on improving the performance of our web app by caching data from our API calls. We'll examine cookies and localStorage as possibilities, and how to ensure users still get fresh results p...
Idea Generator Tutorial Part 3: Connect your data to HTML and create the layout
มุมมอง 1123 ปีที่แล้ว
Learn to create dynamic, data-driven HTML markup from an API as I show you how I build an idea generator app from start to finish using JavaScript, HTML, and CSS. In this part of the tutorial, we focus on creating and outputting the HTML markup structure of the app, and defining our functionality goals. Along the way, we'll learn more about what professional Git development workflows look like,...
Idea Generator Tutorial Part 2: Fetching Data with Authentication
มุมมอง 1063 ปีที่แล้ว
Learn to fetch data from an API using authentication as I show you how I build an idea generator app from start to finish using JavaScript, HTML, and CSS. In this part of the tutorial, we focus on the Raindrops.io API, which requires authentication to get data. This intermediate tutorial will help you understand the basics of authentication, how to incorporate authentication into your fetch cal...
Idea Generator Tutorial Part 1: Set up Github and Install Dotenv
มุมมอง 1833 ปีที่แล้ว
Learn how to build an idea generator with HTML, CSS, and JavaScript using a professional web development workflow! In this first part of the tutorial, we'll set up a Github repository, get our template code set up, and install dotenv, a library which will help us make an authenticated call to the API securely. You'll also see your first introduction to Git Flow. Challenge yourself with this int...
7 beginner-friendly tips for HTML debugging
มุมมอง 1.1K3 ปีที่แล้ว
7 beginner-friendly tips for HTML debugging
Create WordPress Gutenberg block variations quickly using WP Env, WP Scripts, and code editor view
มุมมอง 3.1K3 ปีที่แล้ว
Create WordPress Gutenberg block variations quickly using WP Env, WP Scripts, and code editor view
Modern WordPress Development Part 3: Edit and test your first Gutenberg block in a local environment
มุมมอง 2.9K3 ปีที่แล้ว
Modern WordPress Development Part 3: Edit and test your first Gutenberg block in a local environment
Modern WordPress Development Part 2: Use wp scripts to create a starter plugin for Gutenberg blocks
มุมมอง 4.8K3 ปีที่แล้ว
Modern WordPress Development Part 2: Use wp scripts to create a starter plugin for Gutenberg blocks
Modern WordPress Development Part 1: Installing wp env to create a local development environment
มุมมอง 7K3 ปีที่แล้ว
Modern WordPress Development Part 1: Installing wp env to create a local development environment
How to use the pathfinder tool in Adobe Illustrator | Adobe Illustrator Basics
มุมมอง 323 ปีที่แล้ว
How to use the pathfinder tool in Adobe Illustrator | Adobe Illustrator Basics
How to Use the Pen Tool and Width Tool for Hand Drawn Typography in Illustrator
มุมมอง 3343 ปีที่แล้ว
How to Use the Pen Tool and Width Tool for Hand Drawn Typography in Illustrator
Tracing a Hand Drawn Logo in Adobe Illustrator with the Image Trace, Pathfinder, and Smooth Tools
มุมมอง 5033 ปีที่แล้ว
Tracing a Hand Drawn Logo in Adobe Illustrator with the Image Trace, Pathfinder, and Smooth Tools
How to use Image Trace in Adobe Illustrator
มุมมอง 1973 ปีที่แล้ว
How to use Image Trace in Adobe Illustrator
How to Hand-Letter a Logo in Adobe Illustrator Part 1: Lettering on Paper
มุมมอง 663 ปีที่แล้ว
How to Hand-Letter a Logo in Adobe Illustrator Part 1: Lettering on Paper
Creative Layouts in InDesign: Transforms and Direction
มุมมอง 4403 ปีที่แล้ว
Creative Layouts in InDesign: Transforms and Direction
Content-Aware Text Wrapping in InDesign
มุมมอง 7353 ปีที่แล้ว
Content-Aware Text Wrapping in InDesign
Advanced longform typography techniques: Fixing rivers in justified text in InDesign
มุมมอง 41K3 ปีที่แล้ว
Advanced longform typography techniques: Fixing rivers in justified text in InDesign
Longform typography basics: Correcting widows and orphans in InDesign
มุมมอง 8K3 ปีที่แล้ว
Longform typography basics: Correcting widows and orphans in InDesign
Typography basics: What is rag, and how do I improve it in InDesign?
มุมมอง 7K3 ปีที่แล้ว
Typography basics: What is rag, and how do I improve it in InDesign?

ความคิดเห็น

  • @borisstaykov8175
    @borisstaykov8175 14 วันที่ผ่านมา

    Thank you so much! This video opened my eyes!

  • @Meisterilyas_333
    @Meisterilyas_333 2 หลายเดือนก่อน

    Very nice 🎉

  • @Noobinski
    @Noobinski 2 หลายเดือนก่อน

    Life saver. Thank you very much!

  • @sugathganegoda
    @sugathganegoda 2 หลายเดือนก่อน

    Awesome, Thank you, Professor.

  • @justinstewart527
    @justinstewart527 2 หลายเดือนก่อน

    You're awesome!!

  • @Sixxiron
    @Sixxiron 2 หลายเดือนก่อน

    This is a really GREAT video! One of the most thorough tutorials on this subject I've seen. Beyond helpful - THANK YOU!!!

  • @salwatching
    @salwatching 4 หลายเดือนก่อน

    I'm so relieved I caught your tutorial! For years I'd been feeling inadequate, thinking I must be doing something wrong that the 'first pass' was always so riddled with H&J violations. Now I see that fixing them is PART of the craft. Whaaat a relief! So do you feel (pun unintended) justified in asking for a little edit if you encounter stubborn H&Js?

  • @r-e-s-o-n-a-n-t
    @r-e-s-o-n-a-n-t 5 หลายเดือนก่อน

    Wow, thank you so much. Just working through a document and the rivers were driving me bonkers. I went through several tutorials but this one really fixed it perfectly. The document looks absolutely amazing. Thank you!!!

  • @prachi_theofficial
    @prachi_theofficial 5 หลายเดือนก่อน

    helped , thankyou :)

  • @vincentlasserre7484
    @vincentlasserre7484 5 หลายเดือนก่อน

    😀You save my night !! Merci...

  • @penumbral_psithurism
    @penumbral_psithurism 5 หลายเดือนก่อน

    Well, that was a big help, thanks!

  • @PieterHanja
    @PieterHanja 6 หลายเดือนก่อน

    Thank you!

  • @girlintheworld8433
    @girlintheworld8433 6 หลายเดือนก่อน

    I appreciate the useful information. Also, cute hair!

  • @JORICTV
    @JORICTV 6 หลายเดือนก่อน

    To anyone having trouble with video quality: I suggest watching the video in 1080p. Maybe on a TV while you're on your computer following along. Also this video was super helpful, thanks!

  • @lucyaccardo9110
    @lucyaccardo9110 7 หลายเดือนก่อน

    Excellent top quality teaching. 🎉

  • @gamagedotme536
    @gamagedotme536 7 หลายเดือนก่อน

    thanks for sharing your knowledge

  • @lemster909
    @lemster909 9 หลายเดือนก่อน

    hi thanks for the tutorial.. can you also create a tutorial for installing wordpress using lando, docker and composer? thanks

  • @alexwalton4827
    @alexwalton4827 9 หลายเดือนก่อน

    Thanks so much!

  • @LEO-AI
    @LEO-AI 9 หลายเดือนก่อน

    Hey, would you have any recommendations for steps prior to publishing a plugin ? For instance, it's saying that the plugin zip file is over 50mb but I'm not sure which node modules to remove

  • @onyekachilorenz
    @onyekachilorenz 9 หลายเดือนก่อน

    Thank you very much, Prof! This was really helpful!

  • @sgenius0
    @sgenius0 9 หลายเดือนก่อน

    A great video. I generally have used <article> inside my <section> elements and not the other way around. Would you say both are valid usages?

  • @daviddwq4513
    @daviddwq4513 9 หลายเดือนก่อน

    Wow! This is so enlightening! I was doing variation in a very limited way. Thank you so much!

  • @rolandmol
    @rolandmol 9 หลายเดือนก่อน

    Very nice tutorial, but... when you add or delete text in a correction round all the manual tracking within the paragraph has to be done over (it will basically be a mess that you will have to reset first). It's nice to highlight the H&J violations in the Preferences but it's not that the yellow is visible in printouts. It's just under the hood, right? I just stick to a slightly other H&J setting: Word Spacing: 90% 100% 110%. Letter Spacing: -3% 0% +3%. and Glyph Scaling: 97% 100% 103%. And that is just fine for 95% of all text. Way faster. As a bonus I can add discretionary hyphens here and there. That's it.

  • @AvangerRaf
    @AvangerRaf 10 หลายเดือนก่อน

    Much needed information. Thank you so much for this! 🙌🏾

  • @panzagamesplay902
    @panzagamesplay902 10 หลายเดือนก่อน

    Short and meaning

  • @panzagamesplay902
    @panzagamesplay902 10 หลายเดือนก่อน

    Wow short and awesome,easy to understand

  • @Elias-xp3bs
    @Elias-xp3bs 10 หลายเดือนก่อน

    Been seeing some debate on the aside tag. Some say it's suitable for a sidebar, others say not. Any opinions?

    • @ProfessorKExplains
      @ProfessorKExplains 10 หลายเดือนก่อน

      I’d say it depends on the content of the sidebar. If it’s something that could be removed without affecting the meaning of the content around it, but it’s still related, that’s perfect for aside. It’s easiest for me to think of it in magazine layout terms - there’s the main article, but then there’s often some related content. That’s perfect for an aside. So let’s say you have an article on how to build a table, and the sidebar contains general tips and tricks for woodworkers. I would use an aside for that. However, if the sidebar contains links to other pages on the side, like a navigation, or a table of contents with links to headings in the article, I would use nav instead. Sometimes sidebars have mixed information, and in that case, it might be a combination of section, nav, and aside for me. Really depends on the specific content - there’s no one “right” answer in my opinion here.

    • @Elias-xp3bs
      @Elias-xp3bs 10 หลายเดือนก่อน

      Thanks! This cleared up the purpose of the aside tag for me. In my case just a nav would then work better for a sidebar on my project.

  • @kaioqrz
    @kaioqrz 11 หลายเดือนก่อน

    Hey professor. Why haven't you post any video in the last 2 years?

    • @ProfessorKExplains
      @ProfessorKExplains 11 หลายเดือนก่อน

      I’ve been busy teaching! I work a full time job and teach two classes in the evening now, so it’s been a while since I have been able to record anything new. I also had a pipe burst in my house in my home office where I recorded these, so my entire summer (which is usually when I have time to do this sort of thing) was spent getting the floor rebuilt. Luckily I didn’t lose any of my tech, though. This also is a bit of a back burner project for me since I don’t get paid for it - I don’t have enough subscribers to be paid for the ads TH-cam shows. I’ve been wondering if it would make sense for me to move my videos to a less ad-driven platform if I’m not getting paid anyway. Thank you for asking, though! This channel is still on my mind and every time someone comments, I still see it and it still brightens my day. I’ll try to post some sort of update soon just about my normal life. I even got my master’s degree last year! It’s been a long journey and I do want to get back to sharing knowledge here again eventually. 😁

  • @webb-developer
    @webb-developer 11 หลายเดือนก่อน

    this is a great series.

  • @StillOnTrack
    @StillOnTrack 11 หลายเดือนก่อน

    Cool. I've been learning about accessibility with regard to websites but I didn't know there were recommendations out there for longform copy too.

  • @daveyphipps6132
    @daveyphipps6132 11 หลายเดือนก่อน

    Thanks for your tutorial, step by step is so easy to comprehend.👍

  • @iangalli293
    @iangalli293 ปีที่แล้ว

    Adobe thought of the most deranged and dumb way to implement layers and artboards to a program, went and did it. Thanks for your vid, really helpful!

  • @tjuszaa
    @tjuszaa ปีที่แล้ว

    this is what ive looking forrrr, thank you so much for the tutorial lovely

  • @igu642
    @igu642 ปีที่แล้ว

    ❤️

  • @kalanihettige5344
    @kalanihettige5344 ปีที่แล้ว

    Thank you for this video, It actually helped me.

  • @alameenng
    @alameenng ปีที่แล้ว

    Excellent

  • @webb-developer
    @webb-developer ปีที่แล้ว

  • @robeeeeen
    @robeeeeen ปีที่แล้ว

    Hello, I'm getting "Warning: could not find a .wp-env.json configuration file and could not determine if '/home/shams/wordpress/first-block' is a WordPress installation, a plugin, or a theme" Can you help?

    • @ProfessorKExplains
      @ProfessorKExplains ปีที่แล้ว

      Hey - I’m sorry, I haven’t been working in the WordPress space in about a year (switched jobs), so it’s possible this tutorial has gone out of date. Just as some general debugging steps, I would triple check that you’re in the right folder in terminal, and that folder contains the wp-env file and has the right extension. If that doesn’t work, do you have a local WordPress meetup you could stop by? They would be a great resource for a question like this and be able to troubleshoot in a more hands-on way!

  • @keerthanar_suresh
    @keerthanar_suresh ปีที่แล้ว

    Short but deep meaning. I searched the meaning of those tags and I understood simply with shorts .. thanks for uploading such a great videos.

  • @dr.nagarajasharma6729
    @dr.nagarajasharma6729 ปีที่แล้ว

    Nicely explained! While explaining the alternative solution, it is important to discuss the negative effects of them, Thanks for a detailed explanation. 🍮

  • @christopherrimplington3643
    @christopherrimplington3643 ปีที่แล้ว

    how can i install plugins in an existing or new wordpress installation?

  • @mr.shredder5430
    @mr.shredder5430 ปีที่แล้ว

    thanks for sharing, this is what we needed💜

  • @aaronchiusano-mcss-5739
    @aaronchiusano-mcss-5739 ปีที่แล้ว

    Very helpful! You defined everything first and then showed the technical end that made following along easy. Much appreciated!

  • @tee9357
    @tee9357 ปีที่แล้ว

    thanks for this! other people havent really talked about how to use artboards and layers together to organise things. i am used to figma and photoshop which treats these two very differently and i kept getting sooo annoyed at illustrator and low key still do because i hate how it treats layers lol. everything keeps getting mushed together!

  • @davidagbona8869
    @davidagbona8869 ปีที่แล้ว

    Love this, Proessor K!

  • @alessandrogibogini3526
    @alessandrogibogini3526 ปีที่แล้ว

    Hi, thank you for this video I really appreciated it. Do you recommend in general to work with all the screen/device version all in one file (like in this video) or to make a XD file for every screen/device. I'm working on a multi-platform app that goes on Smartphone, tablet, and web, so I'm struggling to find the best way of working.

    • @ProfessorKExplains
      @ProfessorKExplains ปีที่แล้ว

      This is a great question! I would work with all screens in one file. It makes for a large file, but it means that you can take advantage of the prototyping functionality to get a better sense of the user flow as you complete design. If it gets to be unweildly or you’re working with a larger design team, you could split it up by major features or general platform - such as app and web.

    • @alessandrogibogini7456
      @alessandrogibogini7456 ปีที่แล้ว

      Yeah maybe I’ll stick to that, smartphone and tablet (that have the same UI) on one file and pc version (that have a slightly different UI) on another file. THANK YOU VERY MUCH

  • @thedanielefeni
    @thedanielefeni ปีที่แล้ว

    Thanks for the video. There are some cases where the client doesn't allow a discretionary hypen. Do you suggest we just increase the tracking even though it might look a little obvious?

    • @ProfessorKExplains
      @ProfessorKExplains ปีที่แล้ว

      Yeah, in that case there’s not a lot else you can do, and it’s better to preserve readability than try and squish everything. Another option might be to left align if they’re open to it.

    • @thedanielefeni
      @thedanielefeni ปีที่แล้ว

      @@ProfessorKExplains thank you for the reply

  • @linovin_5954
    @linovin_5954 ปีที่แล้ว

    your content is so cool!!

  • @behradbv
    @behradbv ปีที่แล้ว

    Thanks for you video. I think doing micromanagement and overrides on single lines may cause some problems if the text alters. Isn't it so?

  • @floppitommi123
    @floppitommi123 ปีที่แล้ว

    This is soo much useful than touvthink