Frontend Learning Journey

The humble way i took to learn frontend web development, Be free to add any helpful resources!

Summary

• What is frontend
• What this repository contains
• How to run the projects
• Resources & tutorials
• CSS Frameworks
• Credits

What is frontend (By wikipedia)

Front-end web development is the practice of converting data to graphical interface for user to view and interact with data through digital interaction using HTML, CSS and JavaScript. There are several tools and platforms (wordpress, magento etc..) available that can be used to develop the front end of a website, and understanding which tools are best fit for specific tasks marks the difference between developing a hacked site and a well designed, scalable site.

Hyper Text Markup Language (HTML)

Hyper Text Markup Language (HTML) is the backbone of any website development process, without which a web page doesn't exist. Hypertext means that text has links, termed hyperlinks, embedded in it. When a user clicks on a word or a phrase that has a hyperlink, it will bring another web-page. A markup language indicates text can be turned into images, tables, links, and other representations. It is the HTML code that provides an overall framework of how the site will look. HTML was developed by Tim Berners-Lee. The latest version of HTML is called HTML5 and was published on October 28, 2014 by the W3 recommendation. This version contains new and efficient ways of handling elements such as video and audio files.

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) controls the presentation aspect of the site and allows your site to have its own unique look. It does this by maintaining style sheets which sit on top of other style rules and are triggered based on other inputs, such as device screen size and resolution.

JavaScript

JavaScript is an event-based imperative programming language (as opposed to HTML's declarative language model) that is used to transform a static HTML page into a dynamic interface. JavaScript code can use the Document Object Model (DOM), provided by the HTML standard, to manipulate a web page in response to events, like user input.

How to run the projects

1. Click on the html file to open it
2. Done! it will open your default browser and navigate to the web page

Resources & tutorials

Design

• http://52weeksofux.com
• http://thedesigncubicle.com
• http://smashingmagazine.com
• http://littlebigdetails.com
• http://markboulton.co.uk/archives
• http://mikeindustries.com/blog/archive/2004/05/getting-started-in-design
• http://webtypography.net
• http://cooper.com/journal
• http://adaptivepath.org/ideas
• http://zurb.com/blog
• http://google.com/design
• https://themanual.org/read

HTML

• http://diveintohtml5.info
• http://html5demos.com
• http://html5doctor.com
• http://html5rocks.com
• http://htmldog.com
• http://developer.mozilla.org/en/HTML
• http://developer.mozilla.org/en-US/learn/html
• http://html5boilerplate.com
• http://webplatform.org
• https://gist.github.com/nathansmith/0b46e5a76ccb20af9de063f7c3f58d5b
• https://websitesetup.org/html5-cheat-sheet

CSS

• http://css-tricks.com
• http://csstutorial.net
• http://csszengarden.com
• http://developer.mozilla.org/en/CSS
• http://developer.mozilla.org/en-US/learn/css
• http://meyerweb.com/eric/css
• http://css-101.org
• http://iamacamera.org/default.aspx?id=95
• http://stopdesign.com/archive/2004/07/27/throwing-tables.html
• https://websitesetup.org/css3-cheat-sheet

JavaScript

• https://pinboard.in/u:nathansmith/t:javascript
• http://adaptivepath.org/ideas/ajax-new-approach-web-applications
• http://developer.mozilla.org/en/javascript
• http://developer.mozilla.org/en-US/learn/javascript
• http://javascriptweekly.com
• http://badassjs.com
• http://dailyjs.com
• http://bonsaiden.github.com/JavaScript-Garden
• http://paulirish.com
• http://wait-till-i.com
• http://icant.co.uk
• http://davidwalsh.name
• http://blog.reybango.com/2010/12/15/what-to-read-to-get-up-to-speed-in-javascript
• https://youtube.com/user/yuilibrary
• https://medium.com/javascript-scene
• https://gist.github.com/nathansmith/eda4ca58deda2d48203cd6bd4c229b0c
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript

CSS Frameworks

• Bootstrap - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• bootswatch - Bootswatch is a collection of free themes for Bootstrap.
• Materialize - A modern responsive front-end framework based on Material Design.
• SemanticUI - Semantic is a UI component framework based around useful principles from natural language.
• AmazeUI - A mobile-first and modular front-end framework.
• Skeleton - Skeleton is a simple, responsive boilerplate to kickstart any responsive project.
• bootstrap-material-design - Material design theme for Bootstrap 3.
• MUI - MUI is a lightweight CSS framework that follows Google's Material Design guidelines.
• Bulma - Bulma is a modern CSS framework based on Flexbox.

Credit

I want to say thank you for all my friends that helped and guided me all the way.