This course is completely free and will be free forever. It takes a bit of time to prepare and support, so if you'd like to contribute, you can do so at https://paypal.me/tevko. Any contribution helps!
Hundreds of you signed up to learn web development. I could not be more excited and proud of all of you. Please stick with it. This is a difficult course, and a difficult career field, but it's extremely rewarding, high paying, and I'm here to help. Please remember that you need to study every day to be successful. I still practice and aim to get better every day, even though I do this for a living. Since most of us are all on twitter, feel free to use the hashtag #TimTeachesCode to chat about the course, help each other out, or brag about your new skills! There's a lot to digest in these emails, so read carefully!!
Don't forget, you can all contact me whenever you'd like, 24/7 and I'll respond ASAP.
** LESSON 2 **
Hello Friends! In the last lesson, we learned about HTML, which is like the skeleton of a website. Its purpose is to outline the content of a document, and there are several tags you can use for this purpose. HTML allows a browser to understand what sort of content is being presented to the user. If we want our users to get the most out of our websites and applications, we need to ensure our HTML is as descriptive and accessible as possible! Let's take it a step further and update our codepen demo so that the content is more semantic, while adding a few relevant images to our demo.
Study: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
Complete: Add an image or two to the resumè make sure your images have "alt" attributes. Update your HTML to make use of section, article, div, figcaption, figure, main, header, and footer tags (you don't have to use all of these, just the relevant ones). Once you're finished, paste your HTML into the W3C validator, and adjust it until there are as few errors as possible. Continue reading about HTML. There's a lot to learn. What is HTML5? What is a "div" for? Who invented HTML? Who makes new tags? How do browsers understand HTML? What is the W3C?
Did you know? You can view the source of every website you're visiting? Try this out on a few websites, and look at how they structure HTML. You can also "Inspect Element" which makes use of built in browser tools to live edit and debug web pages on the fly!
BONUS: Did you know it's possible to allow the browser to pick the best image size to display based on the type of screen being used to view it? If you'd like, read https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images and try to incorporate this technique into your demo. If you do, let me know, so that I can help you with this technique. Not many courses teach their students about responsive images but it is a skill that will impress employers and enable you to make better, faster websites.
Respond: Reply to the email with a link to the updated codepen and a brief summary of what you've learned about images, as well as what you're going to be studying / reading before the next lesson. What else have you learned about HTML and accessibility?
Notes: Read as much as you can about HTML. There are too many tags to list and they all serve a purpose. Images can be complex. There are various types of images (jpg, gif, png, svg, webp, etc) that accomplish various purposes. These images range in size (kb) and their sizes are important. Learn about these and why they're important. Why do some images take longer to load than others? How do I make my images load faster? Do all browsers support every type of image? These are important questions, and you should google them! Be curious. Have you ever wondered why there are different browsers? What are their differences? Do all browsers display HTML in the same way? Do all browsers support all HTML tags? If I haven't updated my browser in 2 years, will my favorite websites look the same as they do on the latest version?
Lesson 3 will go out next week
--
Tim Evko
Top comments (0)