Downloaded 465 times
Uploaded byOleksii Prohonnyi
Front-end development introduction (HTML, CSS). Part 1
Front-end development involves building the elements of a website that users interact with directly. This document provides an overview of HTML, CSS, semantic markup, responsive design, and tools for front-end development. It defines HTML as the standard markup language for web pages and CSS as the style sheet language used to describe document formatting. Semantic HTML uses meaningful markup to reinforce content semantics rather than just presentation. Responsive design approaches like separate files or media queries allow content to adapt to different devices. Development tools like Chrome DevTools, WebStorm IDE, and Grunt help automate tasks.
Front-end development introduction (HTML, CSS). Part 1
- 1. FRONT-END DEVELOPMENT, PART 1:HTML/CSS _by Oleksii Prohonnyi
- 3. Who am I OleksiiProhonnyi Tech. lead @ Sigma Software 4+ years in IT 2 technologies 13 mentees 60+ interviews
- 5.
- 6. Front-end development is thedevelopment of those elements of a website that the customer sees and interacts with directly. <wikipedia.org>
- 7.
- 9. HTML (HyperText MarkupLanguage) is the standard markup language used to create web pages. It is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html> ). <wikipedia.org>
- 10.
- 12. CSS (Cascading StyleSheets) is a style sheet language used for describing the look and formatting of a document written in a markup language. <wikipedia.org>
- 13.
- 15. W3C standards WebDesign and Applications Web of Devices Web Architecture Semantic Web XML Technology Web of Services Browsers and Authoring Tools
- 16. Semantic HTML/CSS is theuse of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look. Semantic HTML is processed by regular web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users. <wikipedia.org>
- 17.
- 20. DEMO (check http://foodsense.is/ inw3c validators online)
- 23.
- 25. HTML5 features NewDoctype The Figure Element No More Types for Scripts and Links To Quote or Not to Quote Make your Content Editable Custom Inputs (Regular Expressions) Placeholders The Semantic Header and Footer Audio/ Video Support The Data Attribute See more: tutsplus.com
- 26.
- 27.
- 29. CSS3 features CSSAnimations and Transitions Calculating Values With calc() Advanced Selectors Generated Content and Counters Gradients Box Sizing Border Images Media Queries Multiple Backgrounds CSS 3D Transforms See more: tutorialzine.com
- 30.
- 31.
- 34.
- 36. Device dependent styles Separate HTML file for each device JavaScript (Navigator DOM object analysis) scripting @media queries css3 styles
- 37.
- 38. Separate html fileapproach index.html + desktop.css = desktop version tablet.html + tablet.css = tablet version phone.html + phone.css = phone version
- 39.
- 40. JavaScript approach index.html desktop.css + tablet.css + phone.css main.js (check device)
- 41.
- 42. @Media queries index.html Responsive.css <No JavaScript>
- 44.
- 45. Browser’s CSS compatibility "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. http://caniuse.com
- 46.
- 48. Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. https://developer.chrome.com/devtools
- 49. DEMO (try emulation, html/cssdebugging, profiling features on http://foodsense.is/ website)
- 51.
- 53. JetBrains WebStorm IDE A lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js. https://www.jetbrains.com/webstorm/
- 55. Grunt tasks runner In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. http://gruntjs.com/
- 56. DEMO (try by yourselfWebStorm IDE and grunt task runner)
- 57.
- 59. "Life is likeriding a bicycle. To keep your balance, you must keep moving." - Albert Einstein
- 60.
- 61. References developer.mozilla.org w3schools.com css-tricks.com html5rocks.com Presentation sources: github.com
- 63.