What’s New in HTML5

Introduction

HTML5 brought in a lot of nice new features, many geared specifically towards giving webpages the ability to display media and interactive features more easily. The downside is that there are still browser compatibility issues with some of that functionality, but that will get sorted over time. Another set of new features is the use of more semantic tags in your markup so you don’t need to put a div around everything (you can use the aside or footer etc).

Learning Objectives

  • What are semantic tags and how are there more of them in HTML5?
  • What does the canvas element do for you?
  • Seriously, why is canvas potentially amazing?
  • What are the new video control features?
  • What are the new audio control features?
  • What is local storage and how is it used?
  • What are data attributes and how are they used?
  • For people who have already done Rails and maybe some JS, how can data attributes be used to pass off data from your back end to your front end?
  • What are the compatibility trade-offs of the new features?
  • Are there any performance trade-offs with the new features?
  • How does HTML5 fix the problem of needing Flash installed to play movies on many devices?

Study

  1. Check out Dive into HTML5, which is a website and book on the cool stuff about HTML5.

  2. Look over What’s new in HTML5 from About

Additional Resources


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 23.10.2020

Project: Embedding Images and Video

Introduction

Back in Web Development 101 you built Google’s homepage. Students consistently report that to be a fun project but they also say that it’s more difficult than it looks. In this course, you’ll build so many webpages that you’ll laugh at something as simple as Google.com.

The goal here isn’t to produce an exact replica of the YouTube video page, but to focus on making the media elements show up. That means two things — embedding the YouTube video player into the page so it actually plays and showing little thumbnail images along the right side.

How far you go from there in terms of styling is up to you — some of you will already be more comfortable with CSS than others, so knock yourself out.

There are other elements on the YouTube page which are produced with Javascript and you don’t need to worry about them — basically, anything that changes the page by clicking on it is wired up using Javascript. An example is the "Show more" link below the description, which dynamically expands to show more. Again, don’t worry about these dynamic elements!.

Also, don’t worry about making the comment form work properly… your goal is to make the page look similar and display video.

Assignment

  1. Follow the instructions atop the Google Homepage project to set up a Github repository for this project (of course you’ll need to change the title).

  2. Create a blank HTML document.

  3. Come up with a plan — which sections of the page should be grouped together (e.g. the navigation bar vs the video vs the sidebar etc)?

  4. Create empty semantic HTML elements to enclose those sections.

  5. Use basic CSS to size and position them appropriately on the page. It may be helpful to make their backgrounds different colors so you can see the different sections. Don’t forget to use your browser’s developer tools (right click on the page, click "inspect element")!

  6. Now let’s start filling in those divs with content by creating the navbar.

  7. Watch this YouTube video on embedding a YouTube video in a webpage.

  1. Embed a YouTube video of your choice into your page.

  2. Next, build the sidebar section where previews of suggested videos show up. Obviously don’t worry about generating those previews… just grab some thumbnail-sized images and plug them in.

  3. Next, finish up by filling in some of the elements below the video — the title, description and number of views. Ignore the icons (many of them are produced using sprites or more advanced techniques so you won’t be able to just grab them by copying them).

  4. Push your solution up to a private Github repo, add your instructor(s) as collaborator(s) and submit the URL in the Quiz below.


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 23.10.2020

Working with Images, Video and Other Media

Introduction

Images and other media are an essential part of providing a good user experience and they are ubiquitous on websites today. They are also your biggest, clunkiest set of assets and can ruin your page load times if you’re not careful. When your site is slow, the easiest way to get it running faster is to optimize your image sizes and filetypes.

There is also a big difference between each of the image filetypes, so pay attention to the use cases for each. Remember, the trade-offs are usually image size vs quality (though sometimes you want animation or clear backgrounds too), so figure out the differences between gif and jpg and bmp and png and svg.

Learning Objectives

  • What are common attributes of image tags?
  • How do you load a smaller version of an image?
  • How do you get an image to fill up an element?
  • How do you save load times by using appropriately sized images?
  • When should you store images externally vs on your server?
  • What are the main types of image files and how are they different?
  • Which file types let you use animation?
  • Which file types let you use transparent colors?
  • Which file types are best for photos? Graphics?
  • Which file type lets you scale an image as big as you want without affecting file size (and why)?
  • What’s the difference between raster and vector images?
  • How do you add video to your page? (please don’t autoplay…)
  • How do you add audio to your page? (please don’t autoplay…)

Study

  1. Read Shay Howe on Images and Media (includes CSS)

  2. Read about the Differences between image types (see first answer) from SO

  3. Watch this YouTube video about adding video to your page:

  1. Glance over Raster vs Vector images explained simply by YouTheDesigner.com. The pictures are broken in the article, but here is a short YouTube video illustrating the difference:

Don’t worry if you don’t absorb it all — you’ll have time to pick it up later.

  1. Read and learn all about File Paths in HTML.

Additional Resources


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 23.10.2020

Linking Internal and External Pages

Introduction

