gdg_workshop 5 on web development HTML & CSS

Dec 13, 2024Download as pptx, pdf0 likes100 views

Web development involves designing, building, and maintaining websites and web applications. It includes front-end development (user interfaces and visuals using HTML, CSS, JavaScript), back-end development (server-side logic, databases, and APIs), and full-stack development (both front-end and back-end). Web developers focus on creating user-friendly, accessible, and responsive designs. Modern tools and frameworks like React, Angular, and Django simplify the development process.

CSS: Styling the Web
Learn the foundation of web development
Organised by: GDG-SRGI & Coding Club

Harsh Agarwal
Speaker
(Web Dev Lead)
Er. Aman Saluja
Faculty Advisor

Flex Container properties
These properties are applied to the parent container (with display: flex or
display: inline-flex).
display:
Values: flex, inline-flex
Description: Establishes a flex container, enabling its children to become flex
items.
Flex Container

gdg_workshop 5 on web development HTML & CSS

Flex Container
flex-direction:
Values: row, row-reverse, column, column-reverse
Description: Defines the direction of the main axis (horizontal or
vertical).
flex-wrap:
Values: nowrap, wrap, wrap-reverse
Description: Controls whether flex items should wrap onto multiple
lines.

Flex Container
align-content:
Values: stretch, flex-start, flex-end, center, space-between, space-around
Description: Aligns rows when there's extra space on the cross axis (only works with
wrapped content).
gap, row-gap, column-gap:
Values: Any length value (e.g., 10px, 1rem)
Description: Adds spacing between flex items (gap applies to both rows and columns).

Flex Item Properties
These properties are applied to the child elements (flex items).
order:
Values: Any integer (default is 0)
Description: Controls the order of the flex items. Items with lower values appear
first.
flex-grow:
Values: Any non-negative number (default is 0)
Description: Determines how much an item should grow relative to others when
extra space is available.

Flex Item Properties
flex-shrink:
Values: Any non-negative number (default is 1)
Description: Determines how much an item should shrink relative to others when
space is insufficient.
flex-basis:
Values: Any length or auto (default is auto)
Description: Sets the initial size of an item before flex-grow or flex-shrink is applied.

Flex Item Properties
flex:
Shorthand for flex-grow, flex-shrink, and flex-basis
Values: none (0 0 auto), auto (1 1 auto), <flex-grow> <flex-shrink> <flex-basis>
Description: A shorthand property for flexible sizing.
align-self:
Values: auto, flex-start, flex-end, center, baseline, stretch
Description: Overrides align-items for individual flex items.

Flexbox is a smart new layout mode for CSS that solves many problems we've struggled with for years. It adds a degree of control we didn't have before. No longer will you need to struggle with floats and clearfixes to address page layout challenges they were never designed to handle. But wait, I hear you say, a new layout mode? Surely the browser support is awful? It's actually quite good, and I will show you how to write future-proof code that will work flawlessly in browsers that support flexbox while providing a fallback to those that don't. In this talk, I will introduce the flexbox layout module and explain what it's good for (and what's it's NOT good for). I'll give examples of usage, outline a strategy for browser support, and prepare you to use flexbox TODAY! This is a beginner level talk. You do not need to know anything about flexbox, but a basic understanding of CSS layout will be helpful.

flexbox reportLearningTech

CSS Flex Box Layout is a CSS3 web layout model that allows elements within a container to be automatically arranged and resized depending on screen size. It defines flex containers and flex items, with properties that control alignment, order, sizing, and distribution of space. Common flex properties include flex-direction, flex-wrap, justify-content, align-items, and properties for individual flex items like order, flex-grow, and align-self. Flexbox provides more flexible layout options compared to traditional CSS box model properties.

CSS Flexbox (flexible box layout)Woodridge Software

