Front-end web development is a critical aspect of software development. This is why the demand for skilled front-end developers is higher every year. This webinar is an overview of best practices and standards of front-end development directly from the team who has worked with some of the world's top brands.

1. Level Up Your Team:
Front-End Development
Best Practices
August 26, 2020

2. Open Source
Expansion Partner

3. To bring together the most talented team members
to provide world-class solutions for the web.
Our Mission

4. ● Over 10 years of Front-End Experience
● Writer, Trainer, and Speaker
● Co-Host of Mediacurrent’s Open Waters Podcast
Mario Hernandez
Head of Learning
marioRHernandez
iMarioHernandez

5. 1. Defining Front-End Development
2. Challenges
3. Break Your Plan Down
4. Leveling Up
5. Live Demo
6. Q&A and Next Steps
Today’s
Agenda

6. | 6
Help you determine if
front-end development is
the direction you’d like to
take your career
Expose you to the front-
end landscape and the
scope of what you need
to learn
Provide you with next
steps and resources to
take your career to the
next level
Goals of the Webinar

7. My Experience as a Front-End Dev
| 7
● I started before there was FE or BE
● Learning resources were little to none
● There was no clear direction
● Technology was infant and presented tremendous challenges
(Hardware, Software, Broadband, No CSS, Tables)

8. | 8
A front end developer is someone who implements
web designs through programming languages like
HTML, CSS, and JavaScript.
Who is a Front-End Developer?

9. | 9

10. Challenges

13. | 13
Top 10 Front-End Developer Skills
1. HTML
2. CSS
3. Javascript
4. Responsive Design
5. Version Control (git)
6. Testing/Debugging
7. Browser Development Tools
8. Performance
9. CSS Preprocessing
10. Command Line

14. | 14

15. | 15

16. Break Your Plan Down

17. | 17
Independently of the platform you
use, all websites use HTML, CSS,
and JavaScript.
The Basics
JavaScript ES6
CSS3HTML5

18. | 19
Non-Semantic HTML

19. | 20
Non-Semantic HTML

20. | 21
Semantic HTML

21. Leveling Up

22. This is the
best time to
learn!

23. Pro Tip:
1. Learn and understand the basics
2. Stay away from FE Frameworks (i.e. Bootstrap)
3. Don’t stress over not knowing everything … you never will
4. Set goals (what will I learn today/this week)
Put in the work:
1. Build prototypes over and over and over again
2. Attend conferences - virtually anywhere
3. Speak at conferences - teaching is a great way to learn
4. Write about the topics you are or want to learn about
5. Do pro bono work
Sorry, there are no shortcuts

24. Live Demo

25. Live Demo
https://codepen.io/mariohernandez/pen/ddWZXP

26. | 28
Key Takeaways
You can do a lot with the basics of HTML, CSS, and JavaScript
This is the best time to learn any language
Take advantage of the opportunities to level up your skills
Find the right training partner to help and support you in your journey
Front-End Development is not easy, but nothing else is either
Don’t give up

27. Find the Right Training
Partner

28. | 30
What Sets Mediacurrent Apart?
A long-term, strategic partnership with a
best of class Drupal/digital agency to
facilitate future planning.
Open source software expertise working
on some of the best known world brands.
Award-winning craftsmanship by adopting
standards and best practices.
Consistently ranked as a top 10 contributor to
the Drupal community worldwide.
Trust and proven track record in
providing world-class training.
Accessibility is at the core of every project
and every course being taught.
Commitment to the Open Source
community by providing training
scholarships to underrepresented groups.
Provides automated training environment with a
turn key approach..

29. | 31
Performing exercises on our own with material help & then
thorough explanation by the instructor was the best part.
Also, topics were defined & explained as very detailed &
thorough. It was a very positive thing.
Michael Flores
Beginner Components Training - May 2020

30. | 32
James McGrath
Advanced Components Training - June 2020
I think I will be using much of what I learned in the
coming months. I am very inspired. It was a great
experience and I really enjoyed it. I look forward to the
next time.

31. 10% Discount Code: fewebinar
bit.ly/mediacurrent-frontend-training

32. Does something resonate with you today? Get in touch with us.
mediacurrent.com/contact-us
mediacurrent.com/resources
Questions

33. Mario Hernandez
Head of Learning
Thank You!
Let’s continue the conversation
imariohernandez
mario.hernandez@mediacurrent.com
mediacurrent.com/training
mediacurrent.com/training