Session 1: Now that your designs have been approved it is time to continue working on the template for the Basic Portfolio Project. In today’s the demo we will look at adding fluid background images, fixed backgrounds, and media embeds (video and audio) to your portfolio templates. We may also apply some fine tuning to the layout and navigation.
Relevant Resources:
Viewport Sized Typography
Can I use Viewport Units (vw, vh, vmin, vmax)?
Using vw and vh Measurements In Modern Site Design
Basic Portfolio Project Milestone #2
Due: Week 6, Session 1 (before class starts: 2 points)
1. Be prepared to show your work-in-progress on the template
2. Your markup must include areas for a header, navigation, aside, content, and footer
3. Have some rudimentary styles in place to illustrate how your design is developing
Session 2: Today I will be looking at your Markup Exercises. We will also discuss the requirements for Technical Exercise 3: Styles. The in-class demo will apply to the requirements for the Styles Exercise below.
Relevant Resources:
Fluid Width Equal Height Columns
Technical Exercise 3: Styles
Due: Session 2, Week 6 (4 points)
Description:
Style the markup on the single page that you created for the Markup Exercise. First duplicate markup.html and name it styles.html. Leave markup.html in place without any styles applied. Create a CSS document linked to styles.html that adjusts the layout, floats the aside, floats and scales content images, places and adjusts background images, sets and formats type, defines the navigation system, specifies hover behaviors, and defines your color scheme. Don’t forget to look at CSS Zen Garden for inspiration.
Requirements:
1. Use CSS to style your markup exercise
2. Float the aside and content areas to the left or right of each other
3. Design a navigation system with hover behaviors
4. Choose a distinct typeface and use the typesetting properties
5. Create an attractive color scheme
6. Add the files and folders to your environment and upload to your webspace
Points Breakdown:
2 points will be awarded for designing an effective navigation system
1 point will be awarded for producing an inviting layout and color scheme
1 point will be awarded for capably handling the type setting
http://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
This article touches on the pros and cons of different design layouts and explains in more detail exactly what “fluid design” really means (with pictures as examples). It also explains some tips and tricks for getting fluid design to work easily.
http://marketingland.com/fundamental-checklist-website-navigation-design-architecture-part-1-90743
This checklist identifies some helpful ways to design web page navigation so that it works well for users. It reiterates the importance of logic in creating pathways around your site. Also check out the “part 2” chunk of this checklist here: http://marketingland.com/fundamental-checklist-website-navigation-design-architecture-part-2-92109
http://www.smashingmagazine.com/2011/06/planning-and-implementing-website-navigation/
Here is another great Smashing Magazine article that explains some methods for successful navigation design, with plenty of photos to serve as examples.
http://www.smashingmagazine.com/2010/03/best-practices-in-modern-web-design-the-ultimate-round-up/
This article mentions hundreds of best practices for designing modern websites like blogs and portfolios. This article highlights seven general best practices for web design and also highlights different kinds of backgrounds to use on websites.
https://responsivedesign.is/develop/css/css3-multiple-columns
This article talks about designing multiple text columns for a website and includes some CSS.
http://www.smashingmagazine.com/2008/02/navigation-menus-trends-and-examples/
This article talks about trends for navigation menus. It gives different examples of navigation schemes.
http://www.creativebloq.com/portfolios/examples-712368
This articles display 45 different portfolio design that will help inspire web designers and those who want a nice portfolio.
————————————————-
http://www.hongkiat.com/blog/sites-to-create-portfolio-for-photographers/
This article talks about designing portfolios for those who use a lot of visual aids, such as photographers and architects. Different websites are included in the article with tools to help web designers achieve their goals.
——————————————–
http://swimbi.com/blog/22-principles-of-good-web-navigation-and-maximum-usability/
This article talks about 22 principles to improve the navigation of your website and increase the level of usability.
————————————————
http://www.hongkiat.com/blog/navigation-design-ideas-inspiration/
This website looks at the navigation items for a website and how to create names and pages for your navigation menu. It provides examples of other navigation menus and how to make it effective.
http://thenextweb.com/dd/2014/10/29/guide-crafting-visual-elements-online-portfolio/#gref
This article is a guide to creating a visually appealing online portfolio. It talks about all aspects of a portfolio layout from logos, color, typography, and cleanliness.
http://www.codeitpretty.com/2013/06/how-to-use-css-hover-effects.html
This article talks about the basics of CSS hovering effects on links and then talks about the hovering effects on images.
This blog post explains how to do rounded corner buttons without using images for the buttons. It also provides a proper method for calculating the desired curves based on the corner radius.
http://webdesign.tutsplus.com/tutorials/quick-tip-rounded-corners-done-right–webdesign-7127
This blog post helps web builders understand color schemes and how to pick color palettes. It also includes useful examples of color gradients based on common brands and products.
http://www.websitebuilderexpert.com/how-to-choose-color-for-your-website/
This lesson talks about embedding videos, photos and audio clips to your website. The lesson also explains the proper techniques for positioning, floating and sizing your embedded media. It also explains how wrong aspect ratios occur and how to fix them properly.
http://learn.shayhowe.com/html-css/adding-media/
http://www.w3schools.com/css/css_howto.asp
This article above goes through the details that go into the three different ways to use CSS. These three ways are, an external style sheet, internal stylesheet, and inline style. It shows you the basics of you can change the look of the whole website just with one file, which is one of my favorite things about CSS.
http://www.creativebloq.com/web-design/examples-css-912710
I thought this article was really cool and inspiring because it shows quite a few examples of some really cool things you can do with CSS.
https://www.codementor.io/css/tutorial/awesome-css3-tricks
I thought this article would be great to post as well because it shows 10 fun things you can do with CSS that many people probably don’t think of or know how to do. Just a little inspiration as we work on our portfolio project.
https://www.smashingmagazine.com/2008/11/12-principles-for-keeping-your-code-clean/
I thought this article was helpful for those of us that are new to coding. It gives some tips on how to keep your CSS code clean, and gives lots of helpful tips for coding with html.
http://blogs.adobe.com/dreamweaver/2015/12/creating-fluid-layouts-images-with-css.html
This article explains the difference between a fixed a fluid layout. It also outlines the benefits of both.
http://learntocodewith.me/posts/portfolio-tips/
This article goes more in depth on what a good portfolio contains, and I thought it would be good inspiration. I liked this article because it included volunteer work, testimonials and many other areas we didn’t talk about in class.
https://blog.spinweb.net/6-beautiful-examples-of-fluid-website-design
This article talks about the difference between responsive and fluid website design and then goes on to give 6 different examples of a fluid design.
https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
This article talks specifically about the different between fixed, fluid and elastic and offers more detail about the benefits of each.
https://codemyviews.com/blog/35-awesome-fluid-and-elastic-layout-examples-templates-and-tutorials
I chose this article because of the creativity it provided. It has 35 layout examples and ideas and tutorials too! This is a great tool if you need more help choosing different color schemes.
http://cssmenumaker.com/blog/5-free-html-navigation-bar-designs
This website provides some inspiration and ideas for possible navigation bar designs. The CSS code is also available for free download with each design.
https://designshack.net/articles/css/correctly-displaying-your-logo-with-css/
This is an article about how to properly put a logo into your header, which is something I have struggled with.
http://learn.shayhowe.com/html-css/positioning-content/
This shows diagrams on how to effectively lay out content, using the header, section, aside and footer, which is how our portfolio projects will be set up.
http://cssmenumaker.com/blog/6-exceptional-menu-bar-navigation-designs
This site shows 10 different navigation bar design ideas. It also provides the free CSS code for each navigation bar for you to download.
https://designshack.net/articles/css/correctly-displaying-your-logo-with-css/
This article shows you how to correctly display your logo within the header using CSS, which was something I struggled with.
http://learn.shayhowe.com/html-css/positioning-content/
This site incorporates floats and asides, which are two things that are involved in the portfolio project. The diagram shows possible layout ideas, and how to use floats to get that layout.
https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/#the-css-background-image-property
This website helped me with my background images (fluid background images.) This source provides good examples of both css and html coding and how they work together.
https://davidwalsh.name/css-fixed-position-background-image
This website shows all of the different ways you can set a fixed background image. If you scroll down to ‘CSS-Only Technique #2’ it is most similar to what we learned in our demo.
http://learn.shayhowe.com/html-css/adding-media/
This sight has demo for embedding any kind of media: Photos, audio, videos. Along with tips on how to position them the way you want on your page.
https://css-tricks.com/fun-viewport-units/
This is a good overview of how to utilize viewport units effectively. The breakdown is straightforward and the visuals clear and helpful.
https://www.websitebuilderexpert.com/awesome-home-page-design-layouts/
I found this useful while struggling to come up with a layout for my project. It has less to do with the technical aspects of web design, but it does highlight what information should be prioritized on your page and gives tips for how to keep your site sleek and intuitive.
https://webdesignledger.com/21-clean-web-design-layouts/
This one’s a little bit of a cheat, but I found it valuable to look over these designs in order to better come up with some of my own.
Extra site, since my third might be a little week: I’ve been struggling with figuring out how to embed media, and some friends with more skill in that area recommended this program. It may not be applicable to this class, but it seems like a time-saver going forward, so people might want to use it for independent projects: http://mashable.com/2011/06/05/embedly-how-to/#7.OAimZnh8qQ
https://www.w3schools.com/howto/howto_css_portfolio_gallery.asp
This specific section of the website shows how to use CSS and HTML to create a photo gallery that is responsive to scrolling. This website has a ton of other CSS and HTML tutorials to help you add unique design elements to your portfolio.
https://developers.google.com/web/fundamentals/design-and-ux/responsive/
This website does a great job of explaining the importance of viewports and responsive web design for a positive user experience. It shows you how to code your website to be responsive on all users’ devices. My favorite part about this website is that it shows you concrete examples of the difference between responsive and non-responsive web pages.
https://envato.com/blog/css-snippets-responsive-menus/
This website gives examples of 20 different types of navigation bars and the HTML and CSS behind them. You can see and interact with the examples to decide which one you like best. Then you can use the code to add your own unique navigation bar to your portfolio.
https://www.websitebuilderexpert.com/awesome-home-page-design-layouts/
I chose this website because it gives an idea of what content should be on a homepage and how the page should be set up so it is user friendly.
https://blog.kissmetrics.com/common-website-navigation-mistakes/
I chose this website because it goes over common website navigation mistakes that we might be tempted to do and it gives us other options. (the comment section has a lot of good information as well)
http://cssmenumaker.com/br/node/451
I chose this website because it gives you 5 simple HTML navigation bar designs and the CSS with the 5 designs.
https://webdesign.tutsplus.com/tutorials/a-web-designers-guide-to-selecting-the-perfect-background-image–cms-29814
This article lists five things to consider when picking a background image for a website. Something nice about this article is that it has an example picture under each tip to illustrate how different types of backgrounds suit certain layouts.
https://www.lifewire.com/basics-of-web-design-3470744
I like this article because it’s short and to the point. The author offers design advice in a few different categories including graphics, layouts and fonts. Her article reiterates the importance of optimizing images and being aware of how things will look on different screen sizes. Additionally, she offers advice on everything from utilizing white space to content writing.
https://www.shopify.com/partners/blog/web-design-portfolio-inspiration
This article displays 20 memorable web design portfolios. While a lot of these designs are unrealistic for replicating at a beginner level, they show how striking a good combination of content can be. Some of these might serve as inspiration for color palettes or fonts to use for the portfolio project.
https://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
This website does a great job in explaining the difference between fixed and fluid ratio’s when creating responsive backgrounds with images. This information will help us construct layouts that maintain a certain ratio even when its resized. You can also look at how to make a background image scale in modern browsers.
https://blog.hubspot.com/marketing/how-to-add-html-embed-codes-ht
In this quick read, you can understand what an embed code is and how to generate them on different platforms. You will learn how to embed interactive content using our trusty HTML code. This will enhance the viewers overall experience while building digital marketing skills.
https://internetingishard.com/html-and-css/responsive-design/
This responsive design tutorial is a great tool to review on the basic techniques and learn about CSS rules for layout and design. It gives great visuals to the set up of fluid and fixed-width layout along with break points and zooming capabilities.
https://www.creativebloq.com/features/10-website-navigation-trends-for-2017
This website shows different navigation approaches when helping people find their way around a specific website they are on. They list 10 different examples of sites that work for all different screen shapes and sizes.
https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
This website shows the pros and cons for a fixed, fluid, elastic or hybrid layout design and which one is the right decision if there is one.
https://www.w3schools.com/w3css/w3css_templates.asp
This website shows different templates that you can use depending on what your website/page is for and the coding is there for all of the templates.
https://www.jotform.com/blog/how-to-make-a-web-design-look-good/
The first article I thought was helpful for our class while we begin to build our portfolio sites was written by a web designer. The author believes that while web design is more of an art than a science, there are a few basic “guidelines” that will help us newbies to build an aesthetically pleasing and user-friendly site. These include how to balance and “grid” a design, how to pick colors based on your site’s purpose, and how to combine graphics seamlessly.
https://www.addthis.com/academy/how-to-create-engaging-website-design/
The second article expands on how vital basic design is to any webpage. Especially if we are planning to build a professional website later on; this author explained that on average 94% of user mistrust or trust a website’s security based on design alone!
https://www.fastcompany.com/3015853/5-keys-to-productive-design-for-non-designers
Lastly, I found the article which I related to most! This author speaks about how we as students must put ourselves in the mindset of designers, in order to produce our best work. Then he delves into 5 key aspects of design we can all work on, using real sites as examples for “good” and “poor” work.
https://medium.com/beamly/what-is-fluid-typography-and-should-i-be-using-it-44a1b7125205
This first link explains what fluid typography or viewport units are. It also explains how to use the calc() tag to control the rate of growth of the units.
https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e
This link explains the difference between normalize CSS and CSS reset. Normalize CSS is a small form of CSS that will fix any differences in the code across different browsers. CSS reset resets all of the styles that come with browsers user agent.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
The most interesting part of this link is the section with a table of the viewport sizes needed for different mobile devices and tablets. This helps ensure your webpage fits the screens correctly, even with different orientations.
https://css-tricks.com/design-principles-for-developers-processes-and-css-tips-for-better-web-design/#article-header-id-0
This site gives tips for designing in CSS. It focuses on three key areas: how words are displayed (typography), how content is arranged (spacing), and how personality is added (color). It’s a longer article but there are many helpful principles and tips mentioned.
https://www.creativebloq.com/portfolios/tips-portfolio-website-4137460
This site gives great tips on making your own portfolio website. It’s a brief article and gives 10 tips to make a site your own. It helps you know what exactly to put on the site and what things to focus on.
https://www.creativebloq.com/features/css-tricks-to-revolutionise-your-layouts
This site gives you tips and examples of how to creatively design using CSS. It gives eight helpful tips and tricks, such as how to add a mask, how to blend, and how to get creative with collage.
1. This is a comprehensive site where it walks you through how to make responsive and fluid navigation bars using CSS. This could be very helpful for the portfolio project. https://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/
2. This article has 7 tips to optimize your navigation bar for websites to make it user friendly. https://www.orbitmedia.com/blog/website-navigation/#:~:text=The%20order%20of%20your%20website,attention%20and%20retention%20are%20highest.
3. This site discusses tips to make your online portfolio stand out to employers as a student. This could be very helpful when designing your portfolio site. https://www.pixpa.com/blog/make-your-online-portfolio-standout
https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j
After browsing on Google, I felt that this was a good website to share. It explains how to fill a page with a div and how to properly resize a browser, also explaining that using “absolute” units often does not resolve sizing issues. This is helpful to anyone who is building a website, especially now that smartphones continue to grow in popularity globally.
https://elementor.com/blog/guide-to-web-typography/
This site demonstrates how typography is important in web-design, and what it is. Just like the previous website, it discusses screen sizes, and why it is important to cater to different devices to give a clean look to all. It also talks about how to get the correct sizes for fonting and line spacing. This is helpful to anyone looking to build their website.
https://web.artysleek.com/web-design/css-units-pixels-em-and-percentage/
This website talks about the importance of pixels in relation to CSS, when building a website and how it relates to screen size on various devices. It also talks about percentage-based spacing and scaling and how it contributes to an overall better look. This website would be helpful, again, for those needing to learn more about absolute vs. relative resolutions and units for various screen sizes.
1. https://envato.com/blog/css-snippets-for-responsive-menus/
This site gives 20 CSS Snippets for responsive menus. The article is very informational as it shows examples for different navigation drop downs and slide outs. Navigation and menus are made easy with this blog, and it would help me with my portfolio project.
2. https://www.bitdegree.org/learn/css-navigation-bar
This article would be useful for more help with the navigation bar. It has information including ways to style vertical and horizontal nav bars.
3. https://tutorial.techaltum.com/css_background_properties.html
Various background image techniques were shown in this article, including fluid background images.
1. https://www.sitepoint.com/css-viewport-units-quick-start/
This website is a quick guide to understanding viewports when using them in CSS. It offers the meaning behind the different units while also showing specific examples with images to help you learn along the way.
2. https://blog.adobe.com/en/publish/2015/12/07/creating-fluid-layouts-images-with-css.html#gs.d0t3bu
This article goes over the differences between fixed and fluid images in CSS. It goes over a step-by-step process of each image layout to better understand how to use both in your CSS programming and how it will look in the design.
3. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
This article goes more into the design side of html and CSS and how you can implement different techniques for a more responsive design.
https://elementor.com/blog/website-color-schemes/
This article talks about how picking a color scheme can have an impact on the style and consistency of your website. It goes into the definition of a website color scheme which is “the collection of colors that a designer chooses for their website design”. This color palette presents your visual identity, first impression, and emotional connection. Prior to this article, I chose my color palette of pink because I believed it showed confidence, positivity, and warmth. In the article, it states pink as compassionate, sincere, sophistication, and sweet. All qualities I believe I express.
https://www.hongkiat.com/blog/built-with-css/
This article talks about 20 things you wouldn’t guess were built by using CSS. CSS has the ability to create animations that can make even things like characters. It shows examples of images and animations that were used with purely CSS. The one I found the most fascinating was the first one because a man named Chris Pattle used CSS to create The Simpson Family characters.
https://line25.com/tutorials/how-to-code-a-stylish-portfolio-design-in-html-and-css
This article showed fun designs and additions to your portfolio using CSS vs. HTML. It was great to see the differences in what you can do with each and how it was actually coded. Being new to coding it is always great to find trends of similar things I have learned to add to my knowledge on this topic to use for the future. A particular thing that I want to include in my portfolio is the use of linking my social media platforms and it showed me how to do that with the HTML and CSS codes.
https://blog.duda.co/best-mobile-fonts-web-design
This site gives some recommendations on when to use certain fonts and typefaces (and when not to use them), including highlighting four Serif and Sans-Serif fonts that are good for mobile readers and their explanations on why. They also show the most common website fonts as determined by the Web Almanac.
https://www.trajectorywebdesign.com/blog/website-navigation-design-guide/
This site breaks down the process of planning and structuring a website’s navigation. Not only does it touch upon design concepts for guiding your site visitors visually (such as reminding the user what page they are currently on via a change in visual design), it goes into detail on design choices such as hierarchical website navigation, where menus change depending on each page’s context.
https://www.wix.com/blog/2021/11/website-backgrounds/
This article goes through a variety of background design choices (for example, solid background colors versus textured) for your website and when certain styles might be effective or not, such as bold colors or animation being potentially too busy. They also highlight what to think about when planning for a background – incorporating colors of your “brand” to complement the content and not distract from it, for instance.
1. https://www.sliderrevolution.com/resources/css-animated-background/
This website shows some cool examples of fluid/animated backgrounds, and some explain exactly how you can create it using JS.
2. https://www.blog.duomly.com/css-background-image-tutorial-with-examples/#span-class-s1-5-how-to-create-a-color-changing-background-image-animation-span
Here we learn exactly how to create a color-changing background for a website. It might not be the most useful, but I thought this was super interesting. The grid background image is a super cool idea too.
3. https://html.com/media/
This website has more information on different media embeds such as audio and video.
https://enzedonline.com/en/tech-blog/create-responsive-font-sizes-based-on-the-viewport/
This site has some extra information on viewport sizing for fonts as well as some extra graphs to show how different sizes compare with different headers, weights, and more.
https://blog.hubspot.com/website/web-safe-html-css-fonts
This site lists some of the most compatible fonts for HTML and website creation. There are a wide variety of fonts to allow for some customization while still letting your code be viewed properly on a variety of browsers and devices.
https://codemyui.com/tag/navigation-menu/
This site has some examples of super unique (and some heavily animated) navigation menus for the various sites you could be creating. HTML and CSS code snippets are provided!
1.) https://www.w3schools.com/css/css_navbar_vertical.asp
This site provides examples of vertical navigation bar options as well as horizontal bar navigation options and it provides the CSS code with step by step instructions which I found to be very valuable.
2.) https://www.makeuseof.com/responsive-navigation-bar-using-html-and-css/
This is another site that provides CSS code for creating a navigation bar, however what stuck out to me was that it discusses three key elements that your navigation bar should embody so that it is easy to use yet also unique to your brand. I like how it talks about experimenting with different colors as well so you are able to get the perfect look.
3.) https://www.aleksandrhovhannisyan.com/blog/responsive-navbar-tutorial/
This site shows how to create a navigation bar with HTML, CSS, and JavaScript which is neat to see how they are similar and how they vary. It also provides information on how to style the navigation bar how you like it.
1. https://medium.com/design-bridges/design-portfolio-88322e124791
This is a site where it gives tips on how you would go about organizing your portfolio to stand out to recruiters and hiring managers.
2. https://www.flux-academy.com/blog/7-website-navigation-best-practices-with-examples
This site gives best practices with examples on website navigation for your website to be more user-friendly.
3. https://www.flux-academy.com/blog/how-to-strategically-use-color-in-website-design#:~:text=To%20start%2C%20I%20recommend%20choosing,and%2010%25%20the%20accent%20color.
This site gives you tips and information on how to choose appropriate colors for your website.
1. https://www.educative.io/answers/what-is-fluid-design
Educative provides sound introductory information to what exactly fluid design is. This was helpful for me since I do not have any prior knowledge and am starting from square one. This website also gives insight for the topics of fluid layout and adaptive design. There is an illustration that depicts fixed grid vs. Fluid grid which was helpful to see side-by-side.
2. https://www.thoughtco.com/responsive-background-images-3467001#:~:text=One%20Image%20for%20Many%20Screens,fluid%20grid%20and%20media%20queries).
This article goes into detail on adding responsive design images through utilizing CSS. There are also some coding examples provided showing what one should add for scaling background images. In addition, there were several other related articles readily available for exploration.
3. https://webflow.com/blog/embed-code-in-content
This resource gives six different embeds that can elevate websites and help bring them to the next level. It would be helpful for brainstorming what kinds of embeds one should consider adding to their website for better interaction and engagement with the website. This knowledge will be useful for my entrepreneurial mindset and can be transferred to other aspects of business classes that I am taking. The examples given for different types of embeds are practical and look like things that we could learn how to do.
1. https://web.dev/blog/viewport-units
This websites helps break down viewport and how they work differently on laptop/desktop vs mobile. This will be crucial for you if you want your website to work fluidly in mobile state.
2. https://dev.to/j471n/video-as-text-background-using-css-58im
This article will show how to embed video as the font/text color/background. I find this as a very powerful tool for engagement and maximizing content while leaving white space and cohesiveness.
3. https://dev.to/shantanu_jana/how-to-play-sound-on-button-click-in-javascript-3m48
Although I believe audio should be avoided for websites this is still a cool feature and immersive element you might consider. calling an audio file when clicking can create for some captivating moments.
1. https://aliservicess.medium.com/responsive-web-design-is-dead-fluid-layout-is-the-future-2025-69e2c71798eb#:~:text=The%20fundamental%20difference%20thus%20comes,transitions%20into%20the%20application%20naturally.
website talks about how fluid layout for websites is superior and why almost all companies are migrating towards it
2. https://elementor.com/blog/vh/
Expalins viewport viewheight, how to use it and some uses for it, like making something stand out more, and even background images for the website.
3. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
Article that shows how to do some animations in CSS, seems pretty cool, I like how it moves, very neat to add more personality to a website
https://elementor.com/blog/web-fonts/
for this first one, its just a long list of what this group believes to be the best fonts to use for a website, they get into why each one works as well as it does and what it does for the flow of the page itself.
https://css-tricks.com/snippets/css/fluid-typography/
this one as well, gives a heightened look into the coding of the texts and how to make them as nice and fluid as possible, having them guide you from one area to the next of the page.
https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
the article reminds me of an assignment i had for another class where we went over the way modern typography has shifted from stylized to more streamlined, looking at pieces that make it so everyone can easily decipher whats being said and letting the group get their message across.
https://css-tricks.com/getting-creative-with-shape-outside/
This article is from a website called CSS tricks that has an immense amount of tips and articles solely related to website design using CSS. The article that I picked out was published October, 6th and details how to utilize the “shape-outside” function in CSS to help pages feel more dynamic. For a quick rundown, whatever shape a subject takes, images sit inside boxes that text wraps around. But shape-outside lets text break free from those boxes by enabling layouts that can respond to the contours of an image. This can help to create a more dynamic and engaging copy/layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
This article is a much more bare bones, but specific in scope and detailed as to all the options a person can take with the background-attachment command. The interesting thing is that they have the code and the direct result of the code for each different variation of the background-attachment command.
https://medium.com/@esthon/navigating-css-fundamentals-of-styling-layout-and-responsive-design-bdca8f0ffd66
This blog discusses the importance of CSS styling for not only aesthetics but for user experience, and functionality as well. One interesting thing it touches on is the importance of a readable sheet for CSS code, as the more advanced you get the longer these sheets become. The author then dives more into detail on classic vs. modern sheet set up. Overall this article is a very in-depth and comprehensive look at the foundation of CSS, and helpful to further grasp the concept and create a strong foundation.
*revised
https://css-tricks.com/getting-creative-with-shape-outside/
This article is from a website called CSS tricks that has an immense amount of tips and articles solely related to website design using CSS. The article details how to utilize the “shape-outside” function in CSS to help pages feel more dynamic. For a quick rundown, whatever shape a subject takes, images sit inside boxes that text wraps around; but shape-outside lets text break free from those boxes by enabling layouts that can respond to the contours of an image.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
This article is a much more bare bones, but specific in scope and detailed as to all the options a person can take with the background-attachment command. The interesting thing is that they have the code and the direct result of the code for each different variation of the background-attachment command.
https://medium.com/@esthon/navigating-css-fundamentals-of-styling-layout-and-responsive-design-bdca8f0ffd66
This blog discusses the importance of CSS styling for not only aesthetics but for user experience, and functionality as well. One interesting thing it touches on is the importance of a readable sheet for CSS code, as the more advanced you get the longer these sheets become. Overall this article is a very in-depth and comprehensive look at the foundation of CSS, and helpful to further grasp the concept and create a strong foundation.
https://css-tricks.com/a-complete-guide-to-css-media-queries/
The article “A Complete Guide to CSS Media Queries” from CSS tricks website explains how to use media queries to apply CSS depending on the characteristics on a device such as width, height, orientation and more. It emphasizes viewport characteristics (width, height, ratio, and orientation) which allows people to target specific styles based on the various browsing sites rather than a set device.
https://tutorial.techaltum.com/css_fixed_liquid_layout.html#google_vignette
The article “CSS Fixed vs Liquid Layouts” explains and compares fixed and fluid layout strategies. Fixed layout refers to when containers have fixed widths (pixels) which gives the designer the ability to know how things will appear even if screen size changes. Liquid layout means when the width is expressed in percentages and adapts to different viewport sizes. It is a useful articles because it helps the reader understand when and where to use specific layouts.
https://prismic.io/blog/css-background-effects
The article “40 CSS Background Effects to Enhance Your Website” from Prismic presents ways to present visuals, video backgrounds and motions. It helps the reader understand the important of backgrounds and how different effects change the way in which a website works. It is useful as it helps designer find creative ways to make their sites more interesting and appealing through depth, motion and interactivity.
https://css-tricks.com/a-complete-guide-to-css-media-queries/
The article “A Complete Guide to CSS Media Queries” from CSS tricks website explains how to use media queries to apply CSS depending on the characteristics on a device such as width, height, orientation and more. It emphasizes viewport characteristics (width, height, ratio, and orientation) which allows people to target specific styles based on the various browsing sites rather than a set device.
https://prismic.io/blog/css-background-effects
The article “40 CSS Background Effects to Enhance Your Website” from Prismic presents ways to present visuals, video backgrounds and motions. It helps the reader understand the important of backgrounds and how different effects change the way in which a website works. It is useful as it helps designer find creative ways to make their sites more interesting and appealing through depth, motion and interactivity.
https://tutorial.techaltum.com/css_fixed_liquid_layout.html#google_vignette
The article “CSS Fixed vs Liquid Layouts” explains and compares fixed and fluid layout strategies. Fixed layout refers to when containers have fixed widths (pixels) which gives the designer the ability to know how things will appear even if screen size changes. Liquid layout means when the width is expressed in percentages and adapts to different viewport sizes. It is a useful articles because it helps the reader understand when and where to use specific layouts.