diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md new file mode 100644 index 00000000..92582253 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md @@ -0,0 +1,192 @@ +# Introduction to Programming Languages and Tools of the Trade + +This lesson covers the basics of programming languages. The topics covered here apply to most modern programming languages today. In the 'Tools of the Trade' section, you'll learn about useful software that helps you as a developer. + +![Intro Programming](webdev101-programming.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## Pre-Lecture Quiz +[Pre-lecture quiz](.github/pre-lecture-quiz.md) + +## Introduction + +In this lesson, we'll cover: + +- What is programming? +- Types of programming languages +- Basic elements of a program +- Useful software and tooling for the professional developer + +## What is Programming? + +Programming (also known as coding) is the process of writing instructions to a device, such as a computer or mobile device. We write these instructions with a programming language, which is then interpreted by the device. These sets of instructions may be referred to by various names, but *program*, *computer program*, *application (app)*, and *executable* are a few popular names. + +A *program* can be anything that is written with code; websites, games, and phone apps are programs. While it's possible to create a program without writing code, the underlying logic is interpreted to the device and that logic was most likely written with code. A program that is *running* or *executing code* is carrying out instructions. The device that you're currently reading this lesson with is running a program to print it to your screen. + +βœ… Do a little research: who is considered to have been the world's first computer programmer? + +## Programming Languages + +Programming languages serve a main purpose: for developers to build instructions to send to a device. Devices only can understand binary (1s and 0s), and for *most* developers that's not a very efficient way to communicate. Programming languages are a vehicle for communication between humans and computers. + +Programming languages come in different formats and may serve different purposes. For example, JavaScript is primarily used for web applications, while Bash is primarily used for operating systems. + +*Low level languages* typically require fewer steps than *high level languages* for a device to interpret instructions. However, what makes high level languages popular is its readability and support. JavaScript is considered a high level language. + +The following code illustrates the difference between a high level language with JavaScript and low level language with ARM assembly code. + +```javascript +let number = 10 +let n1 = 0, n2 = 1, nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +Believe it or not, *they're both doing the same thing*: printing a Fibonacci sequence up to 10. + +βœ… A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers such that each number is the sum of the two preceding ones, starting from 0 and 1. + +## Elements of a program + +A single instruction in a program is called a *statement* and will usually have a character or line spacing that marks where the instruction ends, or *terminates*. How a program terminates varies with each language. + +Most programs rely on using data from a user or elsewhere, where statements may rely on data to carry out instructions. Data can change how a program behaves, so programming languages come with a way to temporarily store data that can be used later. This data is called *variables*. Variables are statements that instruct a device to save data in its memory. Variables in programs are similar to ones in algebra, where they have a unique name and their value may change over time. + +There's a chance that some statements will not be executed by a device. This is usually by design when written by the developer or by accident when an unexpected error occurs. This type of control of an application makes it more robust and maintainable. Typically these changes in control happen when certain decisions are met. A common statement in modern programming languages to control how a program is run is the `if..else` statement. + +βœ… You'll learn more about this type of statement in subsequent lessons + +## Tools of the Trade + +[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +In this section, you'll learn about some software that you might find very useful as you start your professional development journey. + +A **development environment** is a unique set of tools and features that a developer will use often when writing software. Some of these tools have been customized for a developer specific needs, and may change over time if a developer changes priorities in work or personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them. + +### Editors + +One of the most crucial tools for software development is the editor. Editors are where you write your code and sometimes where you will run your code. + +Developers rely on editors for a few additional reasons: + +- *Debugging* Discovering bugs and errors by stepping through code, line by line. Some editors have debugging capabilities, or can be customized and added for specific programming languages. +- *Syntax highlighting* Adds colors and text formatting to code, makes it easier to read. Most editors allow customized syntax highlighting. +- *Extensions and Integrations* Additions that are specialized for developers, by developers, for access to additional tools that aren't built into the base editor. For example, many developers also need a way to document their code and explain how it works and will install a spell check extension to check for typos. Most of these additions are intended for use within a specific editor, and most editors come with a way to search for available extensions. +- *Customization* Most editors are extremely customizable, and each developer will have their own unique development environment that suits their needs. Many also allow developers to create their own extension. + +#### Popular Editors and Web Development Extensions + +- [Visual Studio Code](https://code.visualstudio.com/) + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) + +### Browsers + +Another crucial tool is the browser. Web developers rely on the browser to observe how their code runs on the web, it's also used to view visual elements of a web page that are written in the editor, like HTML. + +Many browsers come with *developer tools* (DevTools) that contain a set of helpful features and information to assist developers to collect and capture important insights about their application. For example: If a web page has errors, it's sometimes helpful to know when they occurred. DevTools in a browser can be configured to capture this information. + +#### Popular Browsers and DevTools + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### Command Line Tools + +Some developers prefer a less graphical view for their daily tasks and rely on the command line to achieve this. Developing code requires a significant amount of typing, and some developers prefer to not disrupt their flow on the keyboard and will use keyboard shortcuts to swap between desktop windows, work on different files, and use tools. Most tasks can be completed with a mouse, but one benefit of using the command line is that a lot can be done with command line tools without the need of swapping between the mouse and keyboard. Another benefit of the command line is that they're configurable and you can save your custom configuration, change it later, and also import it to new development machines. Because development environments are so unique to each developer, some will avoid using the command line, some will rely on it entirely, and some prefer a mix of the two. + +### Popular Command Line Options + +Options for the command line will differ based on the operating system you use. + +*πŸ’» = comes preinstalled on the operating system.* + +#### Windows + +- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) πŸ’» +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) πŸ’» +- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) +- [mintty](https://mintty.github.io/) + +#### MacOS + +- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) πŸ’» +- [iTerm](https://iterm2.com/) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) + +#### Linux + +- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) πŸ’» +- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) + +#### Popular Command Line Tools + +- [Git](https://git-scm.com/) (πŸ’» on most operating sytems) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### Documentation + +When a developer wants to learn something new, they'll most likely turn to documentation to learn how to use it. Developers rely on documentation often to guide them through how to use tools and languages properly, and also to gain deeper knowledge of how it works. + +#### Popular Documentation on Web Development + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +βœ… Do some research: Now that you know the basics of a web developer's environment, compare and contrast it with a web designer's environment. + +--- + +## πŸš€ Challenge + +Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go? + +## Post-Lecture Quiz +[Post-lecture quiz](.github/post-lecture-quiz.md) + +## Review & Self Study + +Study a bit on the different languages available to the programmer. Try to write a line in one language, and then redo it in two others. What do you learn? + +## Assignment + +[Reading the Docs](assignment.md) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ko.md b/1-getting-started-lessons/2-github-basics/translations/README.ko.md new file mode 100644 index 00000000..24415aa9 --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.ko.md @@ -0,0 +1,293 @@ +# Introduction to GitHub + +This lesson covers the basics of GitHub, a platform to host and manage changes to your code. + +![Intro to GitHub](images/webdev101-github.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## Pre-Lecture Quiz +[Pre-lecture quiz](.github/pre-lecture-quiz.md) + +## Introduction + +In this lesson, we'll cover: + +- tracking the work you do on your machine +- working on projects with others +- how to contribute to open source software + +### Prerequisites + +Before you begin, you'll need to check if Git is installed. In the terminal type: +`git --version` + +If Git is not installed, [download Git](https://git-scm.com/downloads). Then, setup your local Git profile in the terminal: +* `git config --global user.name "your-name"` +* `git config --global user.email "your-email"` + +To check if Git is already configured you can type: +`git config --list` + +You'll also need a GitHub account, a code editor (like Visual Studio Code), and you'll need to open your terminal (or: command prompt). + +Navigate to [github.com](https://github.com/) and create an account if you haven't already, or log in and fill out your profile. + +βœ… GitHub isn't the only code repository in the world; there are others, but GitHub is the best known + +### Preparation + +You'll need both a folder with a code project on your local machine (laptop or PC), and a public repository on GitHub, which will serve as an example for how to contribute to the projects of others. + +--- + +## Code management + +Let's say you have a folder locally with some code project and you want to start tracking your progress using git - the version control system. Some people compare using git to writing a love letter to your future self. Reading your commit messages days or weeks or months later you'll be able to recall why you made a decision, or "rollback" a change - that is, when you write good "commit messages". + +### Task: Make a repository and commit code + +1. **Create repository on GitHub**. On GitHub.com, in the repositories tab, or from the navigation bar top-right, find the **new repo** button. + + 1. Give your repository (folder) a name + 1. Select **create repository**. + +1. **Navigate to your working folder**. In your terminal, switch to the folder (also known as the directory) you want to start tracking. Type: + + ```bash + cd [name of your folder] + ``` + +1. **Initialize a git repository**. In your project type: + + ```bash + git init + ``` + +1. **Check status**. To check the status if your repository type: + + ```bash + git status + ``` + + the output can look something like this: + + ```output + Changes not staged for commit: + (use "git add ..." to update what will be committed) + (use "git checkout -- ..." to discard changes in working directory) + + modified: file.txt + modified: file2.txt + ``` + + Typically a `git status` command tells you things like what files are ready to be _saved_ to the repo or has changes on it that you might want to persist. + +1. **Add files to tracking** + + ```bash + git add . + ``` + + The `git add` plus `.` argument indicates that all your files & changes for tracking. + +1. **Persisting your work**. At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_: + + ```bash + git commit -m "first commit" + ``` + + This commits all of your files, adding the message "first commit". For future commit messages you will want to be more descriptive in your description to convey what type of change you've made. + +1. **Connect your local Git repo with GitHub**. A Git repo is good on your machine but at some point you want to have backup of your files somewhere and also invite other people to work with you on your repo. One such great place to do so is GitHub. Remember we've already created a repo on GitHub so the only thing we need to do is to connect our local Git repo with GitHub. The command `git remote add` will do just that. Type the following command: + + > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace `repository_name` with your GitHub URL. + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + This creates a _remote_, or connection, named "origin" pointing at the GitHub repository you created earlier. + +1. **Send local files to GitHub**. So far you've created a _connection_ between the local repo and the GitHub repo. Let's send these files to GitHub with the following command `git push`, like so: + + ```bash + git push -u origin main + ``` + + This sends your commits in your "main" branch to GitHub. + +1. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands: + + ```bash + git add . + git commit -m "type your commit message here" + git push + ``` + + > Tip, You might also want to adopt a `.gitignore` file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for `.gitignore` files at [.gitignore templates](github.com/github/gitignore). + +#### Commit messages + +A great Git commit subject line completes the following sentence: +If applied, this commit will + +For the subject use the imperative, present tense: "change" not "changed" nor "changes". +As in the subject, in the body (optional) also use the imperative, present tense. The body should include the motivation for the change and contrast this with previous behavior. You're explaining the `why`, not the `how`. + +βœ… Take a few minutes to surf around GitHub. Can you find a really great commit message? Can you find a really minimal one? What information do you think is the most important and useful to convey in a commit message? + +### Task: Collaborate + +The main reason for putting things on GitHub was to make it possible to collaborate with other developers. + +## Working on projects with others + +In your repository, navigate to `Insights > Community` to see how your project compares to recommended community standards. + + Here are some things that can improve your GitHub repo: + - **Description**. Did you add a description for your project? + - **README**. Did you add a README? GitHub provides guidance for writing a [README](https://docs.github.com/articles/about-readmes/). + - **Contributing guideline**. Does your project have [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), + - **Code of Conduct**. a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), + - **License**. Perhaps most importantly, a [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + + +All these resources will benefit onboarding new team members. And those are typically the kind of things new contributors look at before even looking at your code, to find out if your project is the right place for them to be spending their time. + +βœ… README files, although they take time to prepare, are often neglected by busy maintainers. Can you find an example of a particularly descriptive one? Note: there are some [tools to help create good READMEs](https://www.makeareadme.com/) that you might like to try. + +### Task: Merge some code + +Contributing docs help people contribute to the project. It explains what types of contributions you're looking for and how the process works. Contributors will need to go through a series of steps to be able to contribute to your repo on GitHub: + + +1. **Forking your repo** You will probably want people to _fork_ your project. Forking means creating a replica of your repository on their GitHub profile. +1. **Clone**. From there they will clone the project to their local machine. +1. **Create a branch**. You will want to ask them to create a _branch_ for their work. +1. **Focus their change on one area**. Ask contributors to concentrate their contributions on one thing at a time - that way the chances that you can _merge_ in their work is higher. Imagine they write a bug fix, add a new feature, and update several tests - what if you want to, or can only implement 2 out of 3, or 1 out of 3 changes? + +βœ… Imagine a situation where branches are particularly critical to writing and shipping good code. What use cases can you think of? + +> Note, be the change you want to see in the world, and create branches for your own work as well. Any commits you make will be made on the branch you’re currently β€œchecked out” to. Use `git status` to see which branch that is. + +Let's go through a contributor workflow. Assume the contributor has already _forked_ and _cloned_ the repo so they have a Git repo ready to be worked on, on their local machine: + +1. **Create a branch**. Use the command `git branch` to create a branch that will contain the changes they mean to contribute: + + ```bash + git branch [branch-name] + ``` + +1. **Switch to working branch**. Switch to the specified branch and update the working directory with `git checkout`: + + ```bash + git checkout [branch-name] + ``` + +1. **Do work**. At this point you want to add your changes. Don't forget to tell Git about it with the following commands: + + ```bash + git add . + git commit -m "my changes" + ``` + + Ensure you give your commit a good name, for your sake as well as the maintainer of the repo you are helping on. + +1. **Combine your work with the `main` branch**. At some point you are done working and you want to combine your work with that of the `main` branch. The `main` branch might have changed meanwhile so make sure you first update it to the latest with the following commands: + + ```bash + git checkout main + git pull + ``` + + At this point you want to make sure that any _conflicts_, situations where Git can't easily _combine_ the changes happens in your working branch. Therefore run the following commands: + + ```bash + git checkout [branch_name] + git merge main + ``` + + This will bring in all changes from `main` into your branch and hopefully you can just continue. If not, VS Code will tell you where Git is _confused_ and you just alter the affected files to say which content is the most accurate. + +1. **Send your work to GitHub**. Sending your work to GitHub means two things. Pushing your branch to your repo and then open up a PR, Pull Request. + + ```bash + git push --set-upstream origin [branch-name] + ``` + + The above command creates the branch on your forked repo. + +1. **Open a PR**. Next, you want to open up a PR. You do that by navigating to the forked repo on GitHub. You will see an indication on GitHub where it asks whether you want to create a new PR, you click that and you are taken to an interface where you can change commit message title, give it a more suitable description. Now the maintainer of the repo you forked will see this PR and _fingers crossed_ they will appreciate and _merge_ your PR. You are now a contributor, yay :) + +1. **Clean up**. It's considered good practice to _clean up_ after you. You want to clean up both your local branch and the branch you pushed to GitHub. First let's delete it locally with the following command: + + ```bash + git branch -d [branch-name] + ``` + + Ensure you go the GitHub page for the forked repo next and remove the remote branch you just pushed to it. + +`Pull request` seems like a silly term because really you want to push your changes to the project. But the maintainer (project owner) or core team needs to consider your changes before merging it with the project's "main" branch, so you're really requesting a change decision from a maintainer. + +A pull request is the place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more. A good pull request follows roughly the same rules as a commit message. You can add a reference to an issue in the issue tracker, when your work for instance fixes an issue. This is done using a `#` followed by the number of your issue. For example `#97`. + +🀞Fingers crossed that all checks pass and the project owner(s) merge your changes into the project🀞 + +Update your current local working branch with all new commits from the corresponding remote branch on GitHub: + +`git pull` + +## How to contribute to open source + +First, let's find a repository - or: repo - on GitHub of interest to you and to which you'd like to contribute a change. You will want to copy the contents of to our machine. + +βœ… A good way to find 'beginner-friendly' repos is to [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![Copy a repo locally](images/clone_repo.png) + +There are several ways of copying code. One way is to "clone" the contents of the repository, using HTTPS, SSH, or using the GitHub CLI (Command Line Interface). + +Open your terminal and clone the repository like so: +`git clone https://github.com/ProjectURL` + +To work on the project, switch to the right folder: +`cd ProjectURL` + +You can also open the entire project using [Codespaces](https://github.com/features/codespaces), GitHub's embedded code editor / cloud development environment, or [GitHub Desktop](https://desktop.github.com/). + +Lastly, you can download the code in a zipped folder. + +### A few more interesting things about GitHub + +You can star, watching, and/or "fork" any public repository on GitHub. You can find your starred repositories in the top-right drop-down menu. It's like bookmarking, but for code. + +Projects have an issue tracker, mostly on GitHub in the "Issues" tab unless indicated otherwise, where people discuss issues related to the project. And the Pull Requests tab is where people discuss and review changes that are in progress. + +Projects might also have discussion in forums, mailing lists, or chat channels like Slack, Discord or IRC. + +βœ… Take a look around your new GitHub repo and try a few things, like editing settings, adding information to your repo, and creating a project (like a Kanban board). There's a lot you can do! + +--- + +## πŸš€ Challenge + +Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes. + +## Post-Lecture Quiz +[Post-lecture quiz](.github/post-lecture-quiz.md) + +## Review & Self Study + +Read more about [contributing to open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/). + +Practice, practice, practice. GitHub has great learning paths available via [lab.github.com](https://lab.github.com/): + +- [First Week on GitHub](https://lab.github.com/githubtraining/first-week-on-github) + +You'll also find more advanced labs. + +## Assignment + +Complete [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github) \ No newline at end of file diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ko.md b/1-getting-started-lessons/3-accessibility/translations/README.ko.md new file mode 100644 index 00000000..601b0de1 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.ko.md @@ -0,0 +1,220 @@ +# Creating Accessible Webpages + +![All About Accessibility](webdev101-a11y.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## Pre-Lecture Quiz +[Pre-lecture quiz](.github/pre-lecture-quiz.md) + +> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. +> +> \- Sir Timothy Berners-Lee, W3C Director and inventor of the World Wide Web + +This quote perfectly highlights the importance of creating accessible websites. An application that can't be accessed by all is by definition exclusionary. As web developers we should always have accessibility in mind. By having this focus from the beginning you will be well on your way to ensure everyone can access the pages you create. In this lesson, you'll learn about the tools that can help you ensure that your web assets are accessible and how to build with accessibility in mind. + +## Tools to use + +### Screen readers + +One of the best-known accessibility tools are screen readers. + +[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) are commonly used clients for those with vision impairments. As we spend time ensuring a browser properly conveys the information we wish to share, we must also ensure a screen reader does the same. + +At its most basic, a screen reader will read a page from top to bottom audibly. If your page is all text, the reader will convey the information in a similar fashion to a browser. Of course, web pages are rarely purely text; they will contain links, graphics, color, and other visual components. Care must be taken to ensure that this information is read correctly by a screen reader. + +Every web developer should familiarize themselves with a screen reader. As highlighted above, it's the client your users will utilize. Much in the same way you're familiar with how a browser operates, you should learn how a screen reader operates. Fortunately screen readers are built into most operating systems, and many browsers contain extensions to emulate a screen reader. + +βœ… Try a screen reader browser extension or tool. One that works on Windows only is [JAWS](https://webaim.org/articles/jaws/). Browsers also have built-in tools that can be used for this purpose; check out [these accessibility-focused Edge browser tools](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features). + +### Contrast checkers + +Colors on web sites need to be carefully chosen to answer the needs of color-blind users or people who have difficulty seeing low-contrast colors. + +βœ… Test a web site you enjoy using for color usage with a browser extension such as [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). What do you learn? + +### Lighthouse + +In the developer tool area of your browser, you'll find the Lighthouse tool. This tool is important to get a first view of the accessibility (as well as other analysis) of a web site. While it's important not to rely exclusively on Lighthouse, a 100% score is very helpful as a baseline. + +βœ… Find Lighthouse in your browser's developer tool panel and run an analysis on any site. what do you discover? + +## Designing for accessibility + +Accessibility is a relatively large topic. To help you out, there are numerous resources available. + +- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) + +While we won't be able to cover every aspect of creating accessible sites, below are some of the core tenets you will want to implement. Designing an accessible page from the start is **always** easier than going back to an existing page to make it accessible. + +## Good display principles + +### Color safe palettes + +People see the world in different ways, and this includes colors. When selecting a color scheme for your site, you should ensure it's accessible to all. One great [tool for generating color palettes is Color Safe](http://colorsafe.co/). + +βœ… Identify a web site that is very problematic in its use of color. Why? + +### Properly highlight text + +Highlighting text by color, [font weight](https://developer.mozilla.org/docs/Web/CSS/font-weight), or other [text decoration](https://developer.mozilla.org/docs/Web/CSS/text-decoration) does not inherently inform a screen reader of its importance. A word could be bold because it's a key word, or because its the first word and the designer decided it should be bold. + +When a particular phrase needs to be highlighted, use the `` or `` elements. These will indicate to a screen reader that those items are important. + +### Use the correct HTML + +With CSS and JavaScript it's possible to many any element look like any type of control. `` could be used to create a `