Front End Development Fundamentals
When users interact with a web page or application, they're really interacting with the front end. This pathway is designed to help you learn the skills you need to become a front end developer. You'll learn how to build web pages and applications using HTML, CSS, and JavaScript. You'll also learn how to use popular front end frameworks and libraries like React, Vue, or Angular. This pathway does not focus on design in any way - it is a myth that front end web development is rooted in design. This pathway is for those who want to build the interactive parts of a website or application using code and problem solving skills.
What will you learn?
Below, you can find a list of competencies that describe what skills and knowledge you will need to progress through your pathway. You can proove that you have mastered the competencies below by uploading artifacts (called 'proofs') to act as proof of your skills and knowledge.
HTML
Build Pages with Semantic HTML
Create valid HTML with elements that provide meaningful information about the document. Use tags like <html>, <head>, <article>, <body>, <main>, <footer>, etc.
Organize Text in HTML
Appropriately utilize <h1> through <h6> tags, <p> tags, as well as list tags.
Create Hyperlinks to link to other pages
Use the <a> anchor tag to create hyperlinks to other pages.
Include Images and other media in HTML
Utilize the <img> and other tags such as <audio>, <video>, etc. to include media in your web pages.
Create forms
Build forms to collect user imput. You'll connect JS to these forms later.
Show data clearly
Use tables to display data.
CSS
Define core CSS concepts
Describe the box model, specificity, inheritance, and the cascade. Explain how these concepts affect the styling of web pages.
Use CSS Selectors
Select elements using a variety of CSS selectors, including element selectors, class selectors, ID selectors, attribute selectors, pseudo-classes, and pseudo-elements.
Implement common layouts using CSS
Find common layouts throughout the web and implment them using flexbox and grid. Ensure that spacing, alignment, and sizing are consistent and visually appealing.
Use CSS to create responsive pages
Utilize CSS to create web pages that adjust based on the size of the viewport or device. Use media queries and use fluid measurements instead of pixels. Consider the use of flexible images and media, the viewport tag, and responsive typography.
Use CSS Frameworks
Build sites utilizing CSS frameworks like Bootstrap, Tailwind, or Materialize. Understand the benefits and drawbacks of using a CSS framework.
Debug CSS issues
Use tools such as the browser's developer tools to identify and fix CSS issues.
JavaScript
List and define the data types in JavaScript
Clearly articulate which data types are reference and which are primitive. Explain the difference between null and undefined.
Explain how to use Variables in JS
Define the term 'variable' and explain how to declare and assign variables in JavaScript. Explain the difference between let, const, and var.
Define the term 'expression' and explain what truthy and falsey expressions are
Use numbers, strings, arrays, and objects in JavaScript
Define variables that are numbers, strings, arrays, and objects. Manipulate these variables using common methods and operators. Use dot and bracket notation to access object properties.
Define and Invoke Functions
Create reusable functions that take parameters and return values. Use function declarations, function expressions, and arrow functions. Understand the difference between function declarations and function expressions.
Use for loops to iterate over arrays
Manipulate data using for loops. Write code that utilizes nested for loops.
Manipulate Data with Arrays and Objects
Use array methods like map, filter, reduce, and sort. Use object methods like Object.keys, Object.values, and Object.entries. It's helpful to explain use cases for each method.
Manipulate the DOM
Interact with the Document Object Model (DOM) using JavaScript. Select elements, create new elements, modify elements, and remove elements. Add event listeners to elements to respond to user interactions. This is when you'll connect your HTML knowledge to JS.
Handle Events
Handle events in JavaScript using event listeners. Explain event bubbling and event delegation. Use event objects to access information about the event.
Handle Errors
Handle errors by using try/catch blocks. Use the console to log errors and debug code. Explain the difference between syntax errors and runtime errors.
Debug JavaScript
Use browser tools, debuggers in IDEs, and console.log to debug JavaScript code. Identify and fix common errors like typos, incorrect variable names, and missing parentheses.
Make network requests with Fetch and Axios
Explain what network requests are and how they work. Use the Fetch API and Axios to make GET and POST requests to a server. Handle responses using promises and async/await.
Describe Promises in JS
Explain what promises are and how they work. Use promises to handle asynchronous code. Chain promises together and handle errors using catch.
Use Closures
Explain what a closure is and utilize them in your code
Identify Scope in JS
Explain how code works in the context of its scope. Identify global and local scope. Explain that the 'this' keyword is and how to use it.
Destructure Objects and Arrays
Use the destructuring syntax to extract values from objects and arrays. Explain the benefits of using destructuring.
Share code between files using modules
Utilize modules to share code between files. Explain the benefits of using modules and how to import and export modules.
Consider performance
Describe the basics of Big O notation and how it relates to JavaScript. Explain how to optimize code for performance.
Define higher order functions
Explain what higher order functions are and how to use them. Use higher order functions like map, filter, and reduce to manipulate data.
Research Programming Paradigms
Research and explain the difference between imperative and declarative programming. Explain the difference between procedural and object-oriented programming.
TypeScript
Annotate types for variables, functions, and objects
Define variables and objects with explicit types along with function parameters and return values. Use type annotations to describe the shape of objects.
Utilize interfaces and types
Create interfaces and types to define the shape of objects. Use interfaces to describe the structure of objects and types to define custom types.
Describe Generics
Explain generics and how they can be used to create reusable components. Use generics to create flexible and reusable functions and classes.
Front End Framework
competencies coming soon
coming soon
Accessibility
competencies coming soon
coming soon
The Web
competencies coming soon
coming soon