Events

Introduction

Now that we have a handle on manipulating the DOM with JavaScript, the next step is learning how to make that happen dynamically, or on demand! Events are how you make that magic happen on your pages. Events are actions that occur on your webpage such as mouse-clicks or keypresses, and using JavaScript we can make our webpage listen and react to these events.

There are three primary ways to go about this: you can attach functions attributes directly on your HTML elements, you can set the "on_event_" property on the DOM object in your JavaScript, or you can attach event listeners to the nodes in your JavaScript. Event listeners are definitely the preferred method, but you will regularly see the others in use, so we’re going to cover all three.

Learning Objectives

  • How do "events" and "listeners" work? What are three ways to use events in your code?
  • How does "bubbling" work?

We’re going to create 3 buttons that all alert "BUTTON" when clicked. Try them all out using your own HTML file, or using something like CodePen.

Method 1 (Not recommended)

<button onclick="alert('Hello World')">Click Me</button>

This solution is less than ideal because we’re cluttering our HTML with JavaScript. Also, we can only have 1 "onclick" event per element.

Method 2 (Not recommended)

<!-- the html file -->
<button id="btn">Click Me</button>
// the JavaScript file
const btn = document.querySelector('#btn');
btn.onclick = () => alert("Hello World");

(need to review arrow functions? Arrow Functions Basics)

This is a little better. We’ve moved the JS out of the HTML and into a JS file, but we still have the problem that a DOM element can only have 1 "onclick" property.

Method 3 (Recommended)

<!-- the html file -->
<button id="btn">Click Me Too</button>
// the JavaScript file
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  alert("Hello World");
});

Now, we maintain separation of concerns, and we also allow multiple event listeners if the need arises. Method 3 is much more flexible and powerful, though it is a bit more complex to set up.

Note that all 3 of these methods can be used with named functions like so:

<!-- the html file -->
<!-- METHOD 1 -->
<button onclick="alertFunction()">CLICK ME BABY</button>
function alertFunction() {
  alert("YAY! YOU DID IT!");
}

// METHOD 2
btn.onclick = alertFunction;

// METHOD 3
btn.addEventListener('click', alertFunction);

Using named functions can clean up your code considerably, and is a really good idea if the function is something that you are going to want to do in multiple places.

With all three methods we can access more information about the event by passing a parameter to the function that we are calling. Try this out on your own machine:

btn.addEventListener('click', function (e) {
  console.log(e);
});

Note that function (e) is a callback from addEventListener. Further explanation of callbacks can be found HERE.

The e in that function is an object that references the event itself. Within that object you have access to many useful properties and functions such as which mouse button or key was pressed, or information about the event’s target – the DOM node that was clicked.

Try this:

btn.addEventListener('click', function (e) {
  console.log(e.target);
});

and now this:

btn.addEventListener('click', function (e) {
  e.target.style.background = 'blue';
});

pretty cool eh?

Attaching listeners to groups of nodes

This might seem like a lot of code if you’re attaching lots of similar event listeners to many elements. There’s a few ways to go about doing that more efficiently. We learned above that we can get a nodelist of all of the items matching a specific selector with querySelectorAll('selector'). In order to add a listener to each of them we simply need to iterate through the whole list like so:

<div id="container">
    <button id="1">Click Me</button>
    <button id="2">Click Me</button>
    <button id="3">Click Me</button>
</div>
// buttons is a node list. It looks and acts much like an array.
const buttons = document.querySelectorAll('button');

// we use the .forEach method to iterate through each button
buttons.forEach((button) => {

  // and for each one we add a 'click' listener
  button.addEventListener('click', () => {
    alert(button.id);
  });
});

This is just the tip of the iceberg when it comes to DOM manipulation and event handling, but it’s enough to get you started with some exercises. In our examples so far we have been using the ‘click’ event exclusively, but there are many more available to you.

Some useful events include:

  • click
  • dblclick
  • keypress
  • keydown
  • keyup

You can find a more complete list with explanations of each event on this page.

Avoiding Confusion

As you’ve seen, you can define an event handler in 3 different ways.

  1. Using the addEventListener method (Recommended)
document.querySelector(".box").addEventListener( "click", function( event ){ ... });
document.querySelector("form").addEventListener( "submit", function( event ){ ... });
document.body.addEventListener( "keyup", function( event ){ ... });
  1. Using the on<EVENTNAME> property syntax (Not recommended)
