Fiber Landing Page 

Snipper Landing Page

Commune Waitlist Page

TimeNow Landing Page

{"ops":[{"insert":"Perfect to practice creating % based containers and using flex or grid.\n"}]}

Newsletter Popup Template

Multi Step Form 

Workside Job Board

YelpCamp by Colt Steele

Web Developer Portfolio

Javascript30 Navbar

Love the work you've done and the fact that it's responsive. My only 2 comments is that the image technically isn't 'stuck' at the bottom and that the items in the footer change to a hamburger menu on mobile. Other than that, great job!


This is perfect! My only comment is that in tablet size the image in the 'Diversify your portfolio' section isn't fixed to the bottom and is instead in a square that is vertically and horizontally centered. Other than that, great job! 

How long did this take you?

Thank you for the feedback. I fixed that issue with the align-self property of flexbox.
It took 3-4 hours to complete the project.

Very well done for only 3-4 hours of coding! 

Love that you're using SCSS Mixins and variables, very clean!

Click the 'Sign Up' button to see the register design. 

This is so awesome, I love how you've implemented the scrollable testimonials section, VERY clean, good job!

<b>I actually haven't noticed the hamburger menu on mobile - thanks for pointing it out!</b>

No comments design-wise, looks like you've done a good job of replicating the actual design! I'll leave the code to someone more experienced.

Great job, looks like the content isn't constrained to a certain container, though!

I think you've nailed it, I do recommend increasing the line height to make it more readable, text feels too squished together!

Great work, my only comment is to make the padding 1rem all around instead of 2 and 1.

Coding isn't my expertise so i'll leave that to someone else, you've done a great job at making it responsive.

My comments are all spacing and font-related. You'll find that the sign up button, for example, has a different font-size than the rest of the navbar elements. There's a lot white space in all sections, I recommend you use a container with a width of 1140px. The shadows on the testimonials section are also harsh. 

Other than that, I think you've done a really great job, keep it up!



You've nailed this one IMO, great job. TimeNow is a free template and has a landing page and a pricing page, you might like it, check it out!

Looks like you've done a wonderful job, my only comment is to remove the underlines under the buttons! Can you let me know which image was missing from the asset file so I can update it? Thank you!

Well done! The 'Start Free Trial' is broken for me, i'm using Safari if that helps.

Glad you're taking the initiative to focus more on accessibility! This looks really good, my only comment would be to have the sign up page take up the entire page instead of being centered. Great job otherwise!!

ahh yes I forgot the underline thank you! and the hero images for the tablet and mobile I only had the desktop image.

unless the figma design is a little off shows different assets for desktop tablet and mobile.

Thanks for reporting this, will look into it and update the Figma files! 

Love it! Looks really clean on all sizes, you've done a wonderful job :)

Your Implementation was spot on, great work!

The animations were a silver lining to the great layout

Both the pages in one:
https://codepen.io/ignitis/pen/PomKLRZ

Great job, my only comment is to have the hamburger menu switch to an 'X' icon when active!

I like the scale effect you added to some buttons, I would've never thought of using that, really cool man.
also the scrollbar it's really cool

You've done a great job on desktop! Remove the underlines and you should be fine... But the mobile view is similar is similar to desktop and just looks as if it has been shrunken down. Take a bit more time to make it like the original.

👋Hi vishalbrdr!

For the "View live project" link, it's a GitHub repo link.

Have uploaded your project to Netlify or GitHub page?

Live project link seems to be working fine for me

Hello! You've done great. Here are my feedbacks
-  I noticed you made use of padding with percentage as the unit on each section, this isn't a very good idea cause on a very large screen it could break the layout and make it look messy.

I'll advice you have a container class like this:

```
.container {

}
```

I'm sorry for sending the message without completing it...

.container {
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
}

Then you can use that class around each section of your page, allowing the sections to have the same max-width;

Also using the unit percentage isn't really the most efficient way, cause it's relative to its parent.  I advise you to learn about units like rem and em.



Hello! You've done great, I have some suggestions that you could work on 

So I noticed you made use of these properties on each section, I'm guessing you're making use of the padding for mobile devices view, which is totally cool but here another approach.

// yours
header, main, footer {
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 30px;
}

// another approach
.container {
   width: 90%;
   max-width: 1000px;
  margin: 0 auto;
}

the width of 90% does give mobile devices some space, which fixes the padding. But your implementation is all good though.

Also I notice this:

<div class="header-wrap">

</div>

Also I noticed this:

<div class="header-wrap">
  <header> .... </header>
</div>

Semantically there's no need for the div element, you could use the header, main, footer elements directly.

Lastly, the solution lacks white space, majority of the elements are too close to each other. 

That's all, I hope it was helpful even though you didn't ask :)