Flexbox is a CSS layout mode that allows elements to be arranged and aligned in an intelligent and space efficient way. It lets items flex and expand to fill additional space, shrink to fit into smaller spaces, and rearrange themselves depending on screen size and device orientation. Some key aspects of flexbox include the flex container, flex items, main and cross axes, flex direction, justify and align content, flex wrap, and flex grow/shrink properties.

CSS Conf Budapest - New CSS LayoutRachel Andrew

This document provides a summary of Rachel Andrew's presentation on modern CSS layout techniques at CSS Conf Budapest 2016. It discusses some of the limitations of traditional layout methods like floats and frameworks, and expresses hope for new CSS specifications like Flexbox, Grid Layout, and Box Alignment that provide true separation of document structure and visual layout with precise alignment control. Key concepts covered include items understanding themselves as part of a complete layout, flexibility and responsiveness being inherent to these new methods, and the need for responsibility when reordering content visually.

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBoxKobkrit Viriyayudhakorn

This document provides information and instructions for setting up a React Native development environment and building a basic flexbox layout application. It includes links to source code and tutorials for setting up React Native on Windows and Mac systems. The document then explains key React Native concepts like JSX syntax, basic elements, styles, and Flexbox layout properties. It provides code examples and instructions for exercises to build out a flexbox application.

Flexbox and Grid LayoutRachel Andrew

This document summarizes a talk given by Rachel Andrew on new CSS layout methods Flexbox and Grid Layout. It discusses some of the challenges with traditional layout techniques and how Flexbox and Grid Layout allow for more semantic, flexible and responsive layouts by treating items as parts of a complete layout. Key features covered include separation of document structure from visual presentation, precise control of horizontal and vertical alignment, and responsive design being built into the new specifications.

A complete guide to flexboxBytes Technolab Inc.

#4 HTML & CSS [know-how]Dalibor Gogic

The document discusses the Flexbox Layout module which aims to provide a more efficient way to lay out items in a container. It defines the flex container as direction-agnostic unlike regular layouts. It then covers the various flex properties like flex-direction, flex-wrap, justify-content, align-items, order, flex-grow, flex-shrink and flex-basis which control how flex items are laid out both along the main and cross axes within the flex container.

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Stephen Hay

This document provides an introduction to using Flexbox for web layout. It discusses key Flexbox terminology like flex containers, flex items, main axis and cross axis. It explains how to set the flex direction and wrap behavior. The document covers how to use flex properties to control flex grow, shrink and basis behaviors. It also discusses alignment of flex items along the main and cross axes using properties like justify-content and align-items. The document provides examples of common use cases for Flexbox like centering, wrapping items, and form layouts. It encourages leaving behind old layout methods and exploring the capabilities of Flexbox.

But what about old browsers?Rachel Andrew

slides-students-C04.pdfMonkeyDLuffy708724

The document provides an overview of CSS topics covered in an advanced CSS course. It includes sections on lectures covering CSS theory, the Natours project setup and use of advanced CSS techniques, responsive design, flexbox, CSS grid, and several coding projects. Individual lectures cover topics such as CSS architecture, the cascade, specificity, value processing, inheritance, and the visual formatting model.

The Right Layout Tool for the JobRachel Andrew

Is Flexbox the Future of Layout?jameswillweb

The New CSS Layout - Dutch PHP ConferenceRachel Andrew

Flexbox every developers dream2019gracesmith

Using Flexbox Today (Frontier Conf 2016)Zoe Gillenwater

With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.

JavaFX Layout Secrets with Amy FowlerStephen Chin

Using Bootstrap to Make Accessible Front-Ends(2).pptxviswa7417

Flexbox, Grid and SassSeble Nigussie

The document discusses advanced CSS3 topics including custom CSS properties, responsive page layouts using Flexboxes, Grids, and media queries. It covers defining CSS variables, using the var() function, inheritance of custom properties. Flexbox concepts like flex containers, items, properties like flex-direction, justify-content are explained. CSS Grid layout system including grid-template-columns/rows properties and grid line placement is covered. Media queries allow defining styles for different viewports using expressions. CSS preprocessors like Sass are also summarized, covering features such as variables, nesting, imports, mixins and extends to reduce repetition in CSS.

