roelof Posts - Answer Overflow

roelof

•Created by roelof on 3/14/2025 in #front-end

Overlapping css grid problem

Helllo, I try to make 3 div's overlapping each other. So far I have this : https://codepen.io/RoelofWobben/pen/JojOzqz Can anyone help me figure out how on the top left in the image div a little div can be added so it overlaps the overlay div ?

17 replies

KPCKevin Powell - Community

•Created by roelof on 3/8/2025 in #front-end

How can I make this animation ?

Hello, I have a div with a background-color and a text. Now I want if you hover over the div that a darker color appears from the bottom to the top and the text moves also from the bottom to about the middle of the div. Is this possible and if so, how can I make this work ?

3 replies

KPCKevin Powell - Community

•Created by roelof on 2/11/2025 in #front-end

Grid or a mix of grid and flexbox

As a challenge I want to see if I can make this layout : https://mindspring-light.webflow.io/ if I look at the orginal, the css is a mix of flex , grid and position: absolute. Should I do the same or can this layout be easily done with only grid ??

7 replies

KPCKevin Powell - Community

•Created by roelof on 11/2/2024 in #front-end

Kevin . Image caroussel tutorial

Does Kevin have a video where I can learn how to make a image scroller So I can solve this one : https://www.frontendmentor.io/challenges/room-homepage-BtdBY_ENq

2 replies

KPCKevin Powell - Community

•Created by roelof on 9/30/2024 in #front-end

CLR navigation problem

Can anyone help me a better way to get the logo and the menu some space. I use now margin-left: 90px but that feels not the right choice. Second question Can anyone help me figure out why the button is not aligned nice with the rest of the menu ? Code so far : https://codepen.io/RoelofWobben/pen/vYoNrXO

6 replies

KPCKevin Powell - Community

•Created by roelof on 9/29/2024 in #front-end

Feedback on a CLR course challenge

I solved challenge2 of the flexbox challenge of the CRL course. How did I do it regarding naming and my css ? Code: https://codepen.io/RoelofWobben/pen/PoMPzOd

14 replies

KPCKevin Powell - Community

•Created by roelof on 9/29/2024 in #front-end

Why is my codepen messed up.

Hello, I tried to do the first challenge of the CLR course about flexbox but my layout is totally messed up. It looks the css file is suddenly not found. Anyone a idea how to solve this ? Code : https://codepen.io/RoelofWobben/pen/gOVaMmK?editors=1100

6 replies

KPCKevin Powell - Community

•Created by roelof on 9/28/2024 in #front-end

Why is my layout messed up on mobile

Hello, I wonder why me layout is messed up on mobile. Code so far: https://codepen.io/RoelofWobben/pen/BaXoydN

7 replies

KPCKevin Powell - Community

•Created by roelof on 9/20/2024 in #front-end

Tutorial for a responsive and accessible hamburger menu

Im still struggeling with the last challenge of the CLR course. Is there somewhere a good course where I can learn to make a responsive and accessible hamburger menu in mobile and a normal menu in desktop. Im struggeling with making the right html and css

3 replies

KPCKevin Powell - Community

•Created by roelof on 7/21/2024 in #front-end

Good way to learn more css

Do not know if it's a question for here but with a CLR challenge , can it be wise to use the html has and just get busy with the css On one challenge I do not know if I use the right html structure

11 replies

KPCKevin Powell - Community

•Created by roelof on 6/24/2024 in #front-end

Sticky footer

Does anyone know if Kevin has a video about how to make a sticky footer. So a footer which is always on the bottom

22 replies

KPCKevin Powell - Community

•Created by roelof on 6/22/2024 in #front-end

Div with fixed width How to make responsive ?

Hello, On the CLR course I learned that a fixed with with px is never good. But now I want to try to make this challenge : https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H and it looks to me that the card has a fixed width on both mobile and desktop. Is it good for this case to use a fixed width in px or can still beter use % and then a width and a max-width ?

10 replies

KPCKevin Powell - Community

•Created by roelof on 6/9/2024 in #resources

online grid generator

Hello, For a grid layout, I always use this site : https://grid.layoutit.com/

2 replies

KPCKevin Powell - Community

•Created by roelof on 3/16/2024 in #front-end

react why is setCategories is not defined error

Hello, For wordpress im busy with making a component who reads all categories. So far I have this :

const [categories, setCategories] = useState([]);
  const [chosenCategory, setChosenCategory] = useState(0)
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchCategories() {
      
        const queryParams = { _fields: ['name', 'id'] };
        apiFetch({ path: addQueryArgs('/wp/v2/categories', queryParams) }).then((response) => {
          setCategories(response).catch((error) => {console.log(error)});
        });
      
    }
    fetchCategories();
  }, []);

const [categories, setCategories] = useState([]);
  const [chosenCategory, setChosenCategory] = useState(0)
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchCategories() {
      
        const queryParams = { _fields: ['name', 'id'] };
        apiFetch({ path: addQueryArgs('/wp/v2/categories', queryParams) }).then((response) => {
          setCategories(response).catch((error) => {console.log(error)});
        });
      
    }
    fetchCategories();
  }, []);

