Skip to content
OverviewSolutions
33
Comments
19
HelloTechTinu
@tinuola

All comments

  • Muhammad Sarwar•140
    @Prototype-113322Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    I encountered an issue when I had to change the color of a bullet point, so I used W3Schools to overcome it.

    Recipe Page

    1
    HelloTechTinu•670
    @tinuolaPosted 3 months ago

    Nice work getting this close to the design spec, Muhammad.

    A layout issue I notice is that the CSS styles are not applied when the screen is larger than 1440px. To fix this, update the second media query by removing the (max-width: 1440px) range.

    Also, there's little need for the first media query: @media (max-width: 600px) since by default you're starting with the mobile style, and the second media query sets the next breakpoint.

    Lastly, I recommend grouping the page sections with either div or section tags so that the code is organized and can be easier to read.

    Good luck with future projects!

    0
  • HelloTechTinu•670
    @tinuolaPosted 8 months ago

    @ABU-BAKAR-S, Nice work on the responsiveness and getting this almost exactly mirror to the design! 👍🏾

    One recommendation would be to remove the last media query (1024px) and use its rules/values in the 768px media query instead. This would give the page a more fluid transition from mobile without the extra "shift/jump" to the layout that is currently happening at 1024px resolution.

    Good luck with your next challenge.

    Marked as helpful
    0
  • Daniel 🛸•44,310
    @danielmrz-devSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

    🛠️ Built with:

    • HTML 🧾
    • Tailwind 👾
    • JavaScript 🤖
    • Mobile first workflow approach 📲

    I tried Tailwind again on this one. I've been trying to finish bigger projects using only Tailwind, but there's always one thing or two that I'm not able to create with it so I have to use a bit of pure CSS too.

    Anyway, it took me a few hours to finish, but I enjoyed every minute of it.

    Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Insure Landing Page (TailwindCSS)

    3
    HelloTechTinu•670
    @tinuolaPosted 8 months ago

    @danielmrz-dev,

    Looks great and kudos on the use of Tailwind. 👍🏾

    A suggestion for what to improve on would be to make the nav menu keyboard accessible when the menu collapses. Currently, when the screen resizes down the first clickable/focusable element is in the body, not the nav.

    Starting to consider accessibility beyond native elements can be a great skill to practice and cultivate as a frontend developer.

    Marked as helpful
    1
  • Joseph Reyes•440
    @JreyIVSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    i was able to finish this quicker. I'm getting more used to patterns, noticing the stuff that I keep repeating in other challenges. I am getting better at using more standard practices and I think my code looks a little cleaner now. next time I hope to be able to work quicker and make my code even cleaner

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

    This was the first time working without a figma or design file. It was a lot harder to eyeball this one especially with the text because I swear mine looked bigger then the design picture. I wouldn't say I overcame it, just tried my best.

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

    is there anyway I can clean up my code further? I notice that I have a lot of code where I repeat a lot (see below). Is there a way to make that more efficient or is this the common way that people write css?

    .profile-details {
  padding-block: 1rem;
}

.profile-details h1 {
  color: var(--clr-white);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
}

.profile-details p:nth-of-type(1) {
  color: var(--clr-primary);
  font-weight: var(--fw-normal);
  font-size: 0.9rem;
  padding-top: 0.5rem;
}

.profile-details p:nth-of-type(2) {
  color: var(--clr-white);
  font-weight: var(--fw-light);
  font-size: 0.875rem;
  padding-top: 1.5rem;
}

    Social Links Profile

    1
    HelloTechTinu•670
    @tinuolaPosted 8 months ago

    Great work with this challenge. The code is concise and not overly repetitive. If you notice that code is repeated, one approach is to use CSS Variables, which you already are doing. Another would be to organize the repeating rules under one class name and then apply that to the markup.

    For example, if I'm using this rule set a lot:

    display: flex;