Future Layout & PerformanceRachel Andrew

The document discusses new CSS layout techniques including Flexbox and CSS Grid Layout. Some key points: - Flexbox is well supported for one-dimensional layouts while Grid Layout allows two-dimensional positioning of elements. - Grid Layout introduces the concept of explicit and implicit grid lines to control element placement. Items can be placed using line-based positioning. - Both techniques allow separation of visual layout from semantic source order and precise control of alignment both horizontally and vertically. - Features like flex-grow, flex-shrink and fr units make layouts responsive and flexible by default.

CSS Grid vs. FlexboxEcaterina Moraru (Valica)

Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI Talk at https://www.meetup.com/IS-CSS/events/262580285/ How do you know which layout technique you need to apply for your use case? We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid. Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).

The New CSS Layout - dotCSSRachel Andrew

The document discusses new CSS layout techniques including Flexbox and CSS Grid Layout. These allow for precise control of alignment both horizontally and vertically, separation of document structure from visual display, and responsive and flexible layouts by default. Examples are provided showing how Flexbox and Grid Layout can be used to create common layout patterns like equal height columns and reordering of content in a responsive way.

Using Flexbox Today (Generate Sydney 2016)Zoe Gillenwater

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle

CSS Flexbox and Grid LayoutsAnantha kumar

The document discusses CSS flexbox and grid layout properties. It provides an overview of flexbox for one-dimensional layouts and aligning items. It then covers CSS grid which enables two-dimensional layouts with columns and rows. It lists properties for the grid container and items to control the grid layout. Examples are provided and browser support referenced. In the end it questions if CSS frameworks are still needed.

MTA css layoutsDhairya Joshi

This document provides an overview of CSS layout techniques for arranging user interface content, including flexible box and grid layout models. It discusses the traditional box model and block/inline elements, and covers CSS flexbox properties for flexible layouts like flex-direction and flex-wrap. CSS grid properties are explained for controlling column, row, and cell sizes. The grid template layout module is also introduced for positioning items alphabetically within a grid.

Intro to Flexbox - A Magical CSS PropertyAdam Soucie

React nativeMohammed El Rafie Tarabay

React Native allows developers to build mobile apps using React with native platform capabilities. It uses native components instead of web views, making apps feel and perform like native ones. The document discusses what React Native is, how to set up a development environment, build a basic app, add libraries, handle common errors, and React Native fundamentals like components, styles, layout, events, and touch handling.

solution challenge tech winter break GDG Sr Group of institutionSaniyaKhan484230

The Google Solution Challenge is an annual competition hosted by Google Developers, where university students from across the globe participate in solving real-world problems. The challenge encourages participants to utilize Google technologies and collaborate within Google Developer Student Clubs (GDSC) to develop innovative solutions aligned with one or more of the United Nations' 17 Sustainable Development Goals (SDGs).

gdg_workshop 4 on web development HTML & CSSSaniyaKhan484230

More Related Content

Similar to gdg_workshop 5 on web development HTML & CSS (20)

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Stephen Hay

But what about old browsers?Rachel Andrew

slides-students-C04.pdfMonkeyDLuffy708724

The Right Layout Tool for the JobRachel Andrew

Is Flexbox the Future of Layout?jameswillweb

The New CSS Layout - Dutch PHP ConferenceRachel Andrew

Flexbox every developers dream2019gracesmith

Using Flexbox Today (Frontier Conf 2016)Zoe Gillenwater

JavaFX Layout Secrets with Amy FowlerStephen Chin

Using Bootstrap to Make Accessible Front-Ends(2).pptxviswa7417

Flexbox, Grid and SassSeble Nigussie

Future Layout & PerformanceRachel Andrew