but when I run this I see a message that setCategories is undefined. Can someone explain why this happens and how to solve it

121 replies

KPCKevin Powell - Community

•Created by roelof on 2/17/2024 in #back-end

Can I change the jquery to plain js and how do I send the errors back to the form

Hello, I have this challenge Task: Develop a shortcode that will output a simple contact form. This contact form, when submitted, will use wp_mail to send the email. Requirements: Shortcode needs to have fields: Subject (input), Email (input), Message (textarea), Sanitize all fields before being used for sending it, Use wp_mail to send the email Style it and enqueue style only on pages where the shortcode is Display errors on top of the form I found a tutorial that does almost that but it works with jquery. Now my question are : 1) is there a way I can convert the jquery to plain js. 2) How do I make it work that if there is a validation error I can show it also above the form. Code of the tutorial : https://gitlab.com/roelofwobben/short-code-form ping @ἔρως

5580 replies

KPCKevin Powell - Community

•Created by roelof on 12/22/2023 in #front-end

How can I animate my accordion menu and still keep in accesbile.

Hello I wonder how I can animate the opening and closing of a carroussel but still keep it accessible. Code so far : https://github.com/RoelofWobben/faq-accordion Live url : https://roelofwobben.github.io/faq-accordion/roelof.html

25 replies

KPCKevin Powell - Community

•Created by roelof on 11/10/2023 in #front-end

Feedback on responsiviness and javascript use

Hello, I almost finisch a FEM challenge and I wonder how I can improve the responiviness and my javascript. And of course semantic html it is about a form that needs to be validated. Code here : https://github.com/RoelofWobben/intro-component Live you can see it here : https://roelofwobben.github.io/intro-component/roelof.html

1 replies

KPCKevin Powell - Community

•Created by roelof on 11/2/2023 in #back-end

Good free low-code platform

Hello, Im fairl y good in FE (html, css and js) I like to learn also BE work but in ruby and PHP I fail at things to be complex. So I think I want to look at non of lowcode to make nice custom looking website's. Can anyone recommend nay platforms.

6 replies

KPCKevin Powell - Community

•Created by roelof on 9/13/2023 in #front-end

Read a file and make div's based on the content of the file. best approach

Hello, I have to read a json file so I do it like this :

 
fetch('./data.json) 
  .then( (resp) => resp.json())
  .then( (data) => result = data)

 
fetch('./data.json) 
  .then( (resp) => resp.json())
  .then( (data) => result = data)

now I have to make a div with these contents for every object

<div class="reaction card">
                <div class="left">
                    <img src="./assets/images/icon-reaction.svg">
                    <p>Reaction</p>
                </div>
                <div class="right">
                    <span class="bold">80 </span>
                    <p> / 100</p>
                </div>
            </div>

<div class="reaction card">
                <div class="left">
                    <img src="./assets/images/icon-reaction.svg">
                    <p>Reaction</p>
                </div>
                <div class="right">
                    <span class="bold">80 </span>
                    <p> / 100</p>
                </div>
            </div>

Is it wise to call a function in my fetch or is there a way I can use the data outside the fetch

1 replies

KPCKevin Powell - Community

•Created by roelof on 8/17/2023 in #front-end

How to construct this image

I wanted to make a gallery with the rijksmuseum api. I get some json back which looks like this :

{"levels":
   [
     {
       "name":"z3",
       "width":1400,
       "height":1165,
       "tiles":
                [
                  {"x":2,"y":0,"url":"http://lh3.googleusercontent.com/kRPnUXsQSnT3ArTDzrZV3sR8W319W-PNoTtR0JY5sUPnKGUEQXLkXqpwyuH0itllQs8XmYKdCY0yAvJY1l61WROh5UvHgHjMS1XJv2o=s0"},
                  {"x":2,"y":2,"url":"http://lh3.googleusercontent.com/4gQFJa-ImwN4KCIIcjal7oSBsVsWTiXQP9Z5pPvRczjbI34PLqYPGJ53CLHEKzi4B-kR

{"levels":
   [
     {
       "name":"z3",
       "width":1400,
       "height":1165,
       "tiles":
                [
                  {"x":2,"y":0,"url":"http://lh3.googleusercontent.com/kRPnUXsQSnT3ArTDzrZV3sR8W319W-PNoTtR0JY5sUPnKGUEQXLkXqpwyuH0itllQs8XmYKdCY0yAvJY1l61WROh5UvHgHjMS1XJv2o=s0"},
                  {"x":2,"y":2,"url":"http://lh3.googleusercontent.com/4gQFJa-ImwN4KCIIcjal7oSBsVsWTiXQP9Z5pPvRczjbI34PLqYPGJ53CLHEKzi4B-kR

This is a part of the json. But now I wonder how can I construct the image back when I get some coordinates. Now it looks like a square of 2 x 2 but it can also be a different one on another image

68 replies

Gaming

Programming