A Complete Guide to Frontend - UI Developer

1. A Complete Guide to
Frontend - UI Developer

2. Frontend - UI development Guide
HTML, HyperText Markup Language, gives content structure and meaning by defining that content as, for
example, headings, paragraphs, or images. The three common HTML terms you should begin with are
elements, tags, and attributes. HTML is like constructed building without painting colors and interior.
Elements:
Elements are designators that define the structure and content of objects within a page. Some of the
more frequently used elements include multiple levels of headings and paragraphs. Ex - <a>
Tags:
The use of less-than and greater-than angle brackets surrounding an element creates what is known as a
tag. Tags most commonly occur in pairs of opening and closing tags. Ex - <a> … </a>
HTML

3. Frontend - UI development Guide
Attributes:
Attributes are properties used to provide additional information about an element. The most common
attributes include the id attribute, which identifies an element; the class attribute, which classifies an
element; the src attribute, which specifies a source for embeddable content; and the href attribute, which
provides a hyperlink reference to a linked resource. Ex - <a href="http://google.com/">Google</a>
Not all elements consist of opening and closing tags. Ex - <img>, <br/>
HTML

4. Frontend - UI development Guide
Semantic Elements:
Semantic elements = elements with a meaning. A semantic element clearly describes its meaning to both
the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing
about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its
content. In HTML there are some semantic elements that can be used to define different parts of a web
page.
HTML Accessibility:
Accessibility is strongly related to universal design which is the process of creating products that are
usable by people with the widest possible range of abilities, operating within the widest possible range of
situations.
HTML

5. Frontend - UI development Guide
W3C Standards:
The World Wide Web Consortium (W3C) develops international Web standards: HTML , CSS , and many
more. W3C's Web standards are called W3C Recommendations.
Best Free Editors - Visual Studio Code (VS Code), Notepad++, Sublime text 3
W3C Validation Website - https://validator.w3.org
Learning Website - https://www.w3schools.com | https://www.javatpoint.com/html-tutorial
HTML

6. Frontend - UI development Guide
CSS:
CSS stands for Cascading Style Sheets. CSS is the language for describing the presentation of web
pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of
devices, such as large screens, small screens etc. CSS is independent of HTML and can be used with any
XML-based markup language.
CSS Selector:
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS
selectors select HTML elements according to its id, class, type, attribute etc.
CSS Selectors - Element, Id, Class, Universal and Group Selector | Pseudo | Combinators
CSS / CSS3

7. Frontend - UI development Guide
CSS Media Queries:
The media queries are a special syntax for CSS that allows us to define some styles that will only be
applied in the case that defined conditions are met.
Media queries are useful when you want to modify your site or app depending on a device's general type
(such as print vs. screen) or specific characteristics and parameters (such as screen resolution or
browser viewport width).
Media queries add no specificity to the selectors they contain, but source order still matters.
CSS / CSS3

8. Frontend - UI development Guide
CSS Units:
CSS has several different units for expressing a length, Height and Sizes.
Ex - px, rem - relative to font-size of the root element, em - relative to the font-size of the element, vw -
relative to 1% of the width of the viewport, vh - relative to 1% of the height of the viewport, % etc.
CSS Naming conventions:
One of the difficult things in computer science and programming in general is naming things and naming
things in CSS is no different. Naming conventions in CSS are hugely useful in making your code more
strict, more transparent, and more informative. Ex - BEM, SMACSS, ITCSS, OOCSS, AMCSS
DRY CSS Rule - Don't Repeat Your CSS
CSS / CSS3