document.querySelector(".box").onclick = function( event ){ ... };
document.querySelector("form").onsubmit = function( event ){ ... };
document.body.addEventListener.onkeyup = function( event ){ ... };
  1. Using an attribute with the on<EVENTNAME> directly in an HTML element (Not recommended):
<div class="box" onclick="clickHandler()">Click me</div>
<form onsubmit="submit()">
    <!-- CONTENT -->
</form>
<body onkeyup="handleKey()">

Events in the first syntax are used like this (nouns): ‘click’, ‘submit’, ‘change’, ‘scroll’, etc.

While using the 2nd syntax, are prefixed with the ‘on’ keyword: ‘onclick’, ‘onsubmit’, ‘onchange’, ‘onscroll’, etc.

The second syntax corresponds to element properties and should not be confused with the event names used in the first case.

Additional Resources

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)

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

UPDATED: 23.02.2021

Git Basics – Part I

Reading Time

Until you understand the concepts upon which Git is built, you’ll feel like a stranger in a foreign land., Tom Preston-Werner, author of The Git Parable

"The following parable will take you on a journey through the creation of a Git-like system from the ground up. Understanding the concepts presented here will be the most valuable thing you can do to prepare yourself to harness the full power of Git.

The concepts themselves are quite simple, but allow for an amazing wealth of functionality to spring into existence. Read this parable all the way through and you should have very little trouble mastering the various Git commands and wielding the awesome power that Git makes available to you."

Download and read the The Git Parable

Reading time: 30 to 60 minutes.

Study & Practice Time

Take a 5 to 10 minute break before diving into the next video, as you will not only be learning about the basics of Git and version control, but you will also be practicing these concepts on your own Git repository.

Although the video duration is close to 15 minutes, this session will probably take more than 1 hour (or even more), since you will be practicing along with Colt Steele.

We suggest that you run the commands through the intergrated terminal of VSCode. (Tip: Press Ctrl+J to open/close the terminal while in VSCode)

Duration: 16 minutes

Learn Git in 15 Minutes

Additional Resources

This section contains helpful links to other content. It isn’t required, but you should consider it supplemental if you need to dive deeper into Git and Version Control.

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, clicking the small arrow to the left of the question will reveal the answers.

What kind of program is Git?
    • Git is a version control program.
What are the differences between Git and a text editor in terms of what they save and their record keeping?
    • A text editor can only make and save changes to a file.
    • Git tracks changes to the files and their contents over time.
Does Git work at a local or remote level?
    • Git works on a local level. Any changes you make are saved locally with Git.
Does GitHub work at a local or remote level?
    • GitHub works on a remote level. You must push your local changes (using Git) to Github.
Why is Git useful for an individual developer?
    • Git is useful for creating snapshots of your work. If you realize halfway through that you’ve messed up, it’s much easier to reset.
Why are Git and GitHub useful for a team of developers?
    • Git and GitHub are useful for teams because they can merge code together. A developer can work on one part of the code while a second developer works on another part. They can then use Git and GitHub to easily combine their changes.
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: 25.10.2020

Visual Studio Code

Getting to know the most popular Code Editor

Before diving into the world of Web development, it’s always an important step to get to know our tools.

Since, Visual Studio Code is the editor of choice for this course, take some time to familiarize yourself with the software that will help you build software.

Watch the following video, but try pausing once in a while and test the features described in the video in your version of VSCode.

Duration: Approx. 60~90 minutes

Live Server Extension Set Up

At this point you should be familiar with VSCode, be able to install and uninstall Extensions, configure various aspects and features of the application and work with code files. Also, you should have the Live Server extension installed on VSCode.

Take a look at the next video, in order to understand how you can work with the Live Server extension as we are going to use this setup a lot in the following lessons.

Duration: 2 minutes


Tip: If you are looking for a quick and easy way to position your application windows next to each other, for example having VSCode taking up the left 50% of your screen and the Browser taking up the other right half 50%, you can use some of the shortcuts presented in the videos below (Windows 10).

Launching from the command line (Mac)

Read the following guide on how to setup launching VSCode from the command line on a Mac.

Additional Resources

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: 22.01.2021

CONTRIBUTORS:

Set up all the necessary Services & Accounts

Here is a list of online services and platforms on which you must have an account on.

