Front-end

Front-end

1. CSS

   • SASS is a CSS preprocessor that enables you to create nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS.
     • Sigla BEM significa Block Element Modifier, em português, Bloco, Elemento, Modificador. Por exemplo: .card { &__image {} &__description {} &__button { &--success{} &--back{} } }
     • Nesting: Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. For example: nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
       • The Parent Selector is an & selector that allows you to reference the “parent” element. It is possible to add pseudo-classes like &:hover, pseudo_elements like &:before, and also suffixes for classes. In CSS a class would be: .component .component__text {}, in Sass it is: .component { &__text {} }
         • The SASS can see parameter as lastchild(), for example: &__list{ &:not(:last-child){ border-bottom: 1px dashed $light-grey; } }
     • Interpolation: it is nothing more than calling this variable with a hashtag and braces, it's the symbol of the Tic Tac toe, then I open and close braces and inside I paste my variable. For example: &__txt {width: calc(100% - #{$img-width})}
     • A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean. For example: %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } .message { @extend %message-shared; }
     • Media queries and assign a certain style to a certain screen size ,for example: @mixin for-iphone-only { media (max-width: 767.98px) ( @content; ) } $__list{ @include for-iphone-only { width: 80%; padding: 20px 0; }}
     • The SASS enables you to create functions, as an example: @function calculateRem($size){ @return $size / 16px * rem; } @mixin fontSize($size){ font-size: calculateRem($size); }
     • You can import multiple files with SASS using @import 'header', 'footer', 'about'; However, the .scss need has '_' at front of the file to be comiiled
     • You can use foreach to make some configurations in your code, for example
       • $directions: top, bottom, left, right; $layout-margin-size: 10px; @each $direction in $directions { %no-margin-#{$direction} {margin-#{$direction}: 0;} %default-margin-#{$direction} {margin-#{$direction}: $layout-margin-size;} %double-margin-#{$direction} {margin-#{$direction}: $layout-margin-size * 2;} %half-margin-#{$direction} {margin-#{$direction}: $layout-margin-size / 2;} }
         • &__date { @extend %no-margin-top, %no-margin-bottom, %default-margin-left, %default-margin-right; font-size: 12px; font-style: italic; }

2. HTML5

   • How do you define HTML5?
     • HTML5 introduces some new features including: Adding new parsing rules to enhance flexibility. Adding New attributes. Allow offline editing. Support (Web SQL) Support Protocol and MIME handler registration. These features can be used to change the way of user interaction with documents.
     • HTML5 is the most recent rendition of the Hypertext Markup Language, also referred to as the WWW (World Wide Web)'s fundamental language. This markup language augments a text file with bits of code, and this code, which we call markup, describes the structure of the document.
     • What are W3C and WHATWG?
       • The World Wide Web Consortium (W3C) is a community of developers working towards setting global standards for development. WHATWG is short for Web Hypertext Application Technology Working Group. It was created during a W3C workshop by Apple, Mozilla and Opera Software in 2004. WHATWG is a community of developers focused on setting HTML standards to improve on user needs.
     • What are ‘semantic elements’ in HTML5?
       • Semantic HTML provides meaning to the web page as opposed to just presentation. A <p> tag, for example, indicates that the enclosed text is a paragraph. This is both semantic and presentational as we as humans know what paragraphs are, and the browsers know how to display them.
   • Please name the media element tags introduced by HTML5.
     • The new media element tags introduced by HTML5 are listed below: <audio>: Used for multimedia like sounds, audio streams, or music, embed audio content without any additional plug-in requirement like the flash player. <video>: Used for video content like video streams or movie clips, embed video content, etc. <source>: Used for multiple media resources in media elements, such as audio, video, picture, etc. <embed>: Used for external applications or embedded content (a plug-in). <track>: Used for adding subtitles or other files containing text in video or audio elements as the respective media play on a web page.
   • What is the purpose of <!Doctype html>?
     • The <!DOCTYPE> declaration is written at the top of every HTML5 page, and it instructs the web browser about the version and type of HTML being used in building the web document. This allows the browser to handle and load the web document properly. In HTML5, the DOCTYPE declaration is short and simple. It is also case-insensitive. In HTML, the DOCTYPE is case insensitive. There are three types of DOCTYPES, as mentioned below: Strict Doctype Frameset Doctype Transitional Doctype
   • Please discuss some of the advantages of using HTML5.
     • HTML5 is the most recent rendition of HTML. HTML5 allows the creation of easier and more interactive websites by embedding video, audio, and graphics on the web page. HTML5 supports multimedia technology and graphical content to the web without using any third-party plugins. Some of the most important features added by HTML5 include: Geolocation Offline Application Cache Client-side database Error Handling New Structure and new multimedia elements. Browser Support and compatibility. Supports Some New Application Programming Interface (API) like: Browser History Management Drag and Drop 2D drawing on a web page Time media playback Supported Applications include: Web Workers – JavaScript Local File Access Application Cache Local data storage Local SQL databases
   • List out the page structure elements of HTML5.
     • Here is a list of page structure elements in HTML5: <header> - Used to define header for a document or a section <nav> - Used to define container for navigation links <section> - Used to define a section inside a document <article> - Used to tag an independent self-contained article <aside> - Defines the content separately (just like a sidebar) <footer> - Used for tagging a footer inside a document or a section <details> - Used to define any additional details <summary> - Used to define a heading inside the <details> element