Layouts can be tricky. It feels so nice to finally have a design that looks good and works well… until you take a look at it on a different device. What happened to your design?! How can you fix that? The answer…. Responsive Design! Let’s take a look at what it is and some of the basic things to know surrounding responsive design. Let’s go!
Continue reading “Responsa What? Understanding Responsive Design”Category: AAD 086 SP22
What I learned Week 6 AAD86
This Week was crazy and a bit new for I figured how to use figma to create site skeletons for the midterm I can tell theirs still more I have to practice when it comes to using the program. I also learned more about implementing grid to CSS to my web pages through the example projects. I hope to try some of these ideas out in my own projects. Back in my Intro class their have good float and grid layouts experience would have helped me with a lot of assignments when I got stuck.
Continue reading “What I learned Week 6 AAD86”What I Learned In Week Four
Hello Everyone I know its been a while since you have seen my last post I was having trouble with my log in for word press. For week four it was a lot of review for me, refreshing my memory on code styling. For instance I feel the week made me realizes how I can utilize styling directly on the html page rather then always separating. It’s also the week that showed me other apps to use besides File Zilla when it comes to putting my sites up live for the class.
This week also made realize how much I still have to learn in some area with making sure my links to sites work properly with the my main
Continue reading “What I Learned In Week Four”Cannot flex my flex(box) skills yet
As I recall my interactions with Flexbox last semester, I remember a lot of feelings of confusion and intimidation. I understand that the objective is relatively simple, yet I could not ever understand the appropriate times to use each rule.
Continue reading “Cannot flex my flex(box) skills yet”CSS Layout,MicroSites,and more.
To my audience, by all means… I am not a super techie person. My background is Studio Art-Painting. Last fall, the web design bug bit me. Now here I am, learning about Flex box and Grid all CSS layout options.
I am thankful for support of some awesome classmates, tutors and me for innovating ways to practice Flexbox.
Last week. I decided I needed to practice Flexbox Froggy
https://flexboxfroggy.com/. I started to practice, but I could not get anywhere. Who has flex box memorized anyway? If you do pat yourself on the back. In the moment of despair and disappointment. I decided to find flexbox cheat sheet— Flexbox Froggy back to life for me. This cheat sheet for flexbox renewed my interest- https://flexbox.malven.co/ … I put the two windows together nice and cozy and viola! Level 11 in no time.
Learning about Microsites and developing a theme with a call to action was my next triumph. Albeit, my initial design is not super polished, yet at least I was able to use that design to make a mock gallery opening flyer for my artwork. As the saying goes- kill two birds with one stone.
Lastly , tonight I was very fortunate to be apart a presentation titled- Art,Communities and Currency by Irubiel Moreno. Moreno’s macro thesis was decentralized currency, and the importance of having portable,broker free access to crypt o currency. This naturally evolved into a small discussion of NFT ,and the people who have became successful like Benyamin https://www.youtube.com/watch?v=XUpS0tOZAlI 12 year old owner of Weird Whales who use generative art for his project.
In addition to this information I learned Solidity is the program of blockchain. Also what to look for if an artist is going to do a NFT project with a developer. For one look for transparency do they have a tweeter or other social media that speaks to their longevity and authenticity? Lastly do your research.
Mr. Moreno will do a part two of this presentation next week. You can sign up via Sol Collective IG, give them a follow and keep up with their other events too!
Grid talk…
-” to make an HTML element behave a grid container…”
As super easy as I find Float, I feel the opposite about positioning and a little bit about grid. Float is easy and short. Grid is a little longer than that and I feel like there is a bit much math included (I’m not really good with numbers).
GRID is a little hard and it’s taking me a little bit to understand but it is fun to learn and mess around with. I guess it’s just a matter of getting used to using it right? The more you practice the better you get.
Grid can totally replace floats and positioning. Grid layouts makes it easier to design web pages with rows and columns.
https://www.w3schools.com/css/css_grid.asp
Grid Container…
– “To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid.Grid containers consist of grid items, placed inside columns and rows.”
https://www.w3schools.com/css/css_grid_container.asp
Styling Images
https://www.w3schools.com/css/css3_images.asp
I’m sure everyone knows about styling images with CSS. I would still like to post a little something about it and a quick link to it. I know optimizing image is always ideal. My curiosity tho is, will it be ok to contain an image using CSS without optimizing it? I think it is possible, but even if we can style an image- a huge, unoptimized image (obviously that’ll also be a huge file size) into a thumbnail size image, if the file size is still huge it will take a long time for it to load in the browser. And maybe if we style it to be bigger than its original size it will stretch and pixilate. The image quality will be low.
So Many Layout Designs
It seems that these couple weeks have taught us a lot about different possibilities for layouts, some which seem more convenient than others.
Continue reading “So Many Layout Designs”Positioning, Flex, & Grid.
Positioning property will set the rules on how an element will be placed on the page. It has 5 values:
- static: it follows the order of html
- relative: the element can go anywhere without messing up the flow of the html except for the one its attached to
- absolute: its placement is based on the px of the document not an element
- fixed: element will stay on the same spot at all times
- sticky: its location is based on the scroll of the document
Flexbox makes it easier to create flexible design. It has 5 properties.
- flex-direction: determines the direction
- flex-wrap: determines if it will have stop location and go to the next line or if it just go in one line
- justify-content: determines how it will begin
- align-items: determines how to align the items
- align-content: organizes the space around the items
Grid layouts with rows and columns. Has 4
- grid-template-columns: determines the size of the layout
- grid-template-rows: determines the size of each row
- justify-content: aligns the grid
- align-content: vertically align items
Diving Into New Concepts
In the past two weeks, we have shifted our focus from review to some new concepts that I was not quite familiar with. We dove into two different types of layout that I have never used before.
Continue reading “Diving Into New Concepts”New To Grid!
For this week’s reflecting on what we have been learning in class in HTML/ CSS Dreamweaver is how to make Grid’s in Dreamweaver. In doing that Grid is for two-dimensional layouts, meant to work with flex box, and when using flex box it uses heavily on “flex-wrap:wrap;” code onto Dreamweaver consider using grid instead wrap. Grid-gap helps you keep space between grid items. Grid-template-columns can take different units of measure.
Here is a video I found that’s been a reference now on understanding CSS grid and flex box in which I have been having trouble understanding.
Tips and tricks for Flex and Grid.
We have just tipped the iceberg of Flex and Grid and it feels like there will be an intuitive nature to it but until we get there here are some things that have helped me.
Continue reading “Tips and tricks for Flex and Grid.”Adobe XD A Lesson In Simplicity
If you have been Adobe products for a little while now you are probably used to a certain set of tools and where to find them across almost all of their applications. Adobe XD pairs down tools to the basics and forces you to rely on your design skills instead of the advanced tools you are used to.
Continue reading “Adobe XD A Lesson In Simplicity”So You Think You Can Layout?
The Big Four of CSS Positioning: Flexbox, Grid, Float, and Positioning. What is the difference and which should I be using?
Continue reading “So You Think You Can Layout?”CSS: All About Layout
There’s a lot of options when it comes to designing your layout in CSS. From flexbox properties to positioning, here’s all you need to know about CSS layout to get your designs to look awesome.
Continue reading “CSS: All About Layout”Grid game
The best thing about grids is the endless possibilities to create two-dimensional layouts. The drawback is that it takes practice and time to learn. Luckily I saw someone mention the CSS Grid Garden in one of the discussion board threads and decided to check it out.
Continue reading “Grid game”ADOBE XD
Is Adobe XD easy to use for the first time? This week we had to create an outline for our Mid-Term Projects. I was debating whether to use Adobe XD or Illustrator.
Continue reading “ADOBE XD”CSS Layout
CSS page layout techniques allow us to take elements contained in a web page and control where they’re positioned relative to the following factors: their default position in normal layout flow, the other elements around them, their parent container, and the main viewport/window.
Continue reading “CSS Layout”Digital Typography
Low and behold the generational gaps of typography have reached the masses in digital form. Some call these style variations typeface or fonts. They come with special names usually the font is named after the creator of the font. If you’re a graphic designer, calligrapher, or print maker/ Artist. Then you will be faced with a decision one day to decide how the message of your artwork is rendered and viewed by the audience. So what resources are available for font choice and who are the gate keepers?
As a digital artist or designer. Especially for commercial artwork https://fonts.google.com/ has a nice library of various fonts that can be used for free. The process to embed the code into your CSS is straight forward. Google provides the link to copy and paste into the head of the HTML document. Then Google offers the CSS script to copy and paste into the CSS code.
On the other side of the coin, typographers create specific fonts and license them for sale to be used by designers for various reasons in the applied art industry. Design shack has a great article of where to gather more information about types of license uses. They also have various links to websites that sell font licenses. There you get to see what is styling in the font world. https://designshack.net/articles/typography/what-is-a-font-license-and-do-i-need-one/
The choice for fonts these days are vast and plenty enough to satisfy any audience. And if you want to stay in the know about fonts then consider https://typoday.in/ July,7,8,9,2022.
WHAT IS CSS?
CSS stands for Cascading Style Sheets its a declarative language and its a great way to organize the content by changing the layout, adding color, and changing fonts.
Continue reading “WHAT IS CSS?”let’s float a little…
It’s been a while since I last messed around with CSS and I have to say that it still gives me the same feeling. I still get excited and giddy relearning and learning new things about it.
The past few days I have been just digging around the internet and reading some articles and posts and tutorials about CSS. How to write them properly and what each terms are for. I have read things about flexbox, which if I remember correctly I actually had a hard time understanding.
My favorite was reading and learning more about float. I know we are not discussing both flexbox and float until next week but I went ahead and read and played with it styling my content.
https://www.w3schools.com/css/css_float.asp
Mostly I just stayed with W3Schools website. I saw a few posts, practices and try it yourself kind of thing from a few different websites.
Using inline-block to create nav links…
One of the common use for inline block is to align list items horizontally instead of vertically. I found this very useful to as I was trying to have my list content appear horizontally. It was a bit tricky for me tho because the letters ended up overlapping each other but I think I fixed it.
margin tricks…
I’m following this guy on youtube and watched a few of his videos. Some of his videos include styling with a timer and honestly it was nerve wracking (atleast for me) to watch. I have yet to watch this video but I’ll post it here now, maybe some of you will find it interesting too…