Please proceed to the checklist and register for a new account on each service. After completing the steps, make sure to send the account names and URLs (e.g. profile) to your instructor.

IMPORTANT: Make sure to use a descriptive, readable username or account name, as this will be your professional profile. For example, avoid usernames such as @mard4354 and prefer/choose ones such as @mary_douglas.


Gmail

By creating a Gmail account you are going to be able to use a multitude of web services provided by Google, such as YouTube, Google Maps, Google Docs, etc.

You will also be using this Gmail account to authenticate yourself with other third-party services, bypassing the time-consuming registration process.

GitHub

A service providing version control for our code. This is a must!

Also, GitHub allows you to register or sign-up with one-click in various services.

Make sure to take good care of your GitHub profile as it will be one of the first stops where employers, recruiters and companies will evaluate your online presence and experience.

Example of a bad GitHub profile page:

Bad GitHub profile page

Example of an awesome GitHub profile page:

cassidoo GitHub profile page

Try to avoid selecting usernames that look akward and unprofessional, e.g. kx345, funny_joe, etc. You probably want to pick a username according to your real name: david_malan, john_resig, etc.

StackOverflow

Join one of the largest communities on the Internet, ask questions, seek for help and contribute.

(You can register with your GitHub account here –recommended)

LinkedIn

We need an account to look professional and also access their learning resources.

Netlify

One of the best hosting platforms out there.

(You can register with your GitHub account here –recommended)

Frontend Mentor

Improve your front-end coding skills by building real projects

(You can register with your GitHub account here)

Codepen.io

An online coding environment. You can easily create a new Code Pen, write some HTML, CSS and JavaScript, and share the code with the rest of the world through a single URL.

Codesandbox.io

An online coding environment.

(You can register with your GitHub account here with just one-click)

Loom

With Loom you’ll be able to quickly take screen recordings, and use it to share your code and relevant bugs with your mentors/instructors and the rest of the team and present your assignments and applications.

When recording using Loom, try to zoom in as much as possible on the application you are using, e.g. code editor, terminal, the browser, etc. in order for the instructors to have a clear and sharp view of your window.

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: 25.10.2020

Setting up Ubuntu/Windows Dual-Boot


IMPORTANT: You can skip this lesson.

Read this entire section before starting

Dual-booting provides two operating systems on your computer that you can switch between with a simple reboot. One OS will not modify the other unless you explicitly tell it to do so. Before you continue, be sure to back up any important data and to have a way to ask for help. If you get lost, scared, or stuck, we’re here to help in the Slack forum.

Step 1: Download Ubuntu

First, you need to download the version of Ubuntu you want to install on your computer. Ubuntu comes in different versions ("flavors"), but we suggest the standard Ubuntu. If you’re using an older computer, we recommend Xubuntu. Be sure to download the 64-bit version of Ubuntu or Xubuntu.

Step 2: Create a Bootable Flash Drive

Next, follow this guide to create a bootable flash drive so that you can install Ubuntu on your hard drive. If you don’t have a flash drive, you can also use a CD or DVD.

Note: You can use this method to try out different flavors of Ubuntu if you’d like. These images allow you to try out different flavors without committing to an installation. Be aware that running the OS from a flash drive will cause the OS to be slow and can decrease the life of your flash drive.

Step 3: Install Ubuntu

Step 3.1: Boot from the Flash Drive

First, you need to boot Ubuntu from your flash drive. The exact steps may vary, but in general, you will need to do the following:

  • Insert the flash drive into the computer.
  • Reboot the computer.
  • Select the flash drive as the bootable device instead of the hard drive.

For example, on a Dell computer, you would need to plug in the flash drive, reboot the computer, and press the F12 key while the computer is first booting up to bring up the boot menu. From there, you can select to boot from the flash drive. Your computer may not be exactly the same, but Google can help you figure it out.

Step 3.2: Install Ubuntu

If you would like to test out the version of Ubuntu on the flash drive, click ‘Try me’. When you have found a flavor of Ubuntu you like, click ‘Install’ and continue to the next step.

Installing Ubuntu is where the real changes start happening on your computer. The default settings are mostly perfect, but be sure to "Install Ubuntu alongside Windows" and change the allocated disk space allowed for Ubuntu to 30 GB (or more if you can).

For step-by-step instructions, please follow this installation guide from the creators of Ubuntu.

A note to those who are wondering why they’re being asked to install an entire new operating system

