Front-end development introduction (HTML, CSS). Part 1
Download as PPTX, PDF•13 likes•18,664 views
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 Oleksii Prohonnyi Tech. lead @ Sigma Software 4+ years in IT 2 technologies 13 mentees 60+ interviews
- 5. FRONT-END
- 6. Front-end development is the development of those elements of a website that the customer sees and interacts with directly. <wikipedia.org>
- 7. HTML
- 9. HTML (HyperText Markup Language) 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. CSS
- 12. CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in a markup language. <wikipedia.org>
- 15. W3C standards Web Design and Applications Web of Devices Web Architecture Semantic Web XML Technology Web of Services Browsers and Authoring Tools
- 16. Semantic HTML/CSS is the use 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>
- 20. DEMO (check http://foodsense.is/ in w3c validators online)
- 23. HTML5
- 25. HTML5 features New Doctype 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. DEMO (open example from file)
- 27. CSS3
- 29. CSS3 features CSS Animations 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. DEMO (open example from file)
- 36. Device dependent styles Separate HTML file for each device JavaScript (Navigator DOM object analysis) scripting @media queries css3 styles
- 37. RESPONSIVE DESIGN SEPARATE HTML FILE
- 38. Separate html file approach index.html + desktop.css = desktop version tablet.html + tablet.css = tablet version phone.html + phone.css = phone version
- 40. JavaScript approach index.html desktop.css + tablet.css + phone.css main.js (check device)
- 42. @Media queries index.html Responsive.css <No JavaScript>
- 44. DEMO (open example from file)
- 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. CHROME DEV TOOLS
- 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/css debugging, profiling features on http://foodsense.is/ website)
- 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 yourself WebStorm IDE and grunt task runner)
- 57. ONE MORE THING
- 59. "Life is like riding a bicycle. To keep your balance, you must keep moving." - Albert Einstein
- 60. REFERENCES
- 61. References developer.mozilla.org w3schools.com css-tricks.com html5rocks.com Presentation sources: github.com