davebitter / minor-webdev_css-to-the-rescue Goto Github PK

HTML 39.22% CSS 53.24% JavaScript 7.54%

minor-webdev_css-to-the-rescue's Introduction

Curious how this dynamic README was made? Check out https://youtu.be/jVg-qkQ01lI

Hi, I'm Dave 👋

I am a Senior Front-end Consultant, Developer Advocate and Google Developer Expert for Web.

I am a Senior Front-end Consultant, Developer Advocate, and Google Developer Expert for Web, with a rich background in development and design. I have amassed considerable experience creating state-of-the-art, human-centered web applications. As a Developer Advocate, I take immense joy in sharing my expertise with fellow developers and empowering them with the tools, resources, and support needed to deliver exceptional web experiences.

I have a unique perspective on web development, combining my experience in both development and design to deliver exceptional results for clients. I am skilled in developing user interfaces that enhance the user experience and enjoy working collaboratively with designers to create visually engaging designs. My approach to web development is always user-centered, ensuring that the end product is not only functional but also aesthetically pleasing. My expertise in user-centered design ensures that my web solutions are not only visually stunning but also intuitive and easy to use.

I have worked with a wide range of organizations, including large multinationals and small startups, and have helped them overcome challenges and achieve their goals. In my current role as a Senior Front-end Consultant, I continue to deliver innovative, user-centered web solutions that exceed client expectations.

In conclusion, my skills, experience, and passion make me a valuable asset to any organization. I am excited about the prospect of contributing to an organization's mission of delivering exceptional web experiences and look forward to the opportunity to discuss my qualifications further.

Writing 📝

I write a lot on a wide range of topics regarding front-end development and everything linked to that. You can have a look at davebitter.com!

My latest articles:

YouTube 🎥

I publish a new YouTube video on the Frontmen channel with front-end tips every Friday. You can check it out here!

My latest videos:

Social 📱

You can find me on the following social media platforms or send me an email:

👔 LinkedIn
🗣 Twitter
📷 Instagram
✉️ [email protected]

minor-webdev_css-to-the-rescue's People

Contributors

Watchers

minor-webdev_css-to-the-rescue's Issues

Focus style is heel subtiel

Waarschijnlijk te subtiel voor mensen met keyboard die kleurenblind of slechtziend zijn.

id & specificity

Ik snap het gebruik er van ivm targetting, maar ik zou het niet gebruiken om stijlen aan te koppelen ivm specificity (https://specificity.keegan.st). Probeer ook niet te specifiek te stylen (door nesting in preprocessor kan het zijn dat het niet op valt).
section#chat ol > li > p kan ook zo #chat p.

Step indicator

De progress bar is ook te stylen. Ik zou het geheel ook meer een progress achtige look geven, wellicht dat pijltjes hier kunnen helpen.

Step indicator

Deze lijkt me nog niet af, toch?

Picture with caption

Dit probleem is complexer: Het plaatje moet altijd helemaal zichtbaar zijn in elke viewport. Dus maximaal 100vh, en maximaal 100vw. Bovendien moet je ook altijd kunnen zien dat er een onderschrift is. En dit moet werken met een landscape en een portrait plaatje …
En kan je je nog herinneren hoeveel em breed een paragraaf maximaal mag zijn?
En hier is er iets mis met de aangeleverde HTML. Hier moet je dus wel iets aanpassen (-:

Rating / Login

Je zou de :checked selector in combinatie met de sibling selector kunnen gebruiken om de smileys te stijlen aan de hand van de geselecteerde checkbox (dit kan bij de stay-logged-in checkbox ook nog nuttig zijn). Misschien is het zelfs mogelijk de "er is nog geen radio button geselecteerd" state te stylen...

Vergeet de Vendor prefixes niet

Invoer

Text in invoer velden mag groter.

Weetje: Als font size van het invoer veld niet 16 px (1em) is dan gaat iOS inzoomen op het veld.

Al met al

Het ziet er op punten echt erg mooi uit!
Kijk eens of je hier een echte site van kan maken. Lukt het je om alle elementen op een logische manier te tonen? Het mag op één pagina, maar ook op meerdere pagina's. Het onderwerp mag je natuurlijk zelf weten.

.btn--primary

Deze gewoon [type=submit] maken. In de praktijk ga je waarschijnlijk toch iets van een class nodig hebben maar voor deze opdracht is het denk ik passender om het attribute te gebruiken.

wildcard border-box

Ik ben hier nooit zo van (als iemand die plugins aanbied online) omdat hierdoor alle elementen ander layout gedrag gaan vertonen. Als je dus plugins gebruikt dan kan het zijn dat die breken omdat ze er van uit gaan dat elementen standaard op content-box staan.