CSS Grid vs. FlexboxEcaterina Moraru (Valica)

The New CSS Layout - dotCSSRachel Andrew

Using Flexbox Today (Generate Sydney 2016)Zoe Gillenwater

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle

CSS Flexbox and Grid LayoutsAnantha kumar

MTA css layoutsDhairya Joshi

Intro to Flexbox - A Magical CSS PropertyAdam Soucie

React nativeMohammed El Rafie Tarabay

Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)Stephen Hay

But what about old browsers?Rachel Andrew

slides-students-C04.pdfMonkeyDLuffy708724

The Right Layout Tool for the JobRachel Andrew

Is Flexbox the Future of Layout?jameswillweb

The New CSS Layout - Dutch PHP ConferenceRachel Andrew

Flexbox every developers dream2019gracesmith

Using Flexbox Today (Frontier Conf 2016)Zoe Gillenwater

JavaFX Layout Secrets with Amy FowlerStephen Chin

Using Bootstrap to Make Accessible Front-Ends(2).pptxviswa7417

Flexbox, Grid and SassSeble Nigussie

Future Layout & PerformanceRachel Andrew

CSS Grid vs. FlexboxEcaterina Moraru (Valica)

The New CSS Layout - dotCSSRachel Andrew

Using Flexbox Today (Generate Sydney 2016)Zoe Gillenwater

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle

CSS Flexbox and Grid LayoutsAnantha kumar

MTA css layoutsDhairya Joshi

Intro to Flexbox - A Magical CSS PropertyAdam Soucie

React nativeMohammed El Rafie Tarabay

More from SaniyaKhan484230 (7)

solution challenge tech winter break GDG Sr Group of institutionSaniyaKhan484230

gdg_workshop 4 on web development HTML & CSSSaniyaKhan484230

gdg_workshop 3 on web development HTML & CSSSaniyaKhan484230

gdg_workshop 2 on web development and githubSaniyaKhan484230

gdg_workshop 1 on web development and githubSaniyaKhan484230

CN.pdf (1).pdf codingninjas freshman inductionSaniyaKhan484230

Introduction (1)[1].pptx about GDG Info session 2024SaniyaKhan484230

solution challenge tech winter break GDG Sr Group of institutionSaniyaKhan484230

gdg_workshop 4 on web development HTML & CSSSaniyaKhan484230

gdg_workshop 3 on web development HTML & CSSSaniyaKhan484230

gdg_workshop 2 on web development and githubSaniyaKhan484230

gdg_workshop 1 on web development and githubSaniyaKhan484230

CN.pdf (1).pdf codingninjas freshman inductionSaniyaKhan484230

Introduction (1)[1].pptx about GDG Info session 2024SaniyaKhan484230

Recently uploaded (20)

twin tower attack 2001 new york cityharishreemavs

Slide share PPT of NOx control technologies.pptxvvsasane

Computer Security Fundamentals Chapter 1remoteaimms

Redirects Unraveled: From Lost Links to RickrollsKritika Garg

Novel Plug Flow Reactor with Recycle For Growth ControlChris Harding

MODULE 03 - CLOUD COMPUTING- [BIS 613D] 2022 scheme.pptxAlvas Institute of Engineering and technology, Moodabidri

SICPA: Fabien Keller - background introductionfabienklr

Applications of Centroid in Structural Engineeringsuvrojyotihalder2006

最新版加拿大魁北克大学蒙特利尔分校毕业证（UQAM毕业证书）原版定制Taqyea

