Skip to main content

Frontend Syllabus

This section provided knowledge needed for Frontend developer, with an overview of you'll learn and practice.

Content​

  1. Fundamentals
  2. Git
  3. HTML5
  4. DOM
  5. CSS3
  6. Javascript
  7. API
  8. Web design
  9. ReactJS
  10. Deployment

Fundamentals​

  • Understand how websites work and how HTML, CSS and JavaScript contribute.
  • Understand how the internet works and how websites are served.
  • Learn to use git, gitlab and version control.
  • Learn key troubleshooting and debugging skills to apply to your projects.

Git​

  • Using git for version control and collaboration
  • Git forking, branching and cloning
  • Using gitlab as a remote repository
  • Checkout and rolling back changes with git
  • Using git and gitlab

HTML5​

  • Learn the anatomy of HTML syntax to structure your websites.
  • Understand the HTML boilerplate and HTML doctypes.
  • Understand indentation and nesting in HTML code.
  • Learn to use HTML tags to structure headings, paragraphs.
  • How to structure HTML lists to create unordered and ordered lists.
  • How to insert images using HTML
  • How to create hyperlinks using anchor tags.
  • Create multi-page websites.
  • Learn HTML best practices.

CSS3​

  • Understand what are cascading style sheets and how you can use it to style your website.
  • How to use CSS selectors and properties.
  • Learn about how to use inline, internal and external CSS.
  • Understand CSS coding best practices.
  • Learn about CSS specificity and inheritance.
  • Learn and understand the CSS Box Model.
  • Learn to use developer tools to inspect and diagnose CSS.
  • Learn about CSS positioning and display properties.
  • Learn about font styling using CSS and web safe fonts.
  • Implement responsiveness using CSS media queries.
  • How to use CSS float and clear properties.
  • How combine CSS selectors and understand selector priority.

FLEX BOX​

  • Learn about why flexbox was introduced to CSS.
  • Understand what happens when display is set as flex.
  • Understand flex direction and how it affects layout.
  • Learn to use align and justify for layout of child items
  • Understand how child items are sized and distributed in a flexbox and use the flex shorthand property.

GRID​

  • Learn about how grid is different to flexbox and their strengths and weaknesses.
  • Understand what happens when display is set as grid.
  • Learn how grid sizing is done and how to create and arrange a grid.
  • Learn to position items in a grid and how placement across rows and columns is done.
  • Learn to use grid in combination with flexbox to create complex layout using native CSS.

DOM​

  • Learn the tree structure of HTML based websites.
  • Traverse through the document using object notation.
  • Separation of concerns and coding best practices.
  • Manipulate and change the HTML elements using your understanding of the DOM.

Javascript​

  • Compare programming languages like JS with scripting and markup/stylesheet languages.
  • Overview of JavaScript and its uses.
  • Understand how to work with a code editor and IDEs.
  • Basic syntax and data types in JavaScript
  • Variables and their scope (let, const)
  • Data types (string, number, boolean, null, undefined, symbol)
  • Operators and expressions, including arithmetic, comparison, and logical operators
  • Control structures like if/else statements and loops
  • Functions and their importance in JavaScript, including:
  • Function declaration and expression
  • Function scope and closures
  • Arrow functions and their syntax
  • Higher-order functions, including:
  • Passing functions as arguments to other functions
  • Returning functions from other functions
  • The map, filter, and reduce methods on arrays and their use with higher-order functions
  • Arrays and their methods, including:
  • Creating and accessing arrays
  • Adding and removing elements from arrays
  • The slice method for slicing arrays
  • The concat method for concatenating arrays
  • The indexOf and lastIndexOf methods for finding elements in arrays
  • The map, filter, and reduce methods for manipulating arrays
  • The spread syntax ... to spread the elements of an array into a new array or function call
  • Object-oriented programming in JavaScript, including:
  • Creating objects with object literals
  • Creating objects with constructor functions and the new keyword
  • Creating objects with classes and the class keyword
  • Adding and accessing properties and methods on objects
  • The this keyword and how it works in object methods
  • The super keyword for accessing parent class methods and properties
  • Manipulating objects and arrays using methods and iteration
  • Asynchronous: Promise, Async, Await

Typescript​

  • Primitives type
  • Function type
  • Object type
  • Unions type
  • Alias
  • Interface

API​

  • Understand what APIs are and how they work.
  • HTTP/HTTPS in Depth
  • Calling APIs
  • Reading API documentation
  • Run the api with docker for future work:
docker-compose up -d

Web design​

  • Learn the fundamental principles of web design, UI and UX.
  • Understand colour theory and how to choose and use modern colour palettes to make your website look professional.
  • Understand modern typography and choose free-forcommercial use typefaces to make your website user friendly and stylish.
  • Learn to manage user attention using the key principles of
  • User Interface (UI) design.
  • Learn to design user friendly websites by understanding User Experience (UX) design.

ReactJS​

  • Learn front-end development with React.
  • Understand when and how to use React Components.
  • Learn to pass Props and work with them.
  • Learn to write JSX and understand JSX syntax.
  • Learn about the React DOM.
  • Learn State Management in React.
  • Learn about React Hooks.
  • Learn about conditional rendering in React.
  • Understand the difference between class and functional components.

MicroFrontend​

  • What is MicroFrontend & how does it work.
  • Learn by example.

JHipster & JHipster MicroFrontend​

  • What is JHipster.
  • How to generate code with JHipster.
  • Generate MicroFrontend App with JHipster.
  • Integrate one page into existing ReactJS app.

Deployment​

  • Understand hosting and deployment.
  • Deploying to company server.