flex-direction: column;

    I could create a declaration:

    .flex-col {
    display: flex;
    flex-direction: column;
}

    And use that selector/class name (flex-col) in the markup. It would be similar to creating/using utility classes--code that does specific things and can be used in multiple places. If you decide to get into Tailwind CSS, you'll learn about this approach.

    A somewhat advanced option is using Sass/SCSS, which allows you to do a similar thing--creating reusable blocks of CSS called mixins.

    There are many approaches to explore and use depending on the project scope and on your preference as you continue to learn more. Good luck and happy coding!

    0
  • Oluwanifemi Agbaje•70
    @Nifix001Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to use another CSS framework for the project (Bootstrap CSS).

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

    I was faced with the challenge of making the accordion button functional.

    FAQ accordion solution

    1
    HelloTechTinu•670
    @tinuolaPosted 8 months ago

    Unique solution to go with bootstrap. It's an efficient way to take care of accessibility--making the accordion navigable by keyboard. The animation also works nicely.

    The layout/component size and icon positioning as the screen resizes down could use some tweaking. The text starts to get compressed/squished and the icons overlap the headings. There's also a light-blue background that shows up when the accordion is expanded. Looks like that might be a bootstrap thing?

    0
  • LLL0908•40
    @LLL0908Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm getting familiar with controlling the position and also believe that I can do better next time.

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

    Everything went better than last time.

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

    still need to learn about how to deal with images

    Blog preview with a hover state

    1
    HelloTechTinu•670
    @tinuolaPosted 8 months ago

    Hello LLL0908. Congrats on completing your second project!

    Good job using flexbox to work out the positioning -- centering the component, and the user/byline row.

    One area of improvement would be to use more semantic HTML elements. Instead of the 'div class p1/p2/p3/p4", use descriptive tags such as p, h1, h2 etc. Divs are generic--they have no meaning and are best used for grouping elements, which you've done well in some areas of the code.

    Also, the class names "p1/p2/p3, etc" are not particularly intuitive or meaningful. Instead use descriptive names for the classes, such as "card-heading" / "card-subtitle" / "card-description", etc. Meaningful and descriptive naming makes code more readable.

    I recommend refactoring the code and then practicing these tips in future challenges.

    Good luck!

    Marked as helpful
    0
  • farwaayunis•20
    @farwaayunisSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    i would like to use js qr library instead of static image to implement it.

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

    github pages was a new thing and it took me sometime to upload my project as instructed.

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

    i woud like to learn react and angular js and implement same chunck of code in it.

    chllenge was to understand github and github pages .

    2
    HelloTechTinu•670
    @tinuolaPosted 8 months ago

    Hi Farwaayunis. Good effort with your project. Although this project doesn't call for a lot of CSS, it is good to get into the practice of separating CSS code out of HTML/markup into a separate stylesheet (style.css file, for example).

    As for the code: since you've already applied flexbox centering to the 'body', there is no need to apply 'position:absolute' to the component. Any child inside the body will be centered vertically and horizontally. You'll just need to apply 'flex-direction: column' to the body so that the heading and the component are stacked.

    You also want to adjust the color contrast of the component text; it's very pale and hard to read against the white background. This is not ideal for accessibility.

    Now that you've submitted the solution, you should be able to see how others have coded this challenge. I recommend reviewing other people's solutions. It's a good way to learn and pick up tips.

    Good luck!

    Marked as helpful
    0
  • HelloTechTinu•670
    @tinuolaPosted 9 months ago

    Hello, Technically, the form works -- it submits as long as all the fields are completed. What is missing in the code is the logic to check that the information entered in the fields are in the accurate format. If the user input is incorrect, then the form should not submit. Users should get error messages about how the data should be entered.

    For example, in the current code, the card number, month, year and cvc fields are allowing/accepting alphabetical letters. This should be set up/refactored so that only numeral values (0-9) are accepted.

    You need to update the logic that checks the fields to also include a check that the fields are getting the properly entered data.

    Marked as helpful
    0
  • HelloTechTinu•670
    @tinuolaPosted over 1 year ago

    @Casey, nice effort.

    Your solution/layout is breaking once the screen is resized down.

    A few things to simplify your code and still get you to the finished result/effect:

    • There's no need for media queries in this project since the size never changes across resolutions.

    • Instead, remove the 23% width you've set on the content-wrapper; try using an absolute width instead, such as max-width: 320px;

    • The flex properties on the background should instead go on the body element; and use align-items: center rather than align-self. Add the background color to the body as well. Give the body a min-height of 100vh.

    • Once you do this, you can remove the rest of the declarations on the content-wrapper except the color, radius and padding.

    • There's also no need to add flex properties to the image or the h1.

    Marked as helpful
    0
  • HelloTechTinu•670
    @tinuolaPosted over 1 year ago

    @Albert, Your solution looks good overall.

    One slight bug: when the browser window is resized down, the blog sections floats or overlaps the hero section. I recommend removing the absolute value you've set on the blog (400px) and consider instead giving it a relative value (1fr? or some % value) and then making further adjustments with an additional media query.

    0
  • Craig Johnson•240
    @craigdev937Submitted over 1 year ago

    I love CSS Grid. I wanted to use Grid-Template-Areas. Any feedback and ideas are appreciated. 🙂

    3-column preview card

    2
    HelloTechTinu•670
    @tinuolaPosted over 1 year ago

    Nice work @Craig! This is a good project to practice with Grid.

    A few tips:

    • Setting 'grid-template-rows: 1fr' on the body will center the component vertically
    • The 100vw width declaration on the body is not needed--the body is that by default
    • The second display:grid declaration in the media query for the container class is not needed since grid has already been declared prior
    0
  • Kelsey Hughes•80
    @kelbri10Submitted over 1 year ago

    A large majority of this project was a good refresher in Vanilla JS, HTML, and CSS. One aspect I dived deeper into was how to apply widths. I realized after watching a couple videos I was depending on using 100vw in order to help with centering but learned that there were some downsides to be considered as it relates to responsiveness.

    I definitely have continued questions about best practices when it comes to the units you're using (rem/em/px/vmin/vmax) and in future coding projects I want to continue to explore how to better apply that.

    Interactive Rating Component

    1
    HelloTechTinu•670
    @tinuolaPosted over 1 year ago

    @Kelsey, nice solution. Good choice to use input fields to keep the logic simple.

    A minor layout tip: Set grid-template-row on the body to 1fr to position the app dead-center. Also remove margin-bottom on the wrapper class, which isn't needed.

    When it comes to units, I find myself relying more on rem by default than px, except when setting large values. Not that it makes much of a difference; but I find it spares me and anyone reading my code the mental work of figuring out that 56.25rem is equal to 900px! em is a unit I understand and like conceptually, but to me it also calls for some forethought about the effects when primary elements shift and how subsequent dependent elements (that are set with the em unit) will then behave.

    0