Learning Path for Junior Front-End Developer

Becoming a Front-End Developer is not easy. There are tons of materials on-line, but where to start? What is the correct sequence to learn? We have designed this Learning Path to help you grow quickly. But the Learning Path is not enough. So we are also creating resources that will help you on your learning way:

  • Tests with Questions and Answers
    Our tests will guide you through each topic step by step. If you manage to answer the questions yourself, you can proceed further. If not, you should continue studying the topic.
  • Cheatsheets Our Cheatsheets will help you to verify that you remember everything you need. Use them every day to find out what you forgot and use them while you work on something. Try to use all of the things mentioned in Cheatsheets. This way you will build solid foundations for learning more.

HTML overview and page setup
Goal Details Related Resources
  • To understand what HTML is, when and why is it used, what are its advantages
  • To be able to describe HTML syntax.
  • To be able to create basic HTML page and undersand its structure
  • To be able to use some editor or IDE - Visual Studio Code, Visual Studio, ...
  • To be able to organize your work on file system and find your files after you create them, even if your editor/IDE explodes.
  • To be able to set favicon.
  • To be able to explain what core technologies the web page usually uses.
Element, tag, attribute, !DOCTYPE, HTML, HEAD, BODY, TITLE, LINK, META, SCRIPT, viewport, charset, favicon, path, file, folder, relative path, absolute path, root folder, current folder, ., .., /

Exercises

  • Create a web page from scratch. Then talk to someone and explain him every single piece of markup that you used - what it is used for, why it is used, why to have it in the page.
HTML page basics
Goal Details Related Resources
  • To be able to inspect the source code of any HTML page.
  • To be able to add headlines, paragraphs and blocks of texts.
  • To be able to use links and images.
  • To be able to create forms.
  • To understand how lines are processed.
  • To be able to liss and understand when to use them.
  • To be able to design tables with headers, rows and columns.
  • To know all table tags, what they mean, when they are used, what are the differnces between them.
  • To understand what is DOM and how it can be visualized and inspected.
H1, H2, H3, H4, H5, H6, P, DIV, A, IMG, STRONG, I, TABLE, THEAD, TR, TH, TD, UL, OL, LI, BR, block/in-line element, whitespace, FORM, FIELDSET, LABEL, INPUT, BUTTON, CODE, PRE, DOM, id, innerHTML, innerText, outerHTML, outerText, parentNode, childNodes, parsing

Exercises

  • Create a web page from scratch. Place 3 tables into it. Each table should have diffeent number of rows and columns, one table should have horizontal header, one should have vertical header. The table should be semantically valid. Then talk to someone and explain him every single piece of markup that you used - what it is used for, why it is used, why to have it in the page.
Efficient navigation in Windows
Goal Details Related Resources
  • To be able to switch between apps and tabs without a mouse, to be able to switch forward, backwards
  • To be able to close window, application without using a mouse
  • To be able to navigate cursor without using a mouse
  • To be able to select text without a mouse
  • To know the difference between Backspace, Delete, to know what is a Shift, Ctrl, Alt good for
  • To be able to hide all apps and show desktop
  • To be able to lock the computer
  • To be able to show the task manager and kill a problematic app if needed
Alt+Tab, Alt+Shift+Tab, Ctrl+Tab, Ctrl+Shift+Tab, Arrow Up, Down, Right, Left, Windows+D, Windows+L, Ctrl+Alt+Del
CSS overview and setup
Goal Details Related Resources
  • To understand what HTML is, when and why is it used, what are its advantages
  • To be able to create basic HTML page and undersand its structure
Bootstrap setup
Goal Details Related Resources
  • To be able to integrate Bootstrap into a web page/application and use it.
  • To be able to verify and troubleshoot correctness of Bootstrap integration
UI/UX for beginners
Goal Details Related Resources
  • To understand what is User Experience and User Interface and why knowing this matters
  • To know basic user inferface components and web design elements
  • To understand what people are talking about when discussing application user interface
Adobe XD for beginners
Goal Details Related Resources
  • To understand the basics of the design process, why is it useful and why to use it
  • To be able to design basic user interface using Adobe XD
  • To be able to sketch designs before starting any read development
Command-line for beginners
Goal Details Related Resources
  • To understand the basics of the version control systems
  • To be able to cooperate in a team of multiple developers
  • To be able to protect your work from getting lost
Git for beginners
Goal Details Related Resources
  • To understand the basics of the version control systems
  • To be able to cooperate in a team of multiple developers
  • To be able to protect your work from getting lost
Markdown for beginners
Goal Details Related Resources
  • To be able to write basic documentation and notes that can be easily structured and versioned
  • To be able to understand, modify and extend existing documentation writtenin Markdown
  • To understand the basic document semantics and structure
  • To understand what is syntax and markup
  • To be able to share the documentation among the team
HTTP protocol for beginners
Goal Details Related Resources
  • To understand what is HTTP protocol and what role it serves in web development
  • To understand how browsers communicate with servers
  • To be able to send data to web server
  • To be able to troubleshoot HTTP issues
  • To be able to reverse engineer HTTP communication of web applications
Sass for beginners
Goal Details Related Resources
  • To understand what are CSS preprocessors
  • To be able to use Sass to speed up CSS design and improve flexibility and code maintainance