Skip to content
OverviewSolutions
23
Comments
29
seekinfox
@seekinfox

All comments

  • seekinfox•560
    @seekinfoxPosted almost 3 years ago

    nice and clean..well done.

    1
  • wowza18•40
    @elams18Submitted almost 3 years ago

    Hello, I did this quickly to test my knowledge with css. I got stuck with making the landing page responsive (aka media query). I felt like there were a lot of duplicate/unwanted code to make it to look as I want. Are there any methods to reduce the same?

    Thank you!

    Response Landing Page using Flexbox and media query

    3
    seekinfox•560
    @seekinfoxPosted almost 3 years ago

    I think Tailwind CSS and Sass both are completely different.

    Tailwind is a framework similar to the bootstrap. but it is much more easier to learn and once you start using prototype components you will fall in love with tailwind. if you know css you can go ahead.

    sass is a extension of CSS and is more advance version. it is full of advance features. it will help you organize your style sheets and it will make a big difference if you are on some larger projects. I cannot imagine myself writing css for larger projects, its a nightmare. you can just go ahead learn it and it will only help you..

    1
  • seekinfox•560
    @seekinfoxPosted almost 3 years ago

    I did not understand your question. but i will post this in case it's helpful

    <p><span>we are launching<span> soon!</p>

    css -> you can use span almost everywhere in html and give it a custom style.

    p {
   color: black;
}
p span {    /* span is child elem of p*/
   color: gray;
}
    0
  • seekinfox•560
    @seekinfoxPosted almost 3 years ago

    You can start using sass. maybe you will find the styling much easier.

    Marked as helpful
    1
  • wowza18•40
    @elams18Submitted almost 3 years ago

    Hello, I did this quickly to test my knowledge with css. I got stuck with making the landing page responsive (aka media query). I felt like there were a lot of duplicate/unwanted code to make it to look as I want. Are there any methods to reduce the same?

    Thank you!

    Response Landing Page using Flexbox and media query

    3
    seekinfox•560
    @seekinfoxPosted almost 3 years ago

    You're at the where you are ready to learn sass/scss. you should start using it, it will take you very less time to learn it.

    With it you can use @mixins witch allows us to write a chunk of code and reuse it wherever we need when styling. it is only one of the advantages.

    get on it !

    Marked as helpful
    1
  • Aye Thandar•20
    @10598ayethandarSubmitted about 3 years ago

    This is my first project using html and Css.I really need feedback for my very first challenge.Please teach me and tell my mistakes to rise my front end developer skill.I decide to continue learning in front end development.My html and Css code are old because I learn html and css by myself using website and course.I continue learning in javascript, bootstrap and jQuery.So I really need feedbacks for my first time challenges.Thanks you all.

    Order_Summary-Component-Main using html and CSs

    2
    seekinfox•560
    @seekinfoxPosted about 3 years ago

    It's cool that you finished your first challenge.

    You have used internal css

    Now take it to the next level by using external css. Create a new file style.css and put all your css in there.

    • Search how to link them to your html.

    Since you are a beginner, after you are comfortable with using html

    learn semantic html, it's just some additional tags. You can search them and add them in your practice.

    And do more smaller projects..

    Marked as helpful
    0
  • Elena Martinez•80
    @nenamartinezSubmitted about 3 years ago

    Hello everyone! Any feedback is appreciated, but here are some questions/issues I'm having:

    The background. I can't quite wrap my head around how to use the background-image properties to make it look like the design. Help please.

    Semantics. I tried to keep code semantics in mind, let me know how I did.

    Anything else that jumps out to you that would help me improve would be appreciated, thank you!

    Profile card - mobile-first responsive design

    1
    seekinfox•560
    @seekinfoxPosted about 3 years ago

    You can use

     background-repeat: no-repeat, repeat;
 background-size: 90%, 50%;
 background-position: top nrem left nrem , bottom nrem right nrem;. //you can change the unit and it can be negative.

    Separate two values with " , ".

    If you set only one value it will be applied to the both images.

    background-position: top nrem left nrem;

    Marked as helpful
    1
  • seekinfox•560
    @seekinfoxPosted about 3 years ago

    Are we suppose to organize our project files and folder like this?. i had a headache figuring things out.

    I'm a beginner so it's not surprising that it was complicated for me to go through. i only ever use 3 or 4 folders for my scss, css ,js and imges.

    i have no suggestion except for that border surrounding your body/html.

    0
  • murilo•110
    @mlzziSubmitted about 3 years ago

    I finished this one and it was quite a challenge.

    I used flexbox, but in desktop view I don't think is the more elegant solution. I tried grid also, but no success.

    If anybody can get me a hint I would appreciate it. Or any feedback on whatever improvements I could make.

    Best regards!

    Solution made with Flexbox and mobile first

    2
    seekinfox•560
    @seekinfoxPosted about 3 years ago

    I'll tell you what I did -> I'll keep the code minimum, since I'm writing this from mobile.

    This is mobile first approach

    <main> //.   column flex
   <div.container>
    <div.cards>  //column flex and  @media min width 1000px flex row
     .card1
      <div.middle-cards> //column flex
        .card2
        .card3
      </div>
     .card4
    </div>
   </div>
