Dine challenge with React

Community feedback

• 

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  Hey this looks great I'll answer your questions first. For the first questions, yes you can do that. I personally do that for my Typography.jsx components. It basically looks like this:

  const Typography = ({as, children, ...props}) => { return React.createElement(${as}, props, children); }

  So you could apply the same logic to a button. Basically what I'm doing is creating a functional component with the props de-structured, so you'll have access to the 'as' prop, which is just a string of what element you want to create. You also have access to the children and all other props passed. So <Typography as={'h2'} className={"Display4"}> Some text </Typography> would come out rendered to the dom as <h2 class="Display4">Some Text</h2>. So that's an approach I like using, you could just use an if statement and check if the prop exists. I have a React UI component library and my Buttons are extremely customizable and reusable, reusable code and styles is such an important part of front-end development.

  For resetting your form you could create a ref for your form DOM node and then you would be able to access the form on the actual DOM and call methods. So you could do ref.current.reset(); If you're using React state for the values you want to reset, you could simply just set the state to it's initial value, you could keep an initial value in a ref (instance variable kind, not DOM node kind) I couldn't quite tell how you were controlling the form's state.

  It looks like you're attempting to update the value of the image in a function in your functional component. You'll need to put that function inside of a React.useEffect hook, and i'm guessing the dependency array would be window.innerWidth, unless you're rendering from the server. Try putting it in a useEffect hook like I said so basically every time the window width changes, it will call that function and check with the new value. You could also wrap it in a Memoized function since you only want to calculate if the one variable changes, but I'd go for the useEffect approach first.

  Ok sorry I'm not exactly sure what you mean by this one. Not sure how much help I can be with this one but off the top of my head if it was rendering a square but you wanted a curved part then I'd try to set the clip-path property on it's class or the mask-image. Clip-path is really useful and I use it quite a bit, it let's you make shapes out of your box model, you can do circles, ellipses, polygons, and I think arcs. There's a lot you can do with that styling rule so maybe it could work, I'm not too sure sorry tho.

  So yeah now onto just some general stuff, first off don't set font-size to 62.5% in your html tag. I have to tell people this every single project lmao but you should either set font-size to 100% or don't add the rule and let it be inherited from the browser settings (either way it should default to 16px). I know people use it so that 1em=10px but really, 16px is better anyways plus you don't mess with the user's accessibility settings. Also i find it kinda odd that you're using sass, you even made a partial for variables, but you're using standard css variables lol. Also just a quick typography lesson because every single person uses the properties incorrectly; font-size (unless you're initializing root size to 100%) should always set in rem units and idealy you should have a typographic scale set up but that's kinda overkill for these small challenges. Letter-spacing should be set with em units. Line-height should be unitless. It's a multiplier of the font-size, typically paragraphs have a line-height around 1.5, and headings are generally lower at around 1-1.25. Also I would try to avoid setting font-styles to tags like h1 or p, because usually you'll have many different sets of headings or body classes, and you don't want to be that broad with selectors. Also good jobs measuring all of your widths and heights and paddings and stuff in rem units, that's good practice. I don't know where a lot of the sizes are coming from tho, there seems to be a lot of magic numbers in there. This is just a personal design rule but I try to make sure I never see a number in my sass. If it's an important number it will be a variable, if it's not in my set of variables (which are limited and meaningful, which lets my pages have vertical rhythm and a sense of harmony) then there's probably a better way of sizing or positioning something. But that's just me being pretentious because I like UX lol. The last thing is I recommend to try to reduce the amount of nesting your do with sass. Nesting too much can make your compiled css file size huge.

  Oh and one last thing, there definitely are annoying html tags that won't let you restyle them, especially the select and options. That doesn't mean you can't make your own custom dropdown tho. I have like 10 different variants of dropdowns, you just have to make sure to correctly set the attributes saying that it's a select or an option. I would definitely have done that in your case because mapping out all of those options would have been so simple compared to listing them all out. I often make custom textfields too because they always look much better if I have a fake placeholder element and a label element that animate, it increases people's interest quite a but. Sorry I rambled so much lol this was just a pretty great looking project and it uses React which I love lol. Great job tho I think overall this looks great. Good job!! Let me know if you have any questions!

  3

  ---

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @steventoben This is great!! How did you style your select dropdowns? Would love to see that! And awesome tip with the reusable button, thank you! I'll be jotting that down.

  I knew you were going to comment on the 62.5% lol. I've asked this in my last project and haven't gotten a direct answer. Not sure if there's actually a "correct" answer. I like it for easy math, and seems every experienced developer has a different opinion on it. The most important thing I've gathered is that it doesn't affect accessibility as thought of in the past. If I'm using 13px (or whatever's in the guide) - those I consider “magic" numbers with 3-4 decimals. The numbers currently are based on the design files. I used px if it’s much much less than half a rem. I'm open to changing my approach though, if this is what's used in real life projects.

  I've actually tried saving initialState. For some reason, I couldn't get it to work with reset. The values are controlled by useForm.js. I'll definitely try again per your suggestion. As for the bg image, yes here's the file with the useEffect hook that I should have also posted earlier. It may be my syntax, I'm still trying to get to know React.

  Thank you so much for answering my questions. It helped me a lot, really. Please continue to ramble for next time lol 😅

  2

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @steventoben

  Say, I thought I might jump in and ask how setting the root font-size to a percentage of the default value affects users' accessibility settings. I personally set my font-size to 50% so that I can work with a rem being equal to 8px in most browsers (I like it better than a rem being equal to either 10px or 16px). As long as one sets the root font-size to a percentage and not a fixed value, any changes the user makes to their default font-size should be reflected in the website, right? For example, if a user sets their default font-size to 24px instead of the usual 16px, both a website with the root font-size set to 100% and another with the root font-size set to 50% will experience a 150% increase in the font-size of the text on the site.

  In the case where default font-size is unchanged,
  1rem is 100% of 16px -> 2rem is 32px.
  …then the user bumps up the font-size. Now,
  1rem is 100% of 24px -> 2rem is 48px.
  48/32 = 150% increase
  
  In the case where default font-size is changed,
  1rem is 50% of 16px -> 2rem is 16px.
  ...then the user bumps up the font-size. Now,
  1rem is 50% of 24px -> 2rem is 24px.
  24/16 = 150% increase
  

  The only thing one would have to adjust if they change the root font-size is the values that they set in rem in their CSS (to ensure that they meet accessibility guidelines and text is a clear, readable size, etc.), meaning if I set the root font-size to something 50%, then naturally, I'd set the font-sizes of text in my website to larger values of rem than I would if the root font-size were 100%. As far as I can tell, the only difference it would make would be to the developer, since changing the root font-size doesn't prevent users from scaling text by changing their browser's default font-size and neither does it affect the impact of a user changing the default font-size on size of the text on a website.

  Sorry if I started rambling a little, too, LOL, but this question has been bugging me for a really long time and I'm still trying to make sense of it. 😀

  2

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @emestabillo

  Like steventoben said, very good job! 👍 Everything looks pretty great (as usual)! 😆 I noticed a little transition on the accessible outlines of things and I thought that was pretty cool! 😀 Happy coding! 😄

  1

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @emestabillo For the dropdowns I have lots of variations but it's essentially composed of a trigger and then a menu right below it. So it's basically either a custom button that opens the menu when clicked, or a custom textbox that opens the menu when it either has focus or is given a value. The menu is just a ul with all of the options mapped and put in a custom Option component that's just an li element. I have a lot of different versions for different use cases, like forms, filtering, sorting by, multiselect, searchbox, etc. I've been thinking about putting all my components together in a package and posting it on github, so if you want to see what all my components look like you could follow me on there and I can upload the source. And if you want to make custom highly-reusable components, having PropTypes is great. I also like CSS Modules, that way all my css files are scoped to the component and I don't have to use those annoying class names.

  And lmao I'm pretty sure my entire comment history is just telling people to use font styles correctly ahah. And I could explain to you why 16px is LITERALLY the perfect value for designers and how it creates the best layouts, but that would take me forever lol. It'd be easier for me to just post my ACTUAL style guide. The style guide for these projects is so tragic lmao. I have a sass file filled with carefully picked values for lots of different things; typography scale, padding values, elevation levels, z-index stacks, color scales, sizing, aspect ratios, etc. It's got tons of comments too lol I explain the reason for every value and it really makes sense when you see it all come together. I mean for real life projects, that's always up to the UX team but most competent designers will pick the 16px base and use that. 16px was the standard for both places I developed at, and I mean the last one was Amazon, so I feel like I'm decently qualified to make comments about good software engineering practices. I actually haven't even tried a single project on here lol, but the funny thing is that I just found out there's a wall of fame on here and I'm ranked the #1 mentor lmfaoooo.

  Ok let me check out that effect hook and I can look at the custom hook too. I'm not that great at React idk I've been using it for like 3 years now but I'm still a little confused by context and dom refs/ref forwarding. So it looks to me like that useEffect is only fired on the initial render. Since your dependency array is empty there's no values it will ever need to check for a change. If you put window.innerWidth inside the array then the useEffect will fire every time that value changes, so whenever a resize occurs basically. I think it would technically work, but you might think about debouncing it. Like I'm not too sure if there's much point in updating the state while you're resizing, because you really just want the value when you've finished resizing. You could play around with that concept if you want. In your huge form component try to add onClick={handleSubmit} on the bottom button of type submit. Idk honestly I don't know much about forms, I try to handle that kind of logic on the backend.

  And no problem!! Feel free to ask me any questions idk if i can answer them but I'll try. I like the way you write your code lol your jsx looks really similar to mine actually. I've been drawing up the architecture for a pretty large full stack project so if you'd ever want to help out on something like that feel free to lmk!

  1

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @ApplePieGiraffe honestly this hurt my brain lmfao I don't really get the point you're trying to make. Yeah a 150% increase of two different numbers is not comparable. A pixel is a pixel. I really hope you're not actually setting your rem to 8px.... you know that 8px is far below even the smallest font size on a typographic scale right? 16px is the standard paragraph size. Do you know that the point of rem units is being able to scale the website up to the user's seeing ability? You're essentially blowing off all users with disabilities, and I mean even a normal person can't see 8px text. I genuinely don't understand the logic. At least 10px I could understand but why just cutting it in half? You cut it in half just to scale it back up? So you can deal in multiples of 8px? Just don't touch the root size and use 0.5rem. There that's 8px. I genuinely don't understand any of the logic here. As a general rule, just don't touch stuff you don't have to. Also 16px is the most important value on the web. It's the foundation of every major design system.

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @steventoben

  My point is that changing the root font-size to a percentage of the default browser font-size does not do anything to hurt people who change the default browser font-size for accessibility reasons (and the math explains my reasoning why).

  I try to always compensate for setting the default font-size to 50% by adding a rule to reset all the text on a page to 1.875rem or 2rem, which comes out to around 15-16px (and as you mentioned, that's just about the standard size). Even if that seems redundant, it's only a few extra lines of CSS and I find working with 1rem being equal to 8px relatively easy (since I didn't learn a 16 times table in school). And it fits very nicely with a design system based on 16px because it's just half of that number (so it's kind of like part of it).

  I think it's just another way of working. I understand using 16px for design purposes and integrating with other design systems and stuff but I don't see how setting the root font-size to a percentage hurts users (at least, not yet). 😀

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @ApplePieGiraffe Thanks APG! I placed a transition on the base file, I think that’s what’s causing it. Trying a bunch of different stuff. Hpe to get to your level of transition/animation at some point 😊

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @ApplePieGiraffe Ramblings are always welcome on my page 😄. Seriously though. Getting other devs’ point of view gets me unstuck in my own methods.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @emestabillo

  Yeah, it's definitely helpful! 👍 This is just something I've been thinking about for a while and I'm curious to see if I can learn more about it. 😉

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @emestabillo

  Oh, at first I thought the transition on the outlines was intentional! 😅 No worries, though—I've done that before, but I think sometimes it's kind of cool. 😀

  1

  

  T

  Grace•31,250

  @grace-snowPosted almost 4 years ago

  @ApplePieGiraffe The problem with this approach is that some people won't be able to read your site when 8px is scaled up by even 200%+

  By changing that base font size you are actually placing a barrier in there for people who need extra to enlarge web content.

  My general rule is don't ever touch base html font size, let it be 100%. And if general text size is being scaled on a site, it should always go UP.

  That's my 2 pennies worth :)

  2

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @ApplePieGiraffe You can do whatever you want, I'm just trying to warn you that it's bad practice and would never fly in an enterprise environment. You're just doing so much extra work and also using bad UX principles. Why don't you just use em units instead? Leave root size alone and in your body set font-size = 0.5rem. Now your default font-size is 8px and is also the size of 1em. You could also just make a sass mixin to convert pixels to rem. That way you leave rem alone and would just set font-size to @include pxToRem(20), which would take the number 20 and respond back with the equivalent of 20px in rem units. There's lots of ways to get around working with rem units if you're trying to avoid them so much. I'm not sure how much experience/professional experience you have but every place i've ever worked, our typography guide had a base of 16px. That doesn't mean it's the default value, it is just how the scale is calculated. 12px is usually the smallest in the set, but the scale is calculated by using 16 as a base and a scale factor of 1.25 (or anything you want) and making an exponential scale, rounding each size to the nearest 4px. Lol I'm mainly just confused because 16px is just double 8px, you can just use 0.5rem increments to achieve the effect. Again, do whatever you like but that's bad practice and is terrible in terms of maintainability and code re-usability.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @steventoben

  Thanks, I'll keep that in mind. Yeah, I agree that as far as maintaining and reusing code in a regular design system goes, using 16px as a base font-size is probably better. 👍

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @grace-snow

  Thanks for your input, Grace! 😀 Even though I'm setting 1rem to 8px, I won't set the font-size to the text in a website to 1rem. I'll make sure I set to something more like 2rem or 2.25rem (which will come out to around 16-18px). As Steven said, this might not sit well with many design systems, but users will not be scaling 8px text—they'll be scaling something more like 16-18px text, which should produce the same result as a regular website that uses 1rem equal to 16px but with text set to just 1rem (rather than 2rem like in my site or something). :)

  0

  

  T

  Grace•31,250

  @grace-snowPosted almost 4 years ago

  @ApplePieGiraffe unfortunately though that isn't how it works all the way through web browsers.

  Somewhere along the lines there will be elements that don't inherit font size. All of those go off of that html base font size, so you setting the size of the body to 2rem wouldn't affect them. It is so easy to miss those edge cases and not set a font size on them.

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @steventoben Oh ok noted on useEffect, thanks! I've also re-read the entire thread and I think the takeaway is to not touch the base font, I hope I got this right. Sure, let me know if I can contribute to your project. It'd be good to get to know how you tackle problems. I might be three times slower with deliverables though lol but yes, do let ME know since it's your project. Thanks again for taking the time to take a quick look and for all the useful comments!

  0

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @emestabillo Yeah that's basically what I was trying to advice but somehow a chain of 20 comments appeared debating which was is right lol. Like Grace said, don't mess with the user's font-size. The 100% is only there as an edge case. The way to handle fonts is leaving the root size as default which is usually 16px. Then for any other font size you want to use you set it in terms of rem. So you could have a heading on 32px because you set the heading's font-size to 2rem. I'm still trying to plan out my project and make sure I have everything thought out right but for sure I'll let you know if I could use some help

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @steventoben

  👍

  0

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @steventoben In all honesty, if you'd led with this, the thread would probably be 15 messages less lol. Thank you for sharing your knowledge though. This entire discussion has been informative in many ways. Til the next one! 😄

  0

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @emestabillo bruh "So yeah now onto just some general stuff, first off don't set font-size to 62.5% in your html tag. I have to tell people this every single project lmao but you should either set font-size to 100% or don't add the rule and let it be inherited from the browser settings" lmfaooo tbf I could see it easily being lost cause my first comment was pretty long lol and I touched on a lot of stuff.

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Hey Em! You've already got a bunch of detailed and useful feedback, so I'll just say brilliant work! 💯

  As you work with React more, you'll probably move towards making your SCSS files map 1:1 with your components (plus a bunch of global styles). This is a great architecture when working with component-based libraries/frameworks and is essentially why solutions like Styled Components work so well with React.

  Keep up the great work! 🙌

  2

  ---

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @mattstuddert Hi Matt, thank you for the feedback! Yes the CSS structure was one of the earliest things that stopped me in my tracks. I actually didn’t know where to put global styles for scoped-based CSS lol so I had to rely on what’s familiar to me. I’ll be trying out 1:1 for the next one. Just have to add here that reading other people’s multipage submissions have helped me a ton in finishing this project so big props to the platform for helping devs grow 👍🏼

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @emestabillo that's awesome to hear! Reading other people's code is such a great way to learn!

  For the global styles, you could load them in the App.js file if you like. Then anything more specific can be broken into more modular files that map 1:1 with a component.

  Looking forward to seeing your next project! 🙂

  1
• 

  T

  Grace•31,250

  @grace-snowPosted almost 4 years ago

  @emestabillo I think this solution looks fab and you've done a great job here!!!

  A few tiny recommendations still for best practice in accessibility (apart from the old font size discussions above!) is as follows:

  • focus highlight is really subtle. I get why and this is a classy looking site. So maybe consider having a play with the :focus-visible pseudo selector in css. That could allow you to give a much more obvious focus state for keyboard users, while keeping a subtle and stylish focus style for anyone else.
  • In your form I recommend making those date grid divs into a fieldset, letting the field info be the legend (no paragraph tag required) and using aria-label attributes on each date and time field instead of the separate label. I tried it with Voiceover and it just reads a lot nicer and makes it really clear that the 'pick a date' has 3 related inputs.

  I've often used sr-only labels instead of aria-label and they work fine in most circumstances. But they are read out separately, so in groups of fields like this it really slows down the reading.

  Minor things really, and by no means essential, but I thought you might enjoy the extra suggestions

  2

  ---

  

  T

  Grace•31,250

  @grace-snowPosted almost 4 years ago

  p.s. meant to say, well done for wrestling through with React! It's certainly not easy to learn and this is excellent for an early attempt!

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @grace-snow I appreciate every suggestion 😀 fieldset and legend were in the original version of the completed form...until I attempted to style the select dropdown. I found out it was impossible to style these tags like the design so I experimented with the divs. It went nowhere as you know lol but you’re right that I should’ve placed them back. I forgot to address them.

  Thanks also for the focus tidbit! And every bit of advice when I was still building it. I’ll be sure to adjust the code 👍🏼

  0
• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @steventoben You seem pretty opinionated in your ways 🙂. Show and tell works great for me. It would be awesome to wrap all your comments and skills into a project from FEM so we can have a look and study the structure you seem so passionate about.

  I understand every team is different and have their own style guides. I have no problems conforming to their set of style rules when I join one. Not sure I’m FAANG material just yet, I’m about 20yrs experience short lol. So I might still use the percentage route with base font. For now, and for portfolio purposes.

  1

  ---

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @emestabillo lol I've just been studying UX and researching for a long time now and I think this website is an interesting concept, but I see lots of solutions here with "Pixel for Pixel Perfect" or something like that in the title and it hurts watching developers practice trying to recreate a page exactly to the pixel because that's just not how the real world works and I feel like they're not learning how to correctly style. Lol I could but I honestly don't really know which one to do, a lot are pretty boring but maybe I'll check again.

  Most companies have their own design system, so every single thing branded by them is consistent and recognizable/feels familiar. And lol I mean your code seems to be pretty good it looks similar to mine, I made it to the final round of interviews at Google and I mean I just had an internship last summer at Amazon doing full stack development with Angular, sass, TypeScript, Java, Spring, and AWS, and I was only 20 years old and a college dropout. It's easier than you think to get into those companies. And I actually take a lot of principles from Google's MaterialUI design system. If you want to take a look at really well established and researched design principles you should take a look at their design articles. Here's one about typography https://material.io/design/typography/the-type-system.html

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted almost 4 years ago

  @steventoben Not to stick my nose in this rather heated debate, but... 😂

  I do agree with Em here that it would be great for you submit a project, even one of the really simple ones, to better illustrate your points and best practices. It'd be a good resource and reference for the community, much like Grace's solutions that illustrate accessibility practices, and I think many people would appreciate it.

  2

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @brasspetals Design systems are used to build a brand and integrate consistency and brand recognition through all of their products. The challenges here aren't really customizable, most of them are just placing images in a layout. And like I said earlier I don't really find these challenges to be interesting at all since I'm not a beginner. I'm not really sure what you want me to illustrate, if you're interested in a resource look here https://material.io/design/introduction

  0

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @brasspetals How to upvote more than once? 🙂

  1

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @emestabillo lol i mean if you really want me to do a challenge I guess I could make a codepen or something but I don't really see why you guys think it would help. It would look similar but with my own components and fonts and spaced out more thoughtfully. I could do the log in one or something because that one looks really bad and is like one of the only one that's not based on images. I feel like this is really overblown lmao if you work as a professional dev you'll know what a design system is it's literally just a list of sizes and colors and stuff to implement consistently.

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted almost 4 years ago

  @steventoben I understand where you’re coming from, and of course no pressure to do a challenge. You’ve been contributing to the community by giving loads of feedback, which is fantastic.

  But just saying if you wanted to do your version of a challenge, throwing pixel-perfect (are you cringing?) to the wind, using your own components, thoughtful spacing, etc. as you said, and then explained why you made the choices and changes you did, it could be a good teachable moment for some of us beginners who don’t have the same insights and perspective you do. I understand as an experienced dev these projects are going to be simple and even boring. The contribution would be for the community as an example for people to bookmark and come back to as a reference, not really practice for you. That’s all I meant. Seriously, zero pressure. If you don’t want to do it - totally cool. I just enjoy reading other people’s code and seeing different methods and opinions. We’re all just trying to learn and get better, yeah? 🤷‍♀️

  And thank you for sharing the Material Design resource. Appreciated. 👍

  2

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @steventoben

  Some of the Pro challenges come with actual design systems if you have access to the design files for those challenges. IDK what you'll think of them, but they're there if you want to take a look.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @emestabillo

  Haha, your solution page has become like the longest thread in FEM history, LOL. 😄 I guess I'll just change to font-size: 100%, too. 😊

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  @ApplePieGiraffe Haha agreed, badge worthy lol. This was fun.😅

  1

  

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  @brasspetals Yeah I totally understand, I've been thinking of making a blog website I could probably make that real quick and make a post rambling on about my opinions lol. That would probably be a better showcase since it would be from scratch and include multiple pages and reinforce brand recognition. I was looking through the challenges and I think the best way would be combining a few of the newbie ones and making them related to each other. I'll try to make something to showcase the power of typography, spacing, color, and repetition. I'll lyk when I come up with something to make real quick

  2