Learning Areas and IdeasTake the Basic CSS, CSS flexbox, and CSS grid sections on freeCodeCamp.
In-line CSS<style> tagsExternal CSS with <link>Styling elementsSelectorsFloats, clearning floatsLayouts (grid, flexbox)Fonts, custom fontsStyle the HTML page(s) you made when learning HTML!JavaScriptJavaScript , often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification.
It is a language that is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.
Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web.
JavaScript enables interactive web pages and thus is an essential part of web applications.
The vast majority of websites use it, and all major web browsers have a dedicated JavaScript engine to execute it.
(Source: Wikipedia)????.Quick TakeawayJavaScript has become increasingly important in the front-end world.
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.
g.
, routing and displaying different views).
????.Learning Areas and IdeasTake the Basic JavaScript and ES6 sections on freeCodeCamp.
Too many language fundamentals to list here!<script> tag and placementAccessing HTML elementsThe event loop, call stack, and event queuePrototypal InheritanceReference vs.
valueAdd some dynamic elements or logic to your HTML/CSS page(s) developed earlier!jQueryjQuery is a fast, small, and feature-rich JavaScript library.
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.
With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
(Source: jQuery.
com)????.Quick TakeawayAfter you have spent some time with plain (also called “vanilla”) javascript, you may find some tasks a bit cumbersome, especially those related to accessing and manipulating HTML elements.
For quite a while, jQuery was the go-to library for making these kinds of tasks easier and consistent across different browsers.
Nowadays, jQuery isn’t necessarily “mandatory” learning because of advancements in vanilla javascript, CSS, and newer javascript frameworks (we’ll look at frameworks later).
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.
(Source: git-scm.
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.
js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.
JavaScript is used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a webpage’s HTML and run client-side by a JavaScript engine in the user’s web browser.
Node.
js lets developers use JavaScript to write command line tools and for server-side scripting — running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser.
Consequently, Node.
js represents a “JavaScript everywhere” paradigm, unifying web application development around a single programming language, rather than different languages for server side and client side scripts.
(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.
e.
, code libraries your project might rely on — jQuery is an example!).
????. More details