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

  • 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
GoalDetailsRelated Resources
  • To understand what is HTML, when and why it is 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 a 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, assets, CSS (styles), JavaScript, 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.
  • Create 3 web pages with 3 color variants of the same favicon.
HTML page basics
GoalDetailsRelated 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.
  • Create a basic contact form that will allow a user to enter his name, phone, a message, confirmation with terms and conditions and a submit button.
Basic ergonomy and efficient navigation in Windows
GoalDetailsRelated Resources
  • To be able to setup working environment properly - desk, table, LCD, keyboard, mouse
  • To be able to change brightness and light settings depending on light and day time conditions
  • To prevent having bad posture
  • 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
 LCD in an eye level, sitting close to an edge of the table, stretching, yellow light at night, dark theme at night, lower brightness at night, 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
GoalDetailsRelated 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
GoalDetailsRelated 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
GoalDetailsRelated 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
GoalDetailsRelated 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
GoalDetailsRelated 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
GoalDetailsRelated 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
  • To know a basic daily workflow - update to latest, merge the current version of master branch to a feature branch
  • To understand what are conflicts and why they can occur, to be able to resolve them.
git clone , git init , git status , git add ./*.html , git commit -m "A message" , git push , git fetch , git branch , git branch -a , git checkout <branchname> , git stash push -m "Your descripion of changes" , git stash pop , git merge <branchname> ,
Markdown for beginners
GoalDetailsRelated 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
GoalDetailsRelated 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
GoalDetailsRelated Resources
  • To understand what are CSS preprocessors
  • To be able to use Sass to speed up CSS design and improve flexibility and code maintainance
  • To understand how the Sass is linked to a web page.
  • To be able to integrate Sass to a project and know tools that compile Sass automatically when the source files change
  • To be ab
<HEAD> , <LINK rel="css/stylesheet" src="url"> , Parials