All solutions

my 1st Junior(free) build. any feedback is appreciated 🙂

My 17th NEWBIE(free) build. Had a few issues while making the component as close as possible to the provided design. The main struggle was to get the <main> element's background color just as the design. Finally, I achieved it from CSS box-shadow: by setting inset but I don't know if there's another way to get the exact look of the design. Plus, add some interactions using JS. Share your opinion if something needs to be fixed, any feedback is appreciated 🙂

my 16th NEWBIE(free) challenge. 🙂

my 15th NEWBIE(free) challenge. Took some while to create some custom validations for the sign-up form. I need to build the JS with less code. any suggestions/feedback will be appreciated 🙂

My 14th NEWBIE(Free) buildup. Added some custom features on my own using JS. I created a custom hover-state for the social share button & a zoomed view of the article-presenter while hovering. check them & let me where I need to improve, any kind of feedback is appreciated 🙂

My 13th NEWBIE-Free build-up. Happy to say that I learned a new CSS Property while doing this, with the help of FM-community friend @correlucas. The CSS property is 'mix-blend-mode:' (blends the parent element's background color with current element content) 👉🏼 might be useful to you in future. 🙂

my 12th NEWBIE-Free challenge. :)

coding after a long time... this is my 11th NEWBIE-Free build-up & learned a new uncommon CSS property - 'text-underline-offset:'. This thing might be helpful to you. 🙂

10th build-up :)

My 9th build-up, touching these surfaces after a long time :)

After a few months of practice in JS, I managed to make a responsive toggling dropdown. There are two JS files for each dropdown mode. Choose a preferred script and run the code - script1 is in if-else conditions & script2 is in functions and methods. There may be some errors or alternative ways for better functioning. I just wanted to make the dropdown part well-responsive, rather than being 100% perfect in every way. Appreciate it if you wish to share your ideas with me. Also, Feel free to change the JS scripting & use it as your own 🙂 JS code is very bulky btw.

My NEWBIE-Free7th build-up. Can we use flex properties for HTML { } instead of body {}, inside a CSS sheet? I know it's possible but is it okay to do so?

My 6th build-up. Does anyone know how to set the correct aspect ratio scale for media queries besides min/mas width scales?

My fifth build-up. My alignments are okay, but the body is pushed up to the middle or to the left corner in some resolutions. ( I used padding and margin properties in some resolutions because the centering is not working properly with flex ) How to properly center the HTML body by using only flex properties?

~Thanks~

4th NEWBIE-Free challenge COMPLETED.

My third build-up. 🙂 ... how set the media queries responsive for both mobile and pc resolutions using media queries (min-width: )/(max-width) with (min-height: )/(max-height) ? I used only one property [ only (min-width: ***px ) ] in med.q.s for this. How ever if I used both the page brakes. can we use transform:scale for this? ~Thankyou~

This is my second build-up. Provided background SVG images won't responsive to mobile site scales. How to set a custom size in svg_s for mobile sites?

~Thanks~

Hey yoh 🙂, I'm new to web designing & still getting used to it. I've created my first NEWBIE-Free challenge, the Huddle Landing Page with 90% accuracy ( I think ) but I was unable to set the background image ( desktop & mobile svg_s ) sizes that fit into the given parameters. Anyhow If I change width, height, or both properties according to my screen view - the background svg_s either span out or stretched. later I tried some CSS solutions but nothing comes out helpful. All I want to know how to set the background svg_s as the same as in the website pre-preview images that were given.

~Thanks~