魁北克大学蒙特利尔分校diploma安全可靠购买【Q微号:1954 292 140】魁北克大学蒙特利尔分校毕业证（UQAM毕业证书）成绩单、offer、学位证、留信学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作（包括：隐形水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠，文字图案浮雕，激光镭射，紫外荧光，温感，复印防伪）行业标杆！精益求精，诚心合作，真诚制作！多年品质 ,按需精细制作，24小时接单,全套进口原装设备，十五年致力于帮助留学生解决难题，业务范围有加拿大、英国、澳洲、韩国、美国、新加坡，新西兰等学历材料，包您满意。【关于学历材料质量】我们承诺采用的是学校原版纸张（原版纸质、底色、纹路）我们工厂拥有全套进口原装设备，特殊工艺都是采用不同机器制作，仿真度基本可以达到100%，所有成品以及工艺效果都可提前给客户展示，不满意可以根据客户要求进行调整，直到满意为止！【业务选择办理准则】一、工作未确定，回国需先给父母、亲戚朋友看下文凭的情况，办理一份就读学校的毕业证魁北克大学蒙特利尔分校毕业证（UQAM毕业证书）【微信号1954 292 140】文凭即可二、回国进私企、外企、自己做生意的情况，这些单位是不查询毕业证真伪的，而且国内没有渠道去查询国外文凭的真假，也不需要提供真实教育部认证。鉴于此，办理一份毕业证魁北克大学蒙特利尔分校毕业证（UQAM毕业证书）【微信号1954 292 140】即可三、进国企，银行，事业单位，考公务员等等，这些单位是必需要提供真实教育部认证的，办理教育部认证所需资料众多且烦琐，所有材料您都必须提供原件，我们凭借丰富的经验，快捷的绿色通道帮您快速整合材料，让您少走弯路。

Jacob Murphy Australia - Excels In Optimizing Software ApplicationsJacob Murphy Australia

In the world of technology, Jacob Murphy Australia stands out as a Junior Software Engineer with a passion for innovation. Holding a Bachelor of Science in Computer Science from Columbia University, Jacob's forte lies in software engineering and object-oriented programming. As a Freelance Software Engineer, he excels in optimizing software applications to deliver exceptional user experiences and operational efficiency. Jacob thrives in collaborative environments, actively engaging in design and code reviews to ensure top-notch solutions. With a diverse skill set encompassing Java, C++, Python, and Agile methodologies, Jacob is poised to be a valuable asset to any software development team.

ATAL 6 Days Online FDP Scheme Document 2025-26.pdfssuserda39791

Surveying through global positioning systemopneptune5

ZJIT: Building a Next Generation Ruby JITmaximechevalierboisv1

YJIT can make Ruby code run faster, but this is a balancing act, because the JIT compiler itself must consume both memory and CPU cycles to compile and optimize your code while it is running. Furthermore, in large-scale production environments such as those of GitHub, Shopify and Stripe, we end up in a situation where YJIT is compiling the same code over and over again on a very large number of servers, which seems very inefficient. In this presentation, we will go over the design of ZJIT, a next generation Ruby JIT which aims to save and reuse compiled code between executions. We hope that this will help us eliminate duplicated work while also allowing the compiler to spend more time optimizing code so that we can get better performance.

Building-Services-Introduction-Notes.pdfLawrence Omai

Generative AI & Large Language Models Agentsaasgharbee22seecs

Autodesk Fusion 2025 Tutorial: User InterfaceAtif Razi

Slide share PPT of SOx control technologies.pptxvvsasane

Interfacing PMW3901 Optical Flow Sensor with ESP32CircuitDigest

Control Methods of Noise Pollutions.pptxvvsasane

Resistance measurement and cfd test on darpa subboff modelINDIAN INSTITUTE OF TECHNOLOGY KHARAGPUR

twin tower attack 2001 new york cityharishreemavs

Slide share PPT of NOx control technologies.pptxvvsasane

Computer Security Fundamentals Chapter 1remoteaimms

Redirects Unraveled: From Lost Links to RickrollsKritika Garg

Novel Plug Flow Reactor with Recycle For Growth ControlChris Harding

MODULE 03 - CLOUD COMPUTING- [BIS 613D] 2022 scheme.pptxAlvas Institute of Engineering and technology, Moodabidri

