- 106
- 135 613
Professor K Explains
United States
เข้าร่วมเมื่อ 10 ม.ค. 2010
I’m Ashley Kolodziej, better known as Professor K. I am an interactive creative director by day, and design and web development lecturer at Boston University by night, and I am so excited to learn with you! We’re going to be learning HTML, CSS, JavaScript, and Adobe Creative Cloud applications such as Photoshop, Illustrator, and InDesign together. You’ll also get insight into my personal workflow as a frontend developer, tricks for handling web design challenges such as accessibility like a pro, and practice improving your problem solving skills with code alongs.
Believe it or not, I studied fine art in college and learned everything I know on the job. I want you to know if I can do it, you certainly can too. Take a chance. Let’s give it a try together. Watch these videos, and then take these techniques and try to make something on your own. Before you know it, you may find yourself as passionate about web design and development as I am. Let’s do this! 💪
Believe it or not, I studied fine art in college and learned everything I know on the job. I want you to know if I can do it, you certainly can too. Take a chance. Let’s give it a try together. Watch these videos, and then take these techniques and try to make something on your own. Before you know it, you may find yourself as passionate about web design and development as I am. Let’s do this! 💪
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
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?
Thank you so much! This video opened my eyes!
Very nice 🎉
Life saver. Thank you very much!
Awesome, Thank you, Professor.
You're awesome!!
This is a really GREAT video! One of the most thorough tutorials on this subject I've seen. Beyond helpful - THANK YOU!!!
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?
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!!!
helped , thankyou :)
😀You save my night !! Merci...
Well, that was a big help, thanks!
Thank you!
I appreciate the useful information. Also, cute hair!
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!
Excellent top quality teaching. 🎉
thanks for sharing your knowledge
hi thanks for the tutorial.. can you also create a tutorial for installing wordpress using lando, docker and composer? thanks
Thanks so much!
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
Thank you very much, Prof! This was really helpful!
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?
Wow! This is so enlightening! I was doing variation in a very limited way. Thank you so much!
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.
Much needed information. Thank you so much for this! 🙌🏾
Short and meaning
Wow short and awesome,easy to understand
Been seeing some debate on the aside tag. Some say it's suitable for a sidebar, others say not. Any opinions?
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.
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.
Hey professor. Why haven't you post any video in the last 2 years?
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. 😁
this is a great series.
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.
Thanks for your tutorial, step by step is so easy to comprehend.👍
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!
this is what ive looking forrrr, thank you so much for the tutorial lovely
❤️
Thank you for this video, It actually helped me.
Excellent
✅
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?
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!
Short but deep meaning. I searched the meaning of those tags and I understood simply with shorts .. thanks for uploading such a great videos.
Nicely explained! While explaining the alternative solution, it is important to discuss the negative effects of them, Thanks for a detailed explanation. 🍮
how can i install plugins in an existing or new wordpress installation?
thanks for sharing, this is what we needed💜
Very helpful! You defined everything first and then showed the technical end that made following along easy. Much appreciated!
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!
Love this, Proessor K!
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.
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.
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
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?
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.
@@ProfessorKExplains thank you for the reply
your content is so cool!!
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?
This is soo much useful than touvthink