Why is everyone ‘forced’ to switch to Linux or macOS for development? Are there no web developers out there who use Windows as their main operating system?

The answer to that question is: well, not that many. One of the reasons is that Ruby (on Rails) and Node.js, popular backend technologies taught by The Odin Project and widely used in the larger web development community, are open source projects that explicitly expect to run on an open-source (UNIX-based) platform. And while Apple’s operating systems have all included the XNU kernel, originally based on the FreeBSD flavor of UNIX since the transition from System 9 to Mac OS X in 2001, Microsoft has only recently commited to embracing open source and providing more support for the way people approach web development today.

One of the biggest features added in Windows 10 was the Windows Subsystem for Linux (WSL), which is a Linux command line within Windows. Setting up a development environment inside WSL is not beginner friendly, though, which is why we choose not to recommend and/or support this approach. All instructions you encounter here will assume you’re running either MacOS or Linux. Using WSL with these instructions may cause problems we are not able to help you resolve.

We do have great support for Linux/MacOS if you get stuck, so please give it a shot!

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: 21.12.2020

Conclusion

That was quite a journey. Take a second and reflect on the fact that you’ve just learned the basics of at least three different languages and, if you had to, you could probably hack together a web page on your own already.

You should be fairly comfortable typing commands into your computer’s command line and you should understand what happens when you enter a web address into your browser and it returns a functioning page. You should be able to create a basic web page and make it do some basic things with JavaScript. You should understand the purpose of backend code and how frameworks make it easier to write clean and maintainable code. Finally, you should have a clear understanding of how all this fits together in your future as a builder of web applications.

With what you know already, you could start putting together some basic websites or strike out to increase your knowledge on your own. However, we’re here to help you get a lot further than that, to the point where you can confidently build a full-featured and scalable web application, whether on your own or working as a developer in a top-tier tech company.

You’ve come a long way up the learning curve but there is so much more cool stuff that you’ll learn to do!

Buckle up, because this is only the beginning. Now it’s time to delve deeper into the areas covered by Web Dev 101. There are some fantastic projects in the courses that follow which will challenge you to the limit, but you’ll come out the other side ready to go and make your mark in the programming world.

The journey has just begun!

Google Project: HTML/CSS

Introduction

For this mini-project, you’ll deconstruct an existing web page and rebuild it. Don’t worry if the links don’t go anywhere and the search box doesn’t do anything when you submit it. The goal is to start thinking about how elements get placed on the page and roughly how they get styled and aligned. For some of you, this may be the first time you’ve actually tried to "build" something in HTML (very exciting!).

Using the browser’s developer tools (right clicking something on the page and clicking "inspect element" will get you there) will be your best friend. Build the page in a .html text file and open it in your browser to check it out. We suggest you use VSCode and the Live Server extension to launch your web page to the browser. Alternatively, you can try CodePen or jsfiddle.net).

Try These Before Starting

These skills will be helpful for you when you start building. Either try them yourself or at least make sure you know how to do it:

  1. Two ways to move a div around on the page
  2. Stick a div onto the bottom or top of the page
  3. Identify the background color of an existing webpage
  4. Grab the URL for an image from an existing webpage
  5. Center an element horizontally
  6. Identify three ways you can include your CSS styles in a page
  7. Understand how to use classes and ids to target CSS at specific elements on the page
  8. Build a very basic form (even if it doesn’t "go" anywhere)

Assignment

Instructions for the assignment can be found here.

Additional Resources

If you still feel shaky on your understanding of HTML and CSS, that’s okay! You don’t need to be an expert by any means yet. These resources should help if you want to shore up your understanding of things:

  • If you want to see the art of CSS, check out the CSS Zen Garden, which collects submissions that use identical HTML and modify only the CSS but turn out wildly different (and beautiful).

  • Read through Shay Howe’s HTML&CSS Tutorial. Lesson 1 gives a solid overview and you can do the whole thing for a more in-depth understanding.

  • Learn more about GitHub using this tutorial or read more in this article.


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: 01.12.2020

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

Developer Tools

Introduction

All of the most popular modern web browsers include a suite of tools designed to help with the development of websites. They are sometimes referred to as the web inspector. These tools allow you to inspect the HTML, CSS, JavaScript and much more on websites you visit and build.

Why do you need to know how to use developer tools?