9. Frontend - UI development Guide
CSS3:
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2. It
brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations,
as well as new layouts like multi-columns, flexible box or grid layouts.
SCSS (Syntactically Awesome Style Sheets) / LESS (CSS Preprocessor):
SCSS/LESS is a preprocessor which lets you use features that aren’t a part of the wider CSS standard yet,
and provides better workflows for maintaining your stylesheets. With SCSS/LESS preprocessor, you can
reduce the amount of times you repeat yourself and ensure you’re writing clean, maintainable code for
the future. Dry (don't repeat yourself) code is much better then wet code (write every time).
Learning Website - https://www.w3schools.com/sass | https://www.javatpoint.com/sass-tutorial
CSS / CSS3

10. Frontend - UI development Guide
SCSS with Gulp:
Gulp is a tool that helps you out with several tasks when it comes to web development. It’s often used to
do front end tasks like: Compiles Sass to CSS and Optimizing assets like CSS, JavaScript, and images.
Setup Guide -
https://css-tricks.com/gulp-for-beginners/ (Gulp 3.x) ,
https://coder-coder.com/gulp-4-walk-through (Gulp 4),
Sample Gulp File - https://github.com/nariyarvi/SCSS-MDBootstrap-with-gulp/blob/master/gulpfile.js
CSS / CSS3

11. Frontend - UI development Guide
sass/
|
|– abstracts/ (or utilities/)
| |– _variables.scss // Sass Variables
| |– _functions.scss // Sass Functions
| |– _mixins.scss // Sass Mixins
|
|– base/
| |– _reset.scss // Reset/normalize
| |– _typography.scss // Typography rules
|
|– components/ (or modules/)
| |– _buttons.scss // Buttons
| |– _carousel.scss // Carousel
| |– _slider.scss // Slider
|
CSS / CSS3 |– layout/
| |– _navigation.scss // Navigation
| |– _grid.scss // Grid system
| |– _header.scss // Header
| |– _footer.scss // Footer
| |– _sidebar.scss // Sidebar
| |– _forms.scss // Forms
|
|– pages/
| |– _home.scss // Home specific styles
| |– _about.scss // About specific styles
| |– _contact.scss // Contact specific styles
|
|– themes/
| |– _theme.scss // Default theme
| |– _admin.scss // Admin theme
|
|– vendors/
| |– _bootstrap.scss // Bootstrap
| |– _jquery-ui.scss // jQuery UI
|
`– main.scss // Main Sass file
SCSS Folder Structure:

12. Frontend - UI development Guide
JavaScript:
JavaScript is a Front-End side scripting language that enables you to create dynamically updating
content, control multimedia, animate images, and pretty much everything else in HTML. HTML and CSS
are languages that give structure and style to web pages, JavaScript gives web pages interactive
elements that engage a user.
Learning Website - https://www.w3schools.com/js/default.asp | https://javascript.info/
jQuery:
jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much
easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of
JavaScript / jQuery

13. Frontend - UI development Guide
jQuery:
JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery is great for things like animations, Ajax requests, DOM manipulation, image effects, and user
interface elements.
jQuery Mobile: jQuery Mobile is a cross platform mobile js framework
Learning Website -
https://www.w3schools.com/jquery/jquery_intro.asp
https://www.javatpoint.com/jquery-tutorial
https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA
JavaScript / jQuery

14. Frontend - UI development Guide
Bootstrap:
Bootstrap is a potent front-end framework used to create modern responsive websites and web apps. It's
open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements
such as buttons and forms, tables, navigation, modals, image carousels and many other.
MDBootstrap: It’s bootstrap framework with material design.
Learning Website -
https://www.w3schools.com/bootstrap4
https://getbootstrap.com/docs/4.1/getting-started/introduction
https://mdbootstrap.com/
Bootstrap

15. Frontend - UI development Guide
CSS Animation libraries:
Animate.css - https://animate.style/
AOS - https://michalsnik.github.io/aos/
All Animation - https://all-animation.github.io/
Hover Animation - https://ianlunn.github.io/Hover/
javaScript Animation libraries:
GreenSock - GSAP is an industry standard JavaScript animation library from GreenSock that lets you
craft high-performance animations that work in every major browser.
Link - https://greensock.com/
Animation

16. Frontend - UI development Guide
PerfectPixel Chrome Tool: This extension helps develop your websites with pixel perfect accuracy
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekco
ceebi
Cross Browser Test -
https://www.browserstack.com/ | https://developers.google.com/web/tools/chrome-devtools
Accessibility Test -
https://www.w3.org/wiki/Accessibility_testing | https://www.a11yproject.com/checklist/
Speed Test - https://developers.google.com/speed/pagespeed/insights/ | https://gtmetrix.com/
Testing Tools

17. Frontend - UI development Guide
Free Online Photoshop: https://www.photopea.com/
Free Icons : https://www.flaticon.com/ | Free Web Icons : https://fontawesome.com/
Free Fonts : https://fonts.google.com/ | Web Font Generator : https://transfonter.org/
Color Picker : http://colorzilla.com/
Gradient Color and Box Shadow Generator: https://www.cssmatic.com/
Sliders : https://owlcarousel2.github.io/OwlCarousel2/ | https://kenwheeler.github.io/slick/
Custom Selectors : https://select2.org/ | Charts - https://www.chartjs.org/
Screenshot and Screen Recording : https://www.awesomescreenshot.com/
Stack Overflow: It is a question and answer site for professional developers - https://stackoverflow.com/
Other Tools

18. Frontend - UI development Guide
JavaScript frameworks and libraries - Angular, React and Vue etc:
javaScript frameworks are collections of JavaScript code libraries that provide developers with
pre-written JS code to use for routine programming features and tasks—literally a framework to build
websites or web applications around. JavaScript framework is an application framework written in
JavaScript where the programmers can manipulate the functions and use them for their convenience.
JavaScript was initially used only for the client-side. However, these days, JavaScript is used as a
server-side programming language as well.
Websites - https://angular.io/ | https://reactjs.org/ | https://vuejs.org/
Advance Frontend Technologies

19. The ability to better solve problems and write neat & elegant code
is an important criterion to set us apart from other common
developers. Meanwhile, to keep up with the high-speed
development of tech and grasp our opportunities, we need to keep
learning and striving always the time.
Thank You
Ravi M Nariya
Think Crazy Be Different
nariyaravieng@gmail.com
www.ravinariya.com