For anyone looking to improve their writing, I recommend picking up a copy of “Bird by Bird.” Anne Lamott gives some of the most helpful advice for writers and students of life I have ever read.
Continue reading “Shoddy first drafts”Templates for beginners
while in class were doing our final rough drafts of the website of our choosing to create about a certain topic, mine is a lawyer website and a tool that helped me use HTML and CSS to create my page and now a helpful tool for me to reference new code or refresh on the basics.
CSS Navigation Bar (w3schools.com)
Here you can look up what you’re trying to create, and it will show you how it should look like in code and in another browser window to show a live code view of how it can look on a website screen.
What is Responsive Design?
Responsive design is a graphic user interface (GUI) design approach used to create content that adjusts smoothly to various screen sizes. Designers size elements in relative units (%) and apply media queries, so their designs can automatically adapt to the browser space to ensure content consistency across devices.
Continue reading “What is Responsive Design?”Phone Internet
What is responsive design for you? Have you ever wondered when did it start and how it was in the begging? I always thought that the internet was out for a long time, but was it?
Continue reading “Phone Internet”Responsa What? Understanding Responsive Design
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”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”