Hi, I'm Tauri!
I am a student with Skillcrush and I finished their Front End Developer track and am now in the midst of building my own projects in order to further practice and solidify APIs and React, and I am also neck deep in the job search!
This week was dedicated to setting up my boilerplate and starting the mobile styles by styling the nav bar. I had some flukes and had to set some fixed widths to get the look I was going for, which I don't think is proper for the responsiveness I want. Looks nice, but I'm going to do more investigation into this next week.
I set up my CSS boilerplate, started a SASS file and got it compiling live in VS Code, and imported my layout partial in reusing my module from my portfolio. I also started to import in some font styles. I went to check how they're looking in my local file, and none of them are showing! I can see them compiled into my main.css file, so I dunno what's happening there but I have to figure it out! Pretty fizzled out after a long day of job applying (catching up from not applying on Sun so I could catch up on some chores and have some fun by going to a show in the evening) so I'm going to revisit this tomorrow. 30 mins
I walked away from writing up my blog yesterday and knew exactly what was wrong. So so obvious it's embarrassing and I almost considered not mentioning, but I want y'all to feel reassured that it happens! Not only could I not see the styles when viewing my page, but I couldn't see them when viewing the code with DevTools either. Sooo, what must be happening? The style sheet isn't connecting! And sure enough I had mis-named my style sheet for this project "styles" but I was setting up all my style sheets named "main". Boop, fixed.
I started work on the nav bar today. The book logo is on the other side from all the options to toggle different settings so I flexboxed the whole nave and space-betweened them apart from each other. Each setting includes two elements to be more descriptive (font words plus down arrow for the drop down, and toggle plus an image for the dark-mode toggle). I took into consideration that I want the words and arrow for the dropdown to all be clickable so put that all in a button zone, but the toggle itself is where someone will click to switch between the modes. For now I copy-pasted the toggle properties from W3 schools, altered the colors + adjusted the size of the toggle background. After adjusting the toggle-ball size, it's not quite switching within the boundaries of the switch like I would like. I need some time to research some of the different properties before I finish with this, then fiddle with the margins around everything to get the mobile layout down. 30 mins
Doing some research on the code I lifted from W3 schools yesterday, and according to MDN
-webkit-transition: is deprecated and not recommended for use bc only Safari-based browsers support it.
transitions: without any prefixes is supported by all browsers tho. I can't figure from this why both were included in the code from w3, but I removed the webkits on and it's still working in my Chrome browser but I'll do a cross-browser check soon.
I did some experimentation to figure out what the transitions affect. The toggle has been named with a span class of
slider. Updating this transition rate under the
slider class in my CSS changes when I extend to a longer rate (like from .4s to 4s) it takes longer for the gray slider to transition to the 'checked' color purple! Updating the transition rate under
slider:before changes the rate at which the toggle moves from one side to the other. So I kept those as is at .4s.
I adjusted the
left properties so that the ball sat more neatly within the slider space.
Same thing with the
transform property that is given an
-webkit prefix when
transform is supported across all browsers, so I removed those as well. Adjusting the property value of this under
input:checked + .slider:before allowed me to keep the toggle within the slider space whenever it is
checked so now it's perfect! 30 mins
Today was a success with keeping up my schedule of job applications and prospecting, but a crapshoot for code. Once I centered my nav horizontally with flexbox, all the elements got smooshed into the center when I wanted them to spread across the width of the page. No amount of playing with all related divs and their widths allowed it to stretch. I was pretty bummed and feeling the imposter syndrome, but I read this article on CSS Tricks about getting width and flexbox to play nice and it doesn't quite apply to my situation. 30 mins
I had to force the min-width of my nav bar to be a specific set of px to get my nav to spread properly. That feels wrong, but cooouuld work.
I wanted the background and the border of of the drop-down to select different fonts button gone. Setting it to be the same color as the background did it. This is a great article tho about default button settings from CSS Tricks.
Then I took some extra time today to set up the border-line between the font drop down and dark mode toggle settings and mess with the paddings and margins a bit so I was able to bring it just a bit closer to the design comp for now in the nav bar (not including the search bar) 1 hr
And this is from the design comp:
Check out my code on Github here.
And it's of course as I walk away from a problem that I always have my best ideas: I'll be referencing an older project I did with a similar nav set-up next week, my single page responsive website for the restaurant Rogue Pickings.
Top comments (2)
I am having an issue with the styling of the Dictionary Web App CSS. The current design is not user friendly and does not provide a pleasant user experience. The colors are not very visually appealing, and the font size is too small. Additionally, the layout is not optimized for mobile devices, making it difficult for users to navigate on a small screen. The overall design does not provide a consistent look and feel across all platforms of niche-m203-vosso-matte-blac, making it difficult for users to recognize the app and navigate in it. I suggest changing the colors to something more vibrant and modern, increasing the font size, and optimizing the layout for mobile devices. By making these changes, users will have a better experience when using the Dictionary Web App.
Hi @amelia792 ! I have only just barely begun to style the Dictionary Web App! I literally only just finished the nav bar for mobile in light mode yesterday, and absolutely nothing else is styled! I am basing my styles on the design comp provided by Front End Mentor: frontendmentor.io/challenges/dicti.... The contrast levels are the highest they can be between black and white and my interpretation of the intention behind the design is to maximize readability and accessibility rather than go for something modern or cool so I’m going to stick to that. The fonts go no smaller than 14px on mobile only and are 18+ on all other screen sizes, and there are specific styles for all screen sizes so it will most certainly become more user friendly over time 👍🏼 Thank you so much for your feedback!