Learning Areas and IdeasTake the Basic CSS, CSS flexbox, and CSS grid sections on freeCodeCamp.
It is a language that is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.
While it was once used mainly to make pages dynamic, it is now the foundation of many front-end frameworks.
These frameworks handle a lot of the tasks that were formerly handled by the back-end (e.
, routing and displaying different views).
Too many language fundamentals to list here!<script> tag and placementAccessing HTML elementsThe event loop, call stack, and event queuePrototypal InheritanceReference vs.
It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
For quite a while, jQuery was the go-to library for making these kinds of tasks easier and consistent across different browsers.
Still, it would be beneficial to take a little time to learn some jQuery and apply it to a small project.
????.Learning Areas and IdeasTake the jQuery section on freeCodeCamp.
Document readySelectorsToggle classesAnimationAdd or move HTML elementsAdd jQuery to your site!Responsive Web DesignResponsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.
Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD.
Content, design and performance are necessary across all devices to ensure usability and satisfaction.
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.
(Source: Wikipedia)????.Quick TakeawayResponsive web design is all about making web applications look and function properly on all types of advice.
A quick-and-dirty example would be that a website should look and function properly both in a desktop web browser and on a mobile phone browser.
An understanding of responsive design is crucial for any front-end developer!????.Learning Areas and IdeasTake the Responsive Web Design Principles section on freeCodeCamp.
Media queries, breakpointsResponsive imagesMake your website responsive!Use Chrome DevTools to view your site on different devices/viewports.
AccessibilityWeb accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with disabilities.
When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality.
(Source: Wikipedia)????.Quick TakeawayAccessibility, often written as a11y, is one of the most important topics in front-end web development, yet it seems to often get short shrift.
Creating accessible web applications is not only ethically sound, but also makes a lot of business sense considering the additional audience that will be able to view your applications when they are accessible.
????.Learning Areas and IdeasTake the Applied Accessibility section on freeCodeCamp.
Read some content on The A11Y ProjectReview their checklistUpdate your site(s) for accessibility based on this checklistgitGit is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
com)????.Quick TakeawayVersion/code control is an essential part of any web developer’s toolkit.
There are a number of different version control systems, but Git is by far the most prevalent at the moment.
You can (and should!) use it to track your projects as you learn!????.Learning Areas and IdeasGit Tutorial for Beginners (Video)Install gitSet up a github accountLearn the most-used git commands (init, clone, add, commit, push, pull, merge, rebase)Add your existing projects to github!node and npmNode.
(Source: Wikipedia)????.Quick TakeawayWhile nodejs is typically known as a back-end solution, it is used quite frequently to support front-end development.
It does this in a number of ways, including things like running build tools, testing, and linting (all to be covered soon!).
Node Package Manager (npm) is another great feature of node and can be used to manage dependencies of your project (i.
, code libraries your project might rely on — jQuery is an example!).
????. More details