Download to read offline
Uploaded byabdulrahmanabdullah32
Intro to front end development Basic
This document provides an outline and overview of HTML, CSS, and responsive web design topics. It includes sections on HTML tags and attributes, CSS properties like display and box model, and responsive design techniques like viewport, media queries, and common patterns like fluid layouts. The document contains examples and exercises for readers to practice these concepts.
In this document
Powered by AI
Introduction of speaker Abdulrahman Abdullah including contact information.
Overview topics covered such as HTML, CSS, and exercises on media queries and patterns.
Introduction to HTML, defined as Hypertext Markup Language.
Brief background on Sir Tim Berners-Lee, creator of the World Wide Web.
Explanation about the Document Object Model (DOM) in HTML.
Overview of how HTML elements display on web pages.
Examples of HTML elements including block and inline elements.
Discussion on common file extensions used for HTML documents.
More examples of HTML elements and their usage.
Understanding attributes and values in HTML tags.
Introduction to CSS, defined as Cascading Style Sheets.
Methods to combine CSS with HTML, including inline styles and linked files.
Overview of different CSS selectors used to select HTML elements.
Comparative insight into Class vs ID selectors based on CSS guidelines.
Understanding attributes and their values specifically in the context of CSS.
Illustration of how everything in a webpage can be conceptualized as a box.
Detailed explanation of the box model in CSS.
Key CSS properties including display, sizing, float, and aesthetics.
Descriptions of display types like block, inline, flex, and others.
Introduction to flexbox as a layout model for CSS.
Explanation of flex-direction in the flexbox model.
Significance of responsive web design catering to various screen sizes.
Explanation of initial-scale and viewport width settings.
Guidelines for implementing responsive design including viewport usage and testing.
Introduction to breakpoints and media queries in responsive design.
Overview of min-width and max-width media queries.
Activities to set different background colors based on screen sizes.
Description of common responsive web design patterns focusing on fluid patterns.
Exercise to build a webpage containing 5 boxes with fluid patterns.
Review and answer session related to the preceding exercises.
More Related Content
Similar to Intro to front end development Basic
Intro to front end development Basic
- 1. Front End Developer welcome By:Abdulrahman Abdullah twitter : @nfs056 email : nfs 056moc.liamg@
- 2. 1 2 3 Outline HTML: >FileExtension. >DOM. >Display >Example. >Activity. CSS: >CSS shortcut. >Bringing CSS & HTML together. >Attribute & Value. >Class & ID. >Display. Exercise: >Media query >Fluid pattern >Column pattern.
- 3.
- 4. #HTML Sir TimBerners-Lee Is an English engineer and computer scientist create the World Wide Web
- 5.
- 6.
- 7. Example Block-level inline-level <em ><strong> <li > #HTML <a > Tag <body> , <p> , <header> , <h 1>lo< , >lu< , >vid< , >… etc
- 8.
- 9.
- 10. Attribute & Value <ahref=”top 10lmth.”a/<seivoM taerG>> attribute valueequals sign #HTML
- 11.
- 12.
- 13.
- 14. #CSS Class VS ID Source: CSS: The Definitive Guide (Book)
- 15.
- 16. Thinking of boxes ●Everything in a webpage is a box ! Always think of boxes.
- 17.
- 18. 9Important CSS properties ●Display ● Width & height ● Float ● Color ● Font ● Background ● Margin ● Padding ● Border Resource
- 19. #CSS CSS Display Block inlineinline-block flex elementelement element inline-flex element element element OR
- 20. #CSS >flexbox is alayout-based add-on to css 3. >ease to use and well support. >flexbox is based on the relationship between a parent layout container and it’s flexible child layout. Flexbox
- 21.
- 22. Why Responsive? “Every device hasdifferent screen size, use viewport to match the device dimensions”
- 23. Ex : ● The initial-scaleproperty controls the zoom level when the page is first loaded. ● The width controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width
- 24. ● Add viewportin head tag . ● Use relative width: set sizes in terms of percentages rather than pixels. ● Specify max-width. ● Set the box-sizing attribute to border-box for every element. ● Different browsers work slightly differently. Sometimes this causes different browsers to display the same code differently, so test your code in different browser.
- 25. Breakpoint & Mediaquery
- 26.
- 27. Media query Exercise ●Between 0 and 500🡪 Set the background color to blue ot txet dna white ● Between 501 and 800🡪 Set the background color to orange ot txet dna black ● For larger screen 🡪Set the background color to white ot txet dna purple
- 28. Common Responsive WebDesign Patterns Mostly fluid
- 29. Fluid pattern Codelab Build webpage contain 5 boxes with fluid pattern
- 30.