SICPA: Fabien Keller - background introductionfabienklr

Applications of Centroid in Structural Engineeringsuvrojyotihalder2006

最新版加拿大魁北克大学蒙特利尔分校毕业证（UQAM毕业证书）原版定制Taqyea

Jacob Murphy Australia - Excels In Optimizing Software ApplicationsJacob Murphy Australia

ATAL 6 Days Online FDP Scheme Document 2025-26.pdfssuserda39791

Surveying through global positioning systemopneptune5

ZJIT: Building a Next Generation Ruby JITmaximechevalierboisv1

Building-Services-Introduction-Notes.pdfLawrence Omai

Generative AI & Large Language Models Agentsaasgharbee22seecs

Autodesk Fusion 2025 Tutorial: User InterfaceAtif Razi

Slide share PPT of SOx control technologies.pptxvvsasane

Interfacing PMW3901 Optical Flow Sensor with ESP32CircuitDigest

Control Methods of Noise Pollutions.pptxvvsasane

Resistance measurement and cfd test on darpa subboff modelINDIAN INSTITUTE OF TECHNOLOGY KHARAGPUR

gdg_workshop 5 on web development HTML & CSS

1. CSS: Styling the Web Learn the foundation of web development Organised by: GDG-SRGI & Coding Club

2. Harsh Agarwal Speaker (Web Dev Lead) Er. Aman Saluja Faculty Advisor

3. Session 2 • CSS ADVANCE • DOUBTS

4. Flex Container properties These properties are applied to the parent container (with display: flex or display: inline-flex). display: Values: flex, inline-flex Description: Establishes a flex container, enabling its children to become flex items. Flex Container

5. CODE OUTPUT

7. Flex Container flex-direction: Values: row, row-reverse, column, column-reverse Description: Defines the direction of the main axis (horizontal or vertical). flex-wrap: Values: nowrap, wrap, wrap-reverse Description: Controls whether flex items should wrap onto multiple lines.

8. CODE OUTPUT

9. CODE OUTPUT

10. CODE OUTPUT

12. Flex Container align-content: Values: stretch, flex-start, flex-end, center, space-between, space-around Description: Aligns rows when there's extra space on the cross axis (only works with wrapped content). gap, row-gap, column-gap: Values: Any length value (e.g., 10px, 1rem) Description: Adds spacing between flex items (gap applies to both rows and columns).

13. CODE OUTPUT

14. CODE OUTPUT

15. CODE OUTPUT

16. CODE OUTPUT

17. CODE OUTPUT

18. CODE OUTPUT

19. CODE OUTPUT

20. CODE OUTPUT

21. CODE OUTPUT

23. Flex Item Properties These properties are applied to the child elements (flex items). order: Values: Any integer (default is 0) Description: Controls the order of the flex items. Items with lower values appear first. flex-grow: Values: Any non-negative number (default is 0) Description: Determines how much an item should grow relative to others when extra space is available.

25. Flex Item Properties flex-shrink: Values: Any non-negative number (default is 1) Description: Determines how much an item should shrink relative to others when space is insufficient. flex-basis: Values: Any length or auto (default is auto) Description: Sets the initial size of an item before flex-grow or flex-shrink is applied.

27. Flex Item Properties flex: Shorthand for flex-grow, flex-shrink, and flex-basis Values: none (0 0 auto), auto (1 1 auto), <flex-grow> <flex-shrink> <flex-basis> Description: A shorthand property for flexible sizing. align-self: Values: auto, flex-start, flex-end, center, baseline, stretch Description: Overrides align-items for individual flex items.

29. Assignment

30. THANK YOU!!

gdg_workshop 5 on web development HTML & CSS

Recommended

More Related Content

Similar to gdg_workshop 5 on web development HTML & CSS (20)

More from SaniyaKhan484230 (7)

Recently uploaded (20)

gdg_workshop 5 on web development HTML & CSS