Links are the glue holding the web together, so make sure you understand how to properly link to external websites AND internal files.

Learning Outcomes

  • What’s the difference between internal links (/somepage) and external links (http://www.somesite.com/somepage)?

  • When on a webpage should you use the full URI (with the http://yoursite.com/somepath) and when should you use the relative path (/somepath)?

  • How do you navigate the document tree with links (../../someotherpage)?

  • How do you open links in external windows?

  • What are all the possible pseudo-states (e.g. :hover) of a link and when are they actually activated? How do you change styles based on them?

Study

  1. Read Lena Shore’s explanation of the difference between absolute and relative paths.

  2. Browse Boogie Jack’s article on link paths.

  3. Read Six Revisions’ article on link pseudo-classes .

Additional Resources


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 23.10.2020

HTML Basics

Introduction

Most of this should be review since you’ve already completed the Web Development 101 HTML/CSS Lesson (Right??) but it’s a good idea to make sure you’ve got it covered so you make sure you’re starting from a strong base. It’s impossible to separate HTML from CSS, so there will be some overlap before we get heavily into the CSS in later sections.

Learning Objectives

  • How is an HTML5 document structured?
  • What are elements/tags?
  • What are element attributes?
  • How do you link to external files?
  • When should you use IDs vs Classes?
  • What attributes are required by image and links for them to be effective and accessible?
  • Where should your CSS live?

An important note about absolute and relative paths

Let’s say that you have the following structure on your development server:

/index.html
/images/protocol.png

The following image tag is placed in the web page:

<img src="/images/protocol.png" alt="protocol layer image">

The above absolute path will work, and the image will be displayed when the site is being served from a root folder, for example: http://127.0.0.1/index.html

The image link will be converted to:

  • Domain + Absolute Path;
    • Domain: http://127.0.0.1
    • Absolute Path: /images/protocol.png

Result: http://127.0.0.1/images/protocol.png

Where things can go wrong

If the website is served from a sub folder (let’s say we move the index.html and the images/ folder in a new folder name client) this absolute path will not work and the image will not be displayed.

For example if the website is served from the sub folder client:

/client/index.html
/client/images/protocol.png

The path /images/protocol.png will once again be loaded this way:

  • Domain + Absolute Path;
    • Domain: http://127.0.0.1
    • Absolute Path: /images/protocol.png

Since there is no images folder in the root web folder, the image will not be loaded, as the file will not be found.

The correct URL to load the image, would be: http://127.0.0.1/client/images/protocol.png

Solution?

In this case, you can use a relative path instead:

<img src="images/protocol.png" alt="protocol layer image">

The image link will be converted to:

  • Domain + Current Path + Relative Path;
    • Domain: http://127.0.0.1
    • Current Path: /client/
    • Relative Path: images/protocol.png

Result: http://12.0.0.1/client/images/protocol.png

Keep in mind that folder and file names are case sensitive in URLs! Domain names are not.

References and resources

Absolute vs Relative Paths

Study

  1. Read Shay Howe’s Introduction to Terminology & Syntax

  2. Read Shay Howe on the HTML Basics

  3. Read Shay Howe on Best Practices

  4. Read Absolute vs Relative Path – Which Should You Be Using?

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 02.01.2021

CONTRIBUTORS

Introduction

Introduction

In this course, you’ll learn HTML5 and CSS3, the foundations of building and styling modern web pages. We’ll also dip into design and UX because it’s difficult to call yourself a full stack developer without having at least a cursory appreciation for the decisions that produce the page itself. If you’re taking this course because you want to build your own websites, that section will be even more helpful.

If you haven’t completed it already, the first place to start is the Web Development 101 lesson on HTML and CSS, which covers a lot of ground so you can get up to speed on the basics. In fact, most of what you need to know to build effective websites is covered there.

This course is designed to follow that introductory material with more depth so you can start to flex your design muscles to produce more appealing and easy-to-use websites. Luckily for you, there is an enormous amount of resources available on the web to learn front end development, so if you ever get stuck, Google is your friend.

Format

We’ll start by covering all the building blocks of HTML from lists to forms before diving deeper into CSS, Design, and Frameworks.

There’s a lot to cover but it’s been broken up into bite-sized lessons and their accompanying projects. The projects will give you a chance to apply what you’ve learned and to show what you’re capable of. After a few of them, you’ll really start getting the hang of things.

In each lesson:

  1. We’ll introduce the topic briefly and provide you with a list of things you should pay attention to.

  2. You’ll be asked to do readings, watch videos, do online courses or otherwise consume content to initially learn the material.

  3. Every few lessons you will be asked to build a larger project, in this case they are almost exclusively rebuilding sites that you’re probably familiar with. These are best done with a friend.

  4. Finally, we’ll include additional helpful resources and other potentially useful tidbits at the end of each lesson.

Enough talk, get learning!


Material based on Erik Trautman | The Odin Project
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack? Search for: Kostas Minaidis (kostasx)

UPDATED: 23.10.2020