#gridlayout
Explore tagged Tumblr posts
Last Seen Blogs
Text
Introducción a CSS: Estilizando la Web
Introducción
CSS (Cascading Style Sheets) es el lenguaje que se utiliza para describir la presentación de un documento escrito en HTML o XML. Mientras que HTML estructura el contenido de la web, CSS se encarga de darle estilo, desde la disposición de los elementos hasta los colores y las fuentes. Si estás empezando en el mundo del desarrollo web, aprender CSS es esencial para crear sitios atractivos y funcionales. En este blog, te proporcionaré una introducción a CSS, cubriendo sus conceptos básicos y algunas prácticas recomendadas para que puedas comenzar a diseñar páginas web impresionantes.
1. ¿Qué es CSS?
CSS es un lenguaje de hojas de estilo que permite definir cómo se muestran los elementos de un documento HTML en la pantalla, en papel o en otros medios. Gracias a CSS, puedes separar la estructura de un sitio web de su presentación, lo que facilita el mantenimiento y la escalabilidad del diseño.
a) Características Principales de CSS:
Selección de Elementos: CSS te permite seleccionar y aplicar estilos a elementos HTML específicos o a grupos de elementos.
Diseño Responsivo: CSS facilita la creación de diseños que se adaptan a diferentes tamaños de pantalla, desde dispositivos móviles hasta monitores de escritorio.
Control de Estilos Visuales: Con CSS, puedes controlar el color, el tamaño, la fuente, el espacio entre elementos, y mucho más.
2. Cómo Empezar con CSS
Para comenzar a usar CSS, puedes incluir las reglas de estilo directamente en un archivo HTML o en un archivo CSS separado. A continuación te muestro cómo hacerlo:
a) CSS en Línea:
Puedes aplicar estilos directamente en los elementos HTML utilizando el atributo style.
b) CSS Interno:
Puedes definir un bloque de CSS dentro de la etiqueta <style> en el <head> de tu documento HTML.
c) CSS Externo:
La mejor práctica es usar un archivo CSS separado para mantener el estilo y el contenido por separado.
Contenido de styles.css:
3. Conceptos Básicos de CSS
CSS se basa en reglas que constan de selectores y declaraciones. A continuación te explico los conceptos más importantes:
a) Selectores:
Los selectores indican qué elementos HTML deben ser estilizados.
Selector de Elemento:
Selector de Clase:
Selector de ID:
b) Propiedades y Valores:
Las propiedades son aspectos específicos del estilo que se aplican a los elementos, como color, fuente, y margen.
Propiedad color: Cambia el color del texto.
Propiedad font-size: Cambia el tamaño de la fuente.
Propiedad margin: Define el espacio exterior alrededor de un elemento.
c) Especificidad y Herencia:
La especificidad determina qué reglas CSS se aplican cuando hay conflictos, y la herencia permite que ciertos estilos se transmitan a los elementos hijos.
Especificidad:
Herencia:
4. Diseño de Páginas Web con CSS
CSS permite controlar el diseño y la disposición de los elementos en una página web, facilitando la creación de sitios visualmente atractivos y organizados.
a) Modelos de Caja (Box Model):
Cada elemento en CSS se representa como una caja que comprende márgenes, bordes, rellenos y el contenido.
b) Layouts (Diseños):
CSS proporciona varias técnicas para organizar elementos en una página, incluyendo Flexbox y Grid.
Flexbox:
Grid Layout:
c) Media Queries y Diseño Responsivo:
Las media queries permiten que los diseños se adapten a diferentes tamaños de pantalla, lo que es fundamental para crear sitios web responsivos.
5. Recursos para Aprender Más CSS
Documentación Oficial:
MDN Web Docs: Una guía completa que cubre todo lo que necesitas saber sobre CSS.
Tutoriales en Línea:
CSS-Tricks: Un sitio repleto de tutoriales, ejemplos y trucos para mejorar tu uso de CSS.
W3Schools: Un recurso fácil de seguir para aprender los fundamentos de CSS con ejemplos prácticos.
Libros Recomendados:
“CSS: The Definitive Guide” de Eric A. Meyer: Un recurso profundo para desarrolladores que quieren dominar CSS.
“CSS Secrets” de Lea Verou: Este libro revela técnicas avanzadas para crear efectos y diseños sorprendentes con CSS.
Conclusión
CSS es una herramienta poderosa para cualquier desarrollador web. Desde controlar la apariencia básica de los elementos hasta diseñar sitios complejos y responsivos, el dominio de CSS te permitirá crear experiencias web atractivas y profesionales. Comienza practicando con los conceptos básicos, y poco a poco, profundiza en las técnicas más avanzadas para llevar tus diseños al siguiente nivel.
#CSS#diseñoweb#desarrolloweb#estiloweb#frontenddevelopment#aprendeCSS#webdesign#cssbasics#webdevelopment#responsiveweb#flexbox#gridlayout#webstyling#tutorialesCSS#cssdesign#cssgrid#htmlandcss#webdev#cssforbeginners#diseñoresponsivo#coding#webcoding#frontend#webcss#estilosweb
0 notes
Photo
Start slowly. Artifact Uprising VSCO Grid Take your time to discover the magic of Artifact Uprising and unleash your creativity on the captivating VSCO Grid. Let the process unfold at its own pace.
0 notes
Text
How to make your HTML responsive using display grid. 💯✅
To make your HTML responsive using display grid, you can follow these steps:
#beginners#css#html#web#responsiveDesign#webDesign#gridLayout#mediaQueries#webDevelopment#frontEndDevelopment#codeSnippet#programmingTips
1 note
·
View note
Photo
𝟏𝟎 𝐌𝐮𝐬𝐭-𝐊𝐧𝐨𝐰 𝐆𝐢𝐭 𝐂𝐨𝐦𝐦𝐚𝐧𝐝𝐬 𝐓𝐡𝐚𝐭 𝐚𝐫𝐞 𝐤𝐧𝐨𝐰𝐧 𝐛𝐲 𝐟𝐞𝐰𝐞𝐫 𝐩𝐞𝐨𝐩𝐥𝐞 (newbie). 𝟏. 𝐀𝐝𝐝/𝐂𝐨𝐦𝐦𝐢𝐭 𝐀𝐥𝐥 Standard way: git add . git commit -m "Message" Another way: git commit -a -m "Message" 𝟐. 𝐀𝐥𝐢𝐚𝐬𝐞𝐬 With aliases, you can write your own Git commands that do anything you want. Eg: git config --global alias.ac '!git add -A && git commit -m' (alias called ac, git add -A && git commit -m will do the full add and commit) 𝟑. 𝐑𝐞𝐯𝐞𝐫𝐭 The revert command simply allows us to undo any commit on the current branch. Eg: git revert 486bdb2 Another way: git revert HEAD (for recent commits) 𝟒. 𝐑𝐞𝐟𝐥𝐨𝐠 This command lets you easily see the recent commits, pulls, resets, pushes, etc on your local machine. Eg: git reflog 𝟓. 𝐏𝐫𝐞𝐭𝐭𝐲 𝐋𝐨𝐠𝐬 Gives you the ability to print out a pretty log of your commits/branches. Eg: git log --graph --decorate --oneline 𝟔. 𝐒𝐞𝐚𝐫𝐜𝐡𝐢𝐧𝐠 𝐋𝐨𝐠𝐬 One can also use the log command to search for specific changes in the code. Eg: git log -S "A promise in JavaScript is very similar" 𝟕. 𝐒𝐭𝐚𝐬𝐡 This command will stash (store them locally) all your code changes but does not actually commit them. Eg: git stash 𝟖. 𝐑𝐞𝐦𝐨𝐯𝐞 𝐃𝐞𝐚𝐝 𝐁𝐫𝐚𝐧𝐜𝐡𝐞𝐬 This command will delete all the tracking information for branches that are on your local machine that are not in the remote repository, but it does not delete your local branches. Eg: git remote update --prune 𝟗. 𝐁𝐢𝐬𝐞𝐜𝐭 For finding which commits caused certain bugs Eg: git bisect start git bisect bad git bisect good 48c86d6 𝟏𝟎. 𝐃𝐞𝐬𝐭𝐫𝐨𝐲 𝐋𝐨𝐜𝐚𝐥 𝐂𝐡𝐚𝐧𝐠𝐞𝐬 One can wipe out all changes on your local branch to exactly what is in the remote branch. Eg: git reset --hard origin/main 🚀 Follow @rehman_coding for more daily web development tips and tricks. #content #webdev #coding #css #webdevelopment #comment #contentcreation #devcontent #frontend #frontenddevelopment #HTML #Javascript #react #codewithcoffee #grid #codewithcoffeeindia #future #share #connections #like #css3 #csstip #html #htmltip #csslayout #cssgrid #grid #cssgrid #gridlayout #terminology Ruby, etc. (at I-8 Markaz Islamabad) https://www.instagram.com/p/Coo4IHtg9Wc/?igshid=NGJjMDIxMWI=
#content#webdev#coding#css#webdevelopment#comment#contentcreation#devcontent#frontend#frontenddevelopment#html#javascript#react#codewithcoffee#grid#codewithcoffeeindia#future#share#connections#like#css3#csstip#htmltip#csslayout#cssgrid#gridlayout#terminology
4 notes
·
View notes
Video
youtube
free premium html and css template with javascript | free template #htm...
#HTML, #CSS, #JavaScript, #WebDevelopment, #FrontendDevelopment, #Coding, #WebDesign, #ResponsiveDesign, #DynamicWeb, #UserInterface, #UIUX, #Website, #HTML5, #CSS3, #WebDev, #InteractiveWeb, #MobileFirst, #GridLayout, #Flexbox, #Bootstrap, #WebAnimation, #AJAX, #DOMManipulation, #APIs, #FrontEndCoding, #FullStack, #Scripting, #SEO, #WebPerformance, #CrossBrowser
4o
1 note
·
View note
Text
5-2-24: Day 76
Day 76 consisted of
Accessibility review
Challenge 1: The check out view in Cupcake Corner uses an image and loading spinner that don’t add anything to the UI, so find a way to make the screenreader not read them out:
Challenge 2: Fix the list rows in iExpense so they read out the name and value in one single VoiceOver label, and their type in a hint:
Challenge 3: Do a full accessibility review of Moonshot—what changes do you need to make so that it’s fully accessible?
I could picture this in my head and decided not to write the code, but the changes would include: using .accessibilityElement(children: .combine), .accessibilityRemoveTraits(.isImage), and .accessibilityAddTraits(.isButton) on each of the mission buttons (images) that navigate to a detail view, as well as on a few of the Text views and stacks in ContentView, GridLayout, ListLayout, MissionView, and AstronautView. I would also create a constant to store the labels for each of the crew members’ names and mission badges to be read correctly by VoiceOver using .accessibilityLabel(), instead of reading the image file names which are currently only a crew members’ last name and "apollo" with the number beside it.
Day 76 quote: "Accessible design is good design—it benefits people who don’t have disabilities as well as people who do." - Steve Ballmer
#day 76#100 days of swiftui#ios#ios development#software development#software engineering#programming#coding#codeblr
0 notes
Text
android has so many fucked-up little elements it’s ridiculous. it starts off normal (you want to make a set of linear visual elements? oh use LinearLayout! you want to make a grid of stuff? use GridLayout!) but then it gets to be so specific like why does some of this stuff even exist. if you want to make a page-style UI, you can’t just make a set of views and a swipe listener and swipe between them, you have to use a ViewPager with a PagerAdapter. if you want to make a list of stuff, you can use ListView (normal) or you can use RecyclerView and make a RecyclerViewAdapter and then a ViewHolder to go along with it (why are there three different things? because android). im going to lose my fuckign mind
1 note
·
View note
Text
How to get started with LinearLayout on Android Studio with App?
LinearLayout is among the most important layout managers used in Android Studio. It is employed to lay out the layout's content. It is used by default to arrange the content of Activity and Fragment layout. For beginners, it is sufficient to be able to use it but for advanced developers, it's recommended to use other layout managers like GridLayout and FrameLayout. LinearLayout is also sufficient to design the layout of your application. In this article, I'll describe the fundamental procedures and configurations that you have to be aware of to begin working with LinearLayout.
The 5 Best CCNA Certification Books for 2022
1. What is LinearLayout?
LinearLayout is a layout manager used to build the scrolling list of views. It is similar to a ListView or RecyclerView however, it's not a replacement for these. It's an adaptable layout manager that can be used to create footers and headers as well as navigation or other type of content.
CCNA Routing And Switching All In One Study Guide BOOK
2. Basic steps of using LinearLayout
LinearLayout LinearLayout class is among the most effective layout classes in Android. It can be used to create almost any layout you can think of. One of the most frequent uses of LinearLayout could be creating a scrolling layout that behaves like a list. This layout can be made by creating a LinearLayout using only one child, which is an a ListView. This is the basic design of the scrolling list. You can also create an a scrolling list with TabLayout. TabLayout class. This layout is more suitable to create a list of tabs. LinearLayout is a crucial component of the Android framework. It can be used to create various layouts, such as lists that scroll. This article will show you how to start using LinearLayout using Android Studio.
How To Configure OSPF Single Area On 4 Routers In Cisco Packet Tracer
3. Fundamental configurations and configurations to LinearLayout
This section demonstrates how to make use of the LinearLayout to build the layout with just one column and only one row. The layout is comprised of the following components: TextView, Button TextView and Button. Button. The basic configurations of LinearLayout How To Configure OSPF Multi Area On 4 Routers In Cisco Packet Tracer
4. Conclusion.
To begin using linearLayout using Android Studio, it's helpful to know the different layout classes. Each layout class comes with its own set or utilities and behavior. LinearLayout is one of the most widely used layout classes. LinearLayout is a layout that lays out its children horizontally and vertically. It has multiple children that it can support, which means you can use it to display an item list such as a navigation bar or even a navigation drawer. Another thing to consider about linearLayout is that it does not have any way to connect to its children, other than setsChild() as well as getChild(). This means that you will have to go through each child to access the desired one.
Basic Cisco Router Configuration | Cisco Packet Tracer Tutorial
0 notes
Photo
“Space-Ship” and “Fun In The Sun”
Tetradic-color-harmony Project for Color Theory class!
Kelsey Spring 2020
#myart#abstract#geometric#gridformat#gridlayout#ACRYLIC#liquitexheavybodyacrylic#neon#rainbow#tetrad
3 notes
·
View notes
Photo
🐶💞🐶 2️⃣ / 3️⃣ 🐶💞🐶 ⭐️Favorite past time, sploot’n⭐️ . . . . . #grid #gridview #gridlayout #tile #papillon #daschund #pdxpup #portlandpup #papillonmix #spreadeagle #dogsofinstagram #cute #furry #fluffy #blackandwhite #puppy #dog #dogs #mixed #obsessed #パピヨン #papillonsofinstagram #portlanddogs #portland #pdxpups (at Portland, Oregon)
#obsessed#portlandpup#papillonmix#dogs#pdxpup#cute#fluffy#daschund#gridview#portlanddogs#papillon#dogsofinstagram#puppy#gridlayout#portland#papillonsofinstagram#furry#blackandwhite#pdxpups#パピヨン#spreadeagle#mixed#dog#tile#grid
3 notes
·
View notes
Photo
. Location | Datong, Shanxi province, China The original city wall in Datong was built in 1372. It was 14 meters high, had 4 main gates, 4 turrets and 46 watch towers. The ancient city used to be one of the nine military towns along the Great Wall of China. The industrialisation however damaged or destroyed some of its old buildings and thus its history. If planners and developers in Datong had been more sensitive and respected its history, then Datong would perhaps still be as beautiful today. . Now, however, the municipality has initiated a restoration plan which has been going on for more several years. The plan has the intention of restoring the city walls similar to how it looked like in its glorious years. Moreover, Datong’s municipal government have started demolishing newer buildings in favor of replicating older ones. The city will thus shift its focus towards a historical tourism. . The formerly disordered urban planning in the city was an important fight for an upcoming Chinese historical revivalist movement. Supporters of urban regeneration have praised the movement for protecting the city’s traditional culture, giving the city a face-lift, and improving the environment and air quality. Critics, however, say that the movement is a waste of money and labor because they claim the restored buildings don’t live up to their former glory, and that the municipal government has failed to properly compensate and relocate displaced residents. . #datong #shanxiprovince #china #worldurbanplanning #urbanplanning #cityplanning #architecture #restoration #urbandesign #gridlayout #cityscape #citywalls #도시 #도시계획 #aerial #aerialview #drone #houses #大同 #다퉁 #중국 #city (at Datong)
#gridlayout#datong#china#도시계���#urbandesign#cityscape#도시#중국#urbanplanning#city#worldurbanplanning#shanxiprovince#citywalls#다퉁#restoration#aerialview#aerial#architecture#drone#houses#大同#cityplanning
24 notes
·
View notes
Photo
Programming Languages VS Scripting Languages --------------------------------------- --------------------------------------- Most programming languages require the code to be compiled into machine code before it can be executed. --------------------------------------- Scripting languages are interpreted and executed line by line. Many programming languages have strict typing, where variables must be declared with a speciic data type. --------------------------------------- Scripting languages often have dynamic typing, where the data type of a variable is determined at runtime. Programming languages often require manual memory management. --------------------------------------- Scripting languages have automatic memory management. Due to their compiled nature, programming languages can be faster than scripting languages. --------------------------------------- Scripting languages are usually easier to develop with and faster to write. 📌Just like Flexbox containers we have Grid containers but have different container properties. ⇒ Simplifying GRID layout for you in this post ♥️ Hit like, if you found it useful!! 🔖 Save it for the future 📤 Share it with your connections 💭 Comment your thoughts 🚀 Follow @rehman_coding for more daily web development tips and tricks. #content #webdev #coding #css #webdevelopment #comment #contentcreation #devcontent #frontend #frontenddevelopment #HTML #Javascript #react #codewithcoffee #grid #codewithcoffeeindia #future #share #connections #like #css3 #csstip #html #htmltip #csslayout #cssgrid #grid #cssgrid #gridlayout #terminology https://www.instagram.com/p/CoiU3fRAPrz/?igshid=NGJjMDIxMWI=
#content#webdev#coding#css#webdevelopment#comment#contentcreation#devcontent#frontend#frontenddevelopment#html#javascript#react#codewithcoffee#grid#codewithcoffeeindia#future#share#connections#like#css3#csstip#htmltip#csslayout#cssgrid#gridlayout#terminology
2 notes
·
View notes
Photo
ON Etsy https://www.etsy.com/listing/577448464/flower-of-life-lotus-crystal-grid-lotus
#woodburned#woodengraving#floweroflife#gridding#sacredsymbols#gridlayout#reiki#grid#lotus#crystalgrid#gemporn#crystalhealing#sacredgeometry#energyhealing#reikihealing#crystalgrids#crystals
1 note
·
View note
Text
android 초급 10강 Layout 2 tacademy
original source : https://youtu.be/1OSuBFIbUcM
layoutparams 는 gridlayout 안에 itemview에 적용되는 layout params이다.
=========================================================
.
.
=========================================================
.
.
=========================================================
.
.
0 notes
Photo
I might be in this photo collage by #Repost @mandamotormouth ・・・ Remember those paper dolls with different tops and bottoms? 😂 . . . Photo description: two photo bits: the top half of my lady in the ocean and the bottom half of some high heels. . . . . #bnw #photofeed #gridlayout #unum #adobephotoshop .#unumfam #beach #blackandwhite #shoes #omgshoes #instagood #instadaily #legs #stems #lomography https://www.instagram.com/p/B43daI0hW9m/?igshid=gz8euphajjst
#repost#bnw#photofeed#gridlayout#unum#adobephotoshop#unumfam#beach#blackandwhite#shoes#omgshoes#instagood#instadaily#legs#stems#lomography
0 notes