12.01. Basic concepts for learning front-end development
Learning the basics of front-end development will nourish us when communicating with developers and know the implications that our design may have and anticipate them.
01. What is Front-end Development
What is front-end development and how does it differ from back-end? Learn the basic terms and concepts to be able to talk fluently with developers.
Front-end vs. back-end development: What's the difference?
Matthew Sweeney
ZD Net
Level Beginner
07/08/21
How the Web works
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Learn to code in 2020, get hired, and have fun along the way
Andrei Neagoie
Zero to Mastery
Level Beginner
08/12/19
02. Front-end Development Basics
Learn the basics to start developing and layout. Learn what software you can use and the most basic markup and development languages.
Installing basic software
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Dealing with files
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
HTML basics
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
CSS basics
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
JavaScript basics
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
Publishing your website
MDN contributors
MDN Web Docs
Level Beginner
08/10/21
03. WCAG Minimum Guidelines
It is as important for a designer to know the minimum guidelines for creating accessible designs as it is for a developer to know how to implement these guidelines.
Keyboard access
Accessibility for Teams
Accessibility Gov US
Level Beginner
Unknown
Screen reader
Accessibility for Teams
Accessibility Gov US
Level Beginner
Unknown
Headings
Accessibility for Teams
Accessibility Gov US
Level Beginner
Unknown
Page structure
Accessibility for Teams
Accessibility Gov US
Level Beginner
Unknown
Images
Accessibility for Teams
Accessibility Gov US
Level Beginner
Unknown
Color and contrast
Accessibility for Teams
Accessibility Gov US
Level Beginner
Unknown
Automated testing
Accessibility for Teams
Accessibility Gov US
Level Beginner
Unknown
04. Communication between designers and developers
Although we are starting to achieve a common language with the development teams, it is important to create guidelines, ceremonies and communication contracts with them.
The case for communication between designer and developer
Shalini Rawat
OpenSense Labs
Level Medium
27/08/20
How to improve communication between developers and designers on web projects
Thomas Peham
Usersnap
Level Medium
Unknown
Improving communication between designers and developers
KIRIL ABAZHER
EKreative
Level Medium
Unknown
05. Web Performance
Our design can have an impact on page performance, so it is important to be aware of how certain features or interactions can affect page performance.
Top Metrics You Need to Understand When Measuring Front-end Performance
Fernando Doglio
OpenReplay
Level Medium
27/04/21
23 front-end performance engineering rules for web apps
Todd DeCapua
TechBeacon
Level Medium
Unknown
06. Transfer of user interface design
To achieve a development faithful to the implemented design, we must know how to work with the handoff and the documentation of the artefact.
09.01.10. UI Documentation & Handoff
It is highly recommended before continuing to study this sub-topic in order to achieve a reasonable level of mastery of the subject.
No items found.
Topic complete! 🎉🎉🎉
Congratulations! We recommend you to continue studying with us, completely free of charge, to reach your goal and apply for the job you are looking for. Don't forget to donate to keep the project alive 💖💖💖
12.02
HTML & CSS ->
A must for a designer who wants to improve their development skills is to learn minimal HTML and CSS styles to see how their designs translate into code.
Stay up to date or donate to the project
This project is created by one person only, so if you subscribe to the newsletter, or collaborate by donating coffees to maintain the database, or recommend new resources, you will be more than welcome 💜
Explore all subjects in Block V - Develop & Testing
Explore all the topic in each subject. Each subject is divided into different topics that contain a series of resources to study. Start from 0 or wherever you want.
