Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
33
Comments
41

Junier Bolรญvar ๐Ÿ•ท

@JunbolThe Netherlands710 points

Having a background as an fine arts artist and graphic designer now entering the world of coding. I recently finished the first part (Front-end Developer) of my education as Full Stack Developer Skills: HTML, CSS (Sass), Javascript, Git/GitHub, Node, React (ChakraUI), Tailwind and Figma. Nxt Backend

Iโ€™m currently learning...

Typescript, Python, Lua, Tailwind

Latest solutions

  • ping-coming-soon-page with Tailwind and Flowbite

    #tailwind-css

    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    Submitted 12 months ago

    none


    0 comments
  • Intro-section-with-dropdown-navigation with Tailwind

    #tailwind-css

    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    Submitted 12 months ago

    none


    0 comments
  • Manage Landing Page with Tailwind

    #tailwind-css

    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    Submitted 12 months ago

    none


    0 comments
  • 3-column-preview-card-component with Tailwind

    #tailwind-css

    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    Submitted about 1 year ago

    none


    0 comments
  • NFT preview card component with Tailwind

    #tailwind-css

    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    Submitted about 1 year ago

    none


    0 comments
  • Space Tourism Website with Typescript, React JSON and 3d animations

    #animation#chakra-ui#react#typescript#vitest

    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    Submitted about 1 year ago

    none


    0 comments
View more solutions

Latest comments

  • Melvin Aguilar ๐Ÿง‘๐Ÿปโ€๐Ÿ’ปโ€ข61,020
    @MelvinAguilar
    Submitted over 1 year ago

    REST Countries API (Next.js & Server Actions + TypeScript + Tailwind)

    #accessibility#next#tailwind-css#typescript#lighthouse
    6
    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    @Junbol
    Posted about 1 year ago

    Hola Melvin, solo una nota: Tu link para code pen en tu perfil esta roto. Saludes

    Junier

  • P
    Andee._.Kโ€ข90
    @Andee-K
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I tried structuring the HTML in the semantically correct way.

    What challenges did you encounter, and how did you overcome them?

    A challenge included formatting the spacing between list elements and table elements.

    What specific areas of your project would you like help with?

    General tips

    Recipe Page: Basic HTML & CSS

    2
    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    @Junbol
    Posted about 1 year ago

    Hi Andee, is looking good. Yes a bit more space in the Nutrition section would be nice. But the main issue is that your image is missing. Reason image path is broken. Solution: add a dot before the /

    <img src="./assets/images/image-omelette.jpeg" alt="image-omelette">

    I hope that helps Cheers

    Junier

    Marked as helpful
  • Zeeshan-Haider0โ€ข10
    @Zeeshan-Haider0
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This was my third day into the web development and I tried my best and put the knowledge to use as far as I could. Hopefully I will learn more and master my skills and get better. I tried my skills just to practise the knowledge that i have about html and css so far This was a pretty good experience But im not proud of what I made :(

    What challenges did you encounter, and how did you overcome them?

    As a complete beginner it was tough and I did everything on my own

    What specific areas of your project would you like help with?

    As new to webdevelopment I didnt new how to customize that preperation time box and the nutrition table so i would definetely hope someone could help me there

    I used HTML for structuring the website and after that used CSS

    #accessibility
    3
    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    @Junbol
    Posted about 1 year ago

    ok first do that first. You can if you want create a totally new repository in GitHub and call it: recipe-page-main

    then add that remote to your local repository: git remote add origin <url of your GitHub remote repository which it will have the name: recipe-page-main> To do all this read the README.md file:

    Building your project

    Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:

    1. Initialize your project as a public repository on GitHub. Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, have a read-through of this Try Git resource.
    2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below.
    3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles.
    4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
    5. Write out the base styles for your project, including general content styles, such as font-family and font-size.
    6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
    Marked as helpful
  • Zeeshan-Haider0โ€ข10
    @Zeeshan-Haider0
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This was my third day into the web development and I tried my best and put the knowledge to use as far as I could. Hopefully I will learn more and master my skills and get better. I tried my skills just to practise the knowledge that i have about html and css so far This was a pretty good experience But im not proud of what I made :(

    What challenges did you encounter, and how did you overcome them?

    As a complete beginner it was tough and I did everything on my own

    What specific areas of your project would you like help with?

    As new to webdevelopment I didnt new how to customize that preperation time box and the nutrition table so i would definetely hope someone could help me there

    I used HTML for structuring the website and after that used CSS

    #accessibility
    3
    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    @Junbol
    Posted about 1 year ago

    Hi Zeeshan, I think I might guess what is going on. My tip for you for now is to delete the repository you have now and create a new one but this time make recipe-page-main the repository and not nested inside another parent repository like it is now.

    Cheers

    Junier

    Marked as helpful
  • arun81302โ€ข60
    @arun81302
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    i want to use flexbox but i have to practice flexbox next time

    What challenges did you encounter, and how did you overcome them?

    use flexbox

    What specific areas of your project would you like help with?

    some code changes can be done

    html and css

    2
    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    @Junbol
    Posted about 1 year ago

    Hi Arun, The issues with your project is the use of Flexbox. Here is the code fixed and then an explanation on the comments:

    #outer {
        display: flex;//๐ŸšฉFlexbox!!!!!
        flex-direction: column;//๐Ÿšฉ
        align-items: center;//๐Ÿšฉ
       ** margin: 0 auto;**//๐Ÿšฉ
        /* margin-top: 160px; */ you don't need this code
        /* margin-left: 550px; */you don't need this code
        height: 430px; 
        width: 295px;
        background-color: white;
        border-radius: 10px;
    }
    

    <img src="./image-qr-code.png" alt="qrcode"><!-- ๐Ÿšฉ a 'dot' is added before the '/' -->

    Here are some tips: Flexbox: Iโ€™m sure you use 3wschools to refresh stuff. But these two new kids on the block are really great:

    1. [Flexbox Webdev] (https://web.dev/learn/css/flexbox)
    2. [Flexbox Css Tricks] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
    3. [Flexbox Josh] (https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/)

    Keep going!

    Cheers

    Junier

    Marked as helpful
  • Felipeโ€ข60
    @typingfe
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to use overflow on the recipe and to use tailwind css in this project.

    What challenges did you encounter, and how did you overcome them?

    null

    What specific areas of your project would you like help with?

    null

    Reponsive Recipe Challenge

    #tailwind-css
    1
    Junier Bolรญvar ๐Ÿ•ทโ€ข710
    @Junbol
    Posted about 1 year ago

    Hi Felipe, nice job! I don't know if you missed on purpose but the teh pink background or Preparation time and the lines diving the nutrition values are missing. Let me know if you need help with that especially the second one is tricky Cheers

    Junier

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
ยฉ Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub

Oops! ๐Ÿ˜ฌ

You need to be logged in before you can do that.

Log in with GitHub