Knowing how to use your browser’s developer tools is an indispensable skill for a web developer. They allow you to easily and quickly track down the cause of issues and bugs, like problems with layout or other CSS hiccups. What might have taken an hour or even a few hours to track down and fix without the use of these tools often takes a matter of minutes or even seconds with the help of developer tools.

As you will come to see in the assignments, much, much more can be done with developer tools other than debugging CSS issues. They provide you with an incredibly powerful assortment of useful tools that will save you a lot of frustration and time as you develop your own websites.

Although they offer you so many useful capabilities, learning how to use the developer tools isn’t that difficult. It can feel clunky the first few times you use them, but with a little practice, you will soon find yourself comfortably using them to experiment and fix bugs with ease on your web pages.

Learning Objectives

Make sure you can do each of the following once you have finished the assignments:

  • You can open the developer tools in your browser.
  • You can select a specific HTML element on your page with your browser’s developer tools.
  • You can use developer tools to experiment with the CSS on specific elements of a web page.

Assignment

  1. Watch the next video that goes over the most useful features of the Chrome DevTools in some detail.

Duration: 11 minutes

  1. Watch the next awesome tutorial from LearnCode.academy on how to use developer tools effectively when working with your CSS. It talks a bit about Bootstrap, which you may not know about yet. Don’t worry about it at this point; just check out the stuff he’s doing to CSS in the DevTools. In particular, editing CSS in the browser in real time is a serious productivity booster compared to using your text editor and continuously refreshing to see the changes.

Duration: 12 minutes

Take a 10 to 15 minutes break and then complete the following interactive tutorials:

  1. Complete the following interactive tutorial to learn the basics of viewing and changing a page’s DOM using Chrome DevTools: Get Started With Viewing And Changing The DOM

  2. Complete the following interactive tutorial to learn the basics of viewing and changing a page’s CSS using Chrome DevTools: Get Started With Viewing And Changing CSS

  3. Learn about the Chrome Code Coverage Tool and how to spot and remove unused CSS and JavaScript code.

Here’s video showing how you can use the Code Coverage and spot unused CSS:

Duration: 5 minutes

Tips

While making changes to CSS and JavaScript files that are loaded via the link and script tags, it is advised to do a Hard-Reload (or Hard-Refresh as it is sometimes called) in order for the updated resources to load. If you are not seeing the expected results on your browser, even though you’ve update your CSS styling or JavaScript code, it might be that you haven’t saved the changes or that the cached versions of the CSS and JS files are still loaded in the browser.

There’s a nice setting in the Developer Tools (Chrome/Brave) that disables caching while the DevTools are open.

Disable Cache

UPDATED: 19.01.2021

Contributors:

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)

Feedback

  • Is there anything we can help with up to this point? Do you have something to suggest about this chapter? Let us know in the comments below.

HTML & CSS Basics

Introduction

HTML is the markup that contains all the actual stuff that a web page has. All the text on this page you’re reading right now lives inside HTML tags that tell your browser how to order the content on the page. Go on, right click any element on the page and choose "Inspect Element" to open up your browser’s Developer Tools and it will show you the structure of the page.

inspect HTML

CSS tells the browser if you want to display any of those tags a particular way, for instance, turning its background blue and pushing it a little to the left. In your Developer Tools, you can see the CSS styles in another panel, usually showing which specific properties were inherited from which lines of CSS.

styles panel

Learning Objectives

  • Why do we separate HTML and CSS?
  • What are classes and IDs (and how are they different)?
  • What are elements?
  • What are tags?
  • What are attributes?
  • What are forms?
  • What is a div?
  • What are selectors?
  • What are properties?
  • What are values?
  • What is the "query string" in a URL and what does it do?
  • What is the difference between "pixels" and "ems"?
  • How do CSS styles for a particular element get inherited? i.e. how does an element get its "default" styles?
  • What are two CSS attributes you can change to push an element around on the page?
  • What are the three different ways to include CSS in your project or use CSS to style a particular element?
  • What is the "default stylesheet" or "user agent stylesheet"?
  • Why use a CSS reset file?

What is HTML & CSS?

Watch these two wonderful introductions to HTML and CSS by the Harvard CS50 team. Estimated Total Time: 2 hours

Web and HTML

Duration: 30 minutes

BREAK: Take a 10 to 15-minute break before you continue. Try to reflect on what you learned on the previous video and take some notes on the most important concepts.

