Skip to content
OverviewSolutions
11
Comments
10

hilmi77

@hilmi77250 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • ISAAC EDZORDZI FIAVOR•110
    @ISAAC-EDZORDZI-FIAVOR
    What are you most proud of, and what would you do differently next time?

    I'm proud to be part of Frontend Mentor Community. This is my first time trying a challenge like this . Hoping to learn a lot from the family. The project was a little bit challenging but I try my best.

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

    I was finding it difficult to assign width and height to the container or box in which the content are

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

    Responsive design

    Html,css

    2
    hilmi77•250
    @hilmi77

    Hello @ISAAC EDZORDZI FIAVOR!

    Your Solution looks good🎉

    when I review your solution

    I have some advice for you

    -->If you are a Free member of FEM your starter file doesn't include Figma design therefore you can use Perfect pixel extension which usage so simple

    --->By using this extension, you can see the size of your designs more clearly while working.

    if you find useful this comment please click "Marked as helpful"

    Happy coding

  • hilmi77•250
    @hilmi77

    Hello @Olaniyan Kafayah!

    Your Solution looks good🎉

    When I review your solution

    center a container you can use flex, grid etc. for example you want to use flex to center a div you can give height:100vh display: flex; justify-content: center; align-items: center; to body element..

    if you find useful this comment please click "Marked as helpful"

    Happy coding

    Marked as helpful
  • Fl0wwDev•10
    @Fl0wwDev
    What are you most proud of, and what would you do differently next time?

    This is the first time I've done a project like this, I really liked it.

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

    I had problems related to the flexbox, it's an area that I don't know very well

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

    I'm a beginner I take all feedback, thanks !

    QR code component

    1
    hilmi77•250
    @hilmi77

    Hello @Fl0wwDev!

    Your Solution looks good🎉

    When I review your solution

    center a container you can use flex, grid etc. for example you want to use flex to center a div you can give min-height:100vh display: flex; justify-content: center; align-items: center; to body element..

    and you if you want to learn flexbox deeply, you can visit these sites; https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://www.w3schools.com/css/css3_flexbox.asp

    if you find useful this comment please click "Marked as helpful"

    Happy coding

  • bialasss•280
    @bialasssek
    What are you most proud of, and what would you do differently next time?

    ready to do the next project

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

    centering the card by display grid , minheight 100vh, placeitems center,

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

    .

    Responsive Recipe Page using grid

    1
    hilmi77•250
    @hilmi77

    Hello @Marcelisq!

    Your Solution looks good🎉

    When I review your solution

    center a container you can use flex, grid etc. for example you want to use flex to center a div you can give min-height:100vh display: flex; justify-content: center; align-items: center; to body element..

    if you find useful this comment please click "Marked as helpful"

    Happy coding

    Marked as helpful
  • Ridlo achmad ghifary•290
    @RidloGhifary
    What are you most proud of, and what would you do differently next time?

    someone please read this, i push all the challenges on the same repository, iam a bit confusing how to deploy all of them on github pages because some of them i created with react and some of them just HTML

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

    help me

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

    i`ll might help on how to using react and styling

    RESPONSIVE WEB SEARCH COUNTRY

    #react#tailwind-css#react-router
    1
    hilmi77•250
    @hilmi77

    hello @Ridlo achmad ghifary!

    It sounds like you're working on a collection of projects, some built with React and others with just HTML, CSS, and possibly JavaScript, and you want to deploy them all to GitHub Pages. Let's break down the steps you can take to achieve this, considering the mix of technologies you're using.

    . Organize Your Repository First, you need to organize your repository to handle both React and plain HTML projects. A common approach is to have each project in its own folder at the root of the repository.

    Example structure:

    /my-github-repo

    /react-project-1

/react-project-2

/html-project-1

/html-project-2

    . Deploy HTML Projects

    Deploying HTML projects to GitHub Pages is straightforward. If these projects don't rely on build steps, you can directly deploy them from a specific folder in your repository.

    GitHub Pages for Project Site: You can use the gh-pages branch of your repository to host your static files. However, GitHub Pages typically serves content from the root of a repository or the /docs folder on the main branch, which means you might need a separate branch for each project or to adjust your project structure.

    . Deploy React Projects

    For React projects, you will need to build them first because React apps require a build process that compiles JSX and ES6 code to browser-compatible JavaScript. Here's a basic approach to deploying a React app:

    Build Your React App: Navigate to your React project folder and run npm run build. This will create a build directory with your compiled project.

    Deploy the Build: You have a few options for deploying the build directory:

    Subdirectory on GitHub Pages: You can move the contents of the build directory to a subdirectory in your GitHub repository and push these changes. However, this approach requires configuring the homepage in your package.json and might involve complex path configurations for routing. Separate Repository/Branch: Each React project could have its own GitHub repository or branch for deployment purposes. This makes deployment simpler but fragments your projects across multiple repositories or branches.

    . Using GitHub Actions for Automation GitHub Actions can automate the deployment process for both your HTML and React projects. You can set up workflows to automatically build your React apps and push the builds to the appropriate branches or directories for GitHub Pages.

    . Configuring Paths and Routing Especially for React projects, ensure your application routing works well with the GitHub Pages deployment structure. You might need to use HashRouter instead of BrowserRouter for React Router to handle client-side routing correctly.

    . Tips for React and Styling React: Focus on component-based development. Break down your UI into reusable components. Styling: Consider using CSS modules or styled-components for scoped and maintainable styles. This approach helps prevent style conflicts across your projects.

    if you find useful this comment please click "Marked as helpful"

    Happy coding

  • Desmond Maina•90
    @des254
    What are you most proud of, and what would you do differently next time?

    Iam progressing well.

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

    The challenge has been a smooth one for me with only one challenge. Placing a div below another div. My attribution div could not come below the div with the other content.

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

    I would appreciate any help with centering a div.

    Responsive qr component code with HTML and CSS.

    #accessibility
    1
    hilmi77•250
    @hilmi77

    Hello @Desmond Maina!

    Your Solution looks good🎉

    When I review your solution

    center a container you can use flex, grid etc. for example you want to use flex to center a div you can give min-height:100vh display: flex; justify-content: center; align-items: center; to body element..

    if you find useful this comment please click "Marked as helpful"

    Happy coding

    Marked as helpful
View more comments