</main>

    For a better idea you can check out my code for this challenge.

    Marked as helpful
    1
  • Linea•10
    @lineah35Submitted about 3 years ago

    The div is missing here and I am not sure why it's not showing up because it does when I copy the full path. Literally submitting this to view proper solutions.

    • How do I center the main div?! -How do I expand the width of the button to match the width of the width of the annual plan div?
    • Is it better to use the float property rather than the table for the annual plan div?

    Order summary page with HTML and CSS

    3
    seekinfox•560
    @seekinfoxPosted about 3 years ago
    1. There are several html errors , div tags are not closed properly, br tags are not close properly
    • always start with creating opening and ending tags e.g <div></div>, so you won't have to worry about it later.

    2 . one of the best way to start building layout is to plan it. Do it in your mind or draw it down . once you get hang of it, you'll feel much more confident when you're building new layout.

    for general idea -> suppose i want to create a card like the challenge

    i would do ->

    <section class="card-container">
  <div class="header-image-hero">
  </div>
  <div class="text-content">
       
     <div class="plan">
     </div>
     <button></button>
  </div>
</section>

    you get the idea.

    3 . ways to center div in mid of screen

    • margin: auto;

    • display: flex; justify-content: center; align-item: center;

    You should use css flexbox , start with simple flex, you'll get it eventually. it'll make your layout lot easier.

    for width ->

    • you can set button width: 100%; so it'll expand to width of it's container e.g. take example from above
    .text-content { //parent for button and plan
 width: 10rem;
}

button { // direct child of text-content
 width: 100%;  
}

.plan { // is direct child of text-content
 width:100%; 
}

    you can also use flexbox to do this.

    4 . imo table is good but old. use flexbox and css grid. and using positioning a lot makes a code hard to maintain. but as long as you don't mess things up, its fine.

    Marked as helpful
    1
  • Laurel Ray•30
    @laurel-raySubmitted about 3 years ago

    I would appreciate any feedback or tips.

    Specifically, I'm wondering how I did on my mixins and media queries. I struggled a lot with the phone layout.

    Why isn't my background color working?

    I thought I'd give utility classes a try for margins. It worked, but I'm not sure if I should have used them in this case.

    Also, I'm looking for any feedback on how I could make my code better, prettier, more efficient, and up to date. I tried to keep accessibility tips from my last challenge in mind, so we'll see how I did this time.

    Responsive 3 column preview card component using Flexbox and Sass

    3
    seekinfox•560
    @seekinfoxPosted about 3 years ago

    You have wrong variable-name /spelling-mistake in background that's why it is not working.

    I had trouble finding main scss file, I think you can put .scss files in scss folder and compile them in css folder, that would organize your code well.

    Also you can add README.md file so visiters can have understanding of your project without going through your code.

    You can use read-template.md file for reference, it's available in download zip.

    Marked as helpful
    1
  • Sophie•60
    @sophieQuinSubmitted about 3 years ago

    Hi there

    I have applied correction based on the report I have received from the first submission. Also, attempted to incorporate a smoother transition with my navigation. Also, it is not working or only working once. If anyone can help me figure it out, it would be great.

    Any other feedback would be great

    Sunnyside Agency Landing page - Second sumbission

    2
    seekinfox•560
    @seekinfoxPosted about 3 years ago

    website is not responsive enough, the layout broke when i opened it in mobile view and in laptop view (1350px+?).

    menu looks broken when opened, make it look clean when opened.

    sorry for the critics. :)

    Marked as helpful
    0