Web and CSS

Duration: 40 minutes

Use Agent Stylesheets & CSS Resets

Learn about your browser’s default stylesheet and CSS resets in the next videos. This is why there are some spaces that show up in your layout even if you haven’t specified CSS. Real developers almost always use a CSS reset to blow away the default stylesheet and let them work from scratch.

The CSS resets are a very important and common pattern, especially among the various CSS frameworks. Most of the CSS frameworks out there contain some sort of CSS reset code at the start. More about CSS frameworks in later chapters.

Duration: 5 minutes

Duration: 9 minutes

Web Accessibility – An Introduction

Watch the following quick introduction to one of the most important aspects of Web Development: Web Accessibility. You will be reading more on the subject in subsequent lessons.

Duration: 1 minute

Web Accessibility – The Importance of Proper Color Contrast

What is effective color contrast and why is it so important? Watch the next video to find out more.

Duration: 3 minutes

You now know why it’s really important to focus on web accessibility matters while developing for the web.

Take a quick break and dive into the following video that will walk you through the process of checking the color contrast in your web content.

Duration: 11 minutes

Assignment

Follow the instructions here and submit your Pull Request in the Quiz below.

Adding your instructor(s) as Collaborators to your GitHub repos

  • You must add the following GitHub users to your repo:
    • GitHub username: kostasx / Kostas Minaidis
  • This video will help you go through the process of adding a Collaborator on a GitHub repo.

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: 29.11.2020

Contributors:

Thanks to:

  • Patrick Chan for pointing out the broken links for the contrast checker tools.
  • Nikos Chanos for pointing out broken screenshot links.

Introduction to the Front End

Introduction

The "front-end languages" live in the browser. After you type an address into the address bar at the top and hit the enter/return key, your browser will receive at least an HTML file from the web server. That file will likely tell the browser to request a CSS file and a JavaScript file as well (probably many more than one, but we’ll keep it simple).

Each of these languages performs a separate but very important function and they work harmoniously together to determine how the web page is STRUCTURED (HTML), how it LOOKS (CSS), and how it FUNCTIONS (JavaScript). And keep in mind that your browser handles figuring out how to make these files into a functioning web page (not the server).

Front-end web development is NOT design (you won’t be playing around in Photoshop or anything), but a front-end developer does apply the work of designers to the web page by translating their well-designed layouts into real code. The front-end developer stands between the designer on one end and the back-end developer on the other, translating the design into code and plugging the data from the back-end developer into the right spots. He or she must also handle all the possible interactions that the user may need to make with the page.

On the front end, you will need to be highly conscious of who your user is and how they will be interacting with your web page, because you are building their gateway to your page or product. This may mean gaining a strong understanding of accessibility and things like responsive development down the line, but first you need to build up your toolkit and pick up the fundamentals of the front-end languages.

In the following lessons, you’ll get a healthy understanding of each of the three front-end languages (and jQuery, the most popular JavaScript library). To get warmed up, we’ll start at the high level.

Learning Objectives

Look through these now and then use them to test yourself after doing the assignment:

  • What is the role of HTML in a web page?
  • What is the role of CSS in a web page?
  • What is the role of JavaScript in a web page?

Study

  • Watch the following awesome video explaining the big picture of the three core web technologies: HTML, CSS and JavaScript.

  • Duration: 4 minutes

  • Read a brief intro to Frontend development from this interview with Nick Schaden.

    • Reading time: 5~10 minutes
  • Read about the role of HTML.

    • Reading time: 5~10 minutes
  • Watch the next video, which is another great introduction to how the various front-end technologies interact.

    • Duration: 1 minute

  • Get a high-level overview of how all three languages work together in MDN’s Getting started with the web. Learners should only read: Dealing with files, HTML basics, CSS basics and JavaScript basics. There is no need to implement the website; simply read about the process at this point.

    • Reading time: 5~10 minutes
  • Skills of a Successful Front-End Web Developer from Drupal (a CMS based on PHP).

    • Reading time: 5~10 minutes
  • Watch the next What is JavaScript? 2-minute introductory video.

    • Duration: 2 minutes

Resources / Tools

  • Bookmark DevDocs.io. Read the "Welcome" message. Massive API documentation collection that even works offline. Essential collection of reference material for everything covered and more. (Maintained by FreeCodeCamp)

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: 19.01.2021

CONTRIBUTORS: