Professor K Explains
Professor K Explains
  • 106
  • 128 561
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
Переглядів: 482

Відео

How to add images and links to HTML
Переглядів 3,1 тис.2 роки тому
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?
Переглядів 1472 роки тому
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,1 тис.2 роки тому
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
Переглядів 2062 роки тому
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
Переглядів 543 роки тому
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
Переглядів 573 роки тому
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: ua-cam.com/play/PLFYdvD6EeUNmufgrXY0Gbhz_Fbh3RZi-E.html Follow along by cloning or fo...
How to Reveal Advanced Tools in Adobe Illustrator
Переглядів 1,6 тис.3 роки тому
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
Переглядів 943 роки тому
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!
Переглядів 1493 роки тому
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
Переглядів 983 роки тому
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
Переглядів 1803 роки тому
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
Переглядів 9683 роки тому
7 beginner-friendly tips for HTML debugging
Create WordPress Gutenberg block variations quickly using WP Env, WP Scripts, and code editor view
Переглядів 3,1 тис.3 роки тому
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,8 тис.3 роки тому
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,7 тис.3 роки тому
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
Переглядів 7 тис.3 роки тому
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
Переглядів 2903 роки тому
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
Переглядів 4553 роки тому
Tracing a Hand Drawn Logo in Adobe Illustrator with the Image Trace, Pathfinder, and Smooth Tools
How to use Image Trace in Adobe Illustrator
Переглядів 1863 роки тому
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
Переглядів 4183 роки тому
Creative Layouts in InDesign: Transforms and Direction
Content-Aware Text Wrapping in InDesign
Переглядів 7013 роки тому
Content-Aware Text Wrapping in InDesign
Advanced longform typography techniques: Fixing rivers in justified text in InDesign
Переглядів 38 тис.3 роки тому
Advanced longform typography techniques: Fixing rivers in justified text in InDesign
Longform typography basics: Correcting widows and orphans in InDesign
Переглядів 7 тис.3 роки тому
Longform typography basics: Correcting widows and orphans in InDesign
Typography basics: What is rag, and how do I improve it in InDesign?
Переглядів 6 тис.3 роки тому
Typography basics: What is rag, and how do I improve it in InDesign?

КОМЕНТАРІ

  • @sugathganegoda
    @sugathganegoda 5 днів тому

    Awesome, Thank you, Professor.

  • @justinstewart527
    @justinstewart527 14 днів тому

    You're awesome!!

  • @Sixxiron
    @Sixxiron 15 днів тому

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

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

    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?

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

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

    helped , thankyou :)

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

    😀You save my night !! Merci...

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

    Well, that was a big help, thanks!

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

    Thank you!

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

    I appreciate the useful information. Also, cute hair!

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

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

    Excellent top quality teaching. 🎉

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

    thanks for sharing your knowledge

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

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

  • @alexwalton4827
    @alexwalton4827 7 місяців тому

    Thanks so much!

  • @LEO-AI
    @LEO-AI 7 місяців тому

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

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

  • @sgenius0
    @sgenius0 7 місяців тому

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

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

  • @rolandmol
    @rolandmol 7 місяців тому

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

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

  • @panzagamesplay902
    @panzagamesplay902 8 місяців тому

    Short and meaning

  • @panzagamesplay902
    @panzagamesplay902 8 місяців тому

    Wow short and awesome,easy to understand

  • @Elias-xp3bs
    @Elias-xp3bs 8 місяців тому

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

    • @ProfessorKExplains
      @ProfessorKExplains 8 місяців тому

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

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

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

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

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

    this is a great series.

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

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

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

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

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

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

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

    ❤️

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

    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

    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

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

    This was a really helpful tutoorial, and exactly what i needed. In other ones authors just showed how to create artboards but they didn't explain how to manage layers and objects in them. Big thank you!

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

    Sry. Professor. You can't follow the video because the options settings are way too small and thus unreadable.

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

      Bro trying to watch youtube tutorials on a flip phone screen 😂

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

    You covered everything the other videos I watched did not. The "justify all lines except for the last line" corrected 95% of my issues. Tracking took care of the rest. Thanks again for making this video!!