Well done Jaspal, your solutions are always so well done! 🚀

Hello! Thank you so much for your feedback! I'll note and implement it for my next project! ^^

Thank you so much brother, means alot 😁

Good job Ait, just one note, viewing campgrounds shouldn't prompt users to login, they should be able to view campgrounds without logging in.

Thank you @moeminm,
I've made the changes to meet your requirements.
So user can see campgrounds. but needs to authenticate in order to add a campground or review one.

Project completed.
Users can register, login, add their own campgrounds, and review others campgrounds.
For the image I added an image file upload instead of typing the image url.

Thank you Codewell for this challenge.

Hi There, I just checked your solution you have attempted it very well. Keep doing the good work. Hope you build more 🔥💜

There was an issue on post comment, some users kept tapping the post comment button.
 Fixed now, I added a spinner and disabled the Post comment button on form submit. Thank you everyone and happy coding.

I did just the website on desktop to start. I haven't done the rest yet, but I think it looks nice!

Yeah It is amazing thanks for the help in the footer part I didn't know how to do it so I had a look at your code thanks I do really appreciate your help

  background-repeat: no-repeat;
  background-size: cover;

para que el fondo no se repita se vea como el diseño,
saludos desde mexico.

Could you share your solution with me? I'm rather new to coding and this would be a great learning experiance for me. 

You can click on 'View Source Code' to see the solution.

Great job Shin, looks like newly added camps are not persisting when you reload the page, perhaps that's something you could Google & learn more about!

Nice work ! You’re definitely not a learner 😮‍💨. I’m done designing the whole project but no JavaScript skills yet. Learning that atm. Anyways where did you get your react training from ? 👀

It's great. I really like your idea for the mobile sidebar.

Awesome work! Everything looks great and I love how you've handled the search function, viewing camps throws me an error though! "Application error: a client-side exception has occurred (see the browser console for more information)." — this happens whenever I view any camp. 

yea i was working on comment section now it's working fine 🚀🚀

it's not responsive only good in mobile view but open in big screens everthing breaks

yes, I forgot to mention that while submitting, only mobile version is ready and also missed search functionality.
Currently working on another urgent project but I submit semi final for review and feedback about current status.

https://github.com/yewinag/news-letter-ui

You didn't have to make the hamburger menu. It was included in the files as an image.

2 things. Horizontal scrolling is not good. The second thing, the mobile nav is showing on a large screen. 

I would add on hover cursor pointer for the menu. 

I really liked your profile, so original! 

Had to post twice because this f****** platform dosent have options to edit your submits...

In general, I was just changed name on Github so i had to change name on my github pages.

Looks good so far! It doesn't look complete yet though. Did you really work at at Facebook yet? lol

don't know where i am going wrong with my submission.

Every image have include alt attribute :)

Thanks. On a scale of 1 to 10 please rate my work.
Can I show this to recruiters?

create with flexbox and grid methods to help on operation on mobile phones.

You changed the width of body that resulted in inresponsiveness of your website. Use padding in body for gap

Hi SauravHeavyCoder
Thank you for the feedback provided. much appreciated
I will try it in the future and if i understand you correctly i should rather use a 10% padding on the left and right and not a fixed width of 80% with a margin of 0 and auto.


Hover animation on navbar links is so cool. How you do it?

Nice bro. Just update your live website link.

https://webdevporto-codewell-bef.netlify.app/

nice site. but when you reduce the page size with ctrl - the site contents fly around

updated hamburger menu with small javascript code

My attempt at responsive development.

Snipper Landing Page - My First Codewell Challenge

Fiber

{"ops":[{"insert":"Here's my solution to the commune waitlist page. Feedback is welcome.\n"}]}

Commune Waitlist

{"ops":[{"insert":"Using Bootstrap and vanilla JS.\n"}]}

Fun project that took about a day

{"ops":[{"insert":"Please help me review my source code\n"}]}

Request review NewsletterPopupTemplate

Snippet Template Solution

{"ops":[{"insert":"Created using Next.js\n"}]}

Fiber Landing Page

{"ops":[{"insert":"I build this is site with Scss.\n"}]}

Time Now

Short and sweet

{"ops":[{"insert":"Simple solution.\n"}]}

Newsletter Popup

Fiber Codewell Challenge

Fiber Challenge with HTML5, CSS, JAVASCRIPT, SASS

Fiber landing page with SCSS

Snipper Landing Page.

Fiber Landing Page using SCSS 

Build Using SCSS

Slap dashie pass

Fibr landing page with accessibility and srcset

Fiber Lading Page, sign up incoming... 

Fiber 

This challenge flexibilizated my life

Newsletter popup template challenge

{"ops":[{"insert":"Purely used the Bootstrap 5 base classes to structure and style the form.\n"}]}

Newsie - Codewell challenge

Commune WaitList page with Bootstrap 5

Fiber Landing page solution

{"ops":[{"insert":"I had fun trying to make this responsive and as pixel close as the designs\n"}]}

Newsletter Solution

{"ops":[{"insert":"Developed popup Template\n"}]}

Codewell Landing Page w/ mobile menu

C.J Fiber Demo 

Commune waitlist page

React Tailwind css

Fiber Landing Page - Built with Gasby

C.J commune demo

Fun, love this platform

 TimeNow/Pricing with Bootstrap 5

{"ops":[{"insert":"Build with react, tailwind css and styled component. \n"}]}

Snipper Template complete 

Fiber Landing page with signup form, slick slider carousel + mobile nav menu

This is my first challenge ever

{"ops":[{"insert":"Build with React framework, using styled components with tailwind css\n"}]}

{"ops":[{"insert":"made a fully responsive react website, with mobile menu and signup page\n"}]}

Fiber landing page with react

Commune Website

Commune Waitlist Page 

{"ops":[{"insert":"Newsletter popup with email validation using javascript. Flexbox.\n"}]}

Newsletter popup with email validation

 Solution Fiber landing page Using HTML and CSS

{"ops":[{"insert":"This is my first Codewell solution. \n"}]}

Mobile first Responsive Fiber landing page (HTML&CSS)

{"ops":[{"insert":"This is Fiber website create with both HTML and CSS\n"}]}

{"ops":[{"insert":"I made the whole thing usign the grid system of bootstrap for responsive\n"}]}

Responsive Fiber website, made using bootstrap and js

{"ops":[{"insert":"Enjoyed building this landing page. However, I didn't add active states.\n"}]}

Commne Waitlist page

Fantastic Practice!

Fiber landing page made with html and css

Very simple but good landing page design.

TimeNow Challenge (HTML/CSS) by Njorthr

Snipper Landing Page Challenge

{"ops":[{"insert":"Used html, css and js\n"}]}

Fiber Portfolio

{"ops":[{"insert":"Best for beginners to get knowledge of basics.\n"}]}

Finally done but  i tried  Responsive web but cant Done

nice experience

Solution with bootstrap 5

CSS only no Js and Bootstrap for the hamburger menu

{"ops":[{"insert":"This is my first attempt at creating a responsive  website. \n"}]}

First Challenge 

Newsletter Popup | HTML CSS Sass

Fiber Clone 

{"ops":[{"insert":"I use Grid, Flexbox and SCSS.\n"}]}

Commune Waitlist 

{"ops":[{"insert":"Hi everyone, I appreciate any feedback, thanks 😊\n"}]}

Newsletter Template - Mobile first

{"ops":[{"insert":"Any one can comment!\n"}]}

Commue Waitlist Starter Project with HTML and CSS

{"ops":[{"insert":"No Bootstrap and Js\n"}]}

Newsletter Popup Template Using HTML And CSS

{"ops":[{"insert":"Anyone can comment!\n"}]}

Fiber with HTML and CSS

{"ops":[{"insert":"I hope your feedback\n"}]}

Fully responsive solution with React and tailwindcss

{"ops":[{"insert":"If there is any comment or feedback lemme know\n"}]}

Solution for Commune Waitlist

{"ops":[{"insert":"Really nice challenge, I enjoyed a lot 😀.\n"}]}

Fiber full responsive with TailwindCSS

Snipper landing page with HTML And Tailwind CSS

{"ops":[{"insert":"gulp-sass browser-sync \n"}]}

Snippet Template challenge codewell

Multistep form concept with Drag and Drop API

Completed this website using html and css.

{"ops":[{"insert":"click SignUp button to see the form\n"}]}

Fiber Main page with Form Register

Fiber Codewell

{"ops":[{"insert":"Used HTML and CSS, It was an interesting project\n"}]}

Solution using flex box, responsive units, and Javascript.

Finished Using Tailwind CSS and Semantic Tags

Snippet_Template_Starter_Files

{"ops":[{"insert":"no interesting parts since challenges was pretty simple\n"}]}

newsletter popup

Landing Page

Commune Webpage Challenge

{"ops":[{"insert":"any suggestions?\n"}]}

news-letter-card

{"ops":[{"insert":"TimeNow pages made using html , css and bootstrap\n"}]}

TimeNow main page and Price page

{"ops":[{"insert":"It was an awsome project to practice.\n"}]}

{"ops":[{"insert":"Built with Bootstrap 5.\n"}]}

Fiber - Create Portfolio in Minutes

{"ops":[{"insert":"Snipper Landing Page made using HTML, CSS, JavaScript.\n"}]}

using webpack, react, sass, and some complicated stuffs I don't even wanna mention

My solution for Yelpcamp challenge

YelpCamp Solution