Fiber Landing Page 

{"ops":[{"insert":"Practice your CSS, loops, and fetch Javascript skills with this challenge.\n"}]}

Contrast Directory

Workside Job Board

YelpCamp by Colt Steele

Web Developer Portfolio

{"ops":[{"insert":"Perfect for practicing modular components and responsive design.\n"}]}

Personal Blog

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! 

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!

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!

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!!

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

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

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.

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!

Perhaps you could deploy this to Github Pages for us to see it live in action? Check out how to do it here: https://pages.github.com/

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 ? 👀

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.

New Link:
https://bluedeepart.github.io/codewell-challenge/

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. 

Fiber

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

Fun project that took about a day

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

Fiber Landing Page

Fiber Codewell Challenge

Fiber Challenge with HTML5, CSS, JAVASCRIPT, SASS

Fiber landing page with SCSS

Fiber Landing Page using SCSS 

Slap dashie pass

Fibr landing page with accessibility and srcset

Fiber Lading Page, sign up incoming... 

Fiber 

Fiber Landing page solution

C.J Fiber Demo 

React Tailwind css

Fiber Landing Page - Built with Gasby

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

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

Fiber landing page with react

 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

Fiber landing page made with html and css

{"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

Fiber Clone 

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

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

Fiber with HTML and CSS

Responsive Design using Tailwind CSS and Fetch API

Fully responsive solution with React and tailwindcss

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

Fiber full responsive with TailwindCSS

{"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

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

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

Fiber - Create Portfolio in Minutes

Fiber Landing Page with SCSS & JS

Fiber Project Made with SCSS and Bootstrap5

{"ops":[{"insert":"Landing page built using html css and javascript.\n"}]}

YelpCamp Codewell Challenge

Fiber Landing page

{"ops":[{"insert":"Great real life project\n\n"}]}

Fiber solution by Mr. Ravi

Fiber Landing Page by Hayden

{"ops":[{"insert":"Any feedback would be great!\n"}]}

Fiber landing page

Workside template

Yelpcamp by Colt Steele

{"ops":[{"insert":"This is my solution. Any feedback would be appreciated.\n"}]}

YelpCamp - Solution

Fiber Started Files

{"ops":[{"insert":"That's my first project with sass.\n"}]}

YelpCamp Solution

Yelp Camp Project with React JS

Solution from halim 

Fiber Challenge

{"ops":[{"insert":"done with bootstrap 5\n"}]}

Solution

{"ops":[{"insert":"Made it from scratch using HTML and CSS. \n\n"}]}

Solution by Vilay

Solution with Tailwindcss

Developer portfolio starter files  by ikram

My solution

Task Completed

HTML5, CSS3, JavaScript, SASS

{"ops":[{"insert":"This is my first solution in codewell\n"}]}

My first challenge on Codewell

{"ops":[{"insert":"for the whole code, I use bootstrap\n"}]}

Landing Page - Codewell

{"ops":[{"insert":"Any comments and suggestion will be appreciated. Thank you everyone!\n"}]}

web developer portfolio

{"ops":[{"insert":"the most intresting part was collabs images in various degree\n"}]}

Developer portfolio

Codewell starter webdevelopment challenge

Yelp Camp with next js & firebase 

{"ops":[{"insert":"Luego de estar por 4 horas matándome con el responsive, lo logré :'D\n"}]}

AL FIN

Landing Page

{"ops":[{"insert":"It's my first website I created.\nShow me my mistakes.\n"}]}

YelpCamp

YelpCamp React App

{"ops":[{"insert":"This is my first attempt, simple HTML and SCSS were used.\n"}]}

Developer Portfolio by ZeljkoDe.

Responsive Web Developer Portfolio Using HTML5, CSS3 and JavaScript

{"ops":[{"insert":"Personal Blog by Deepart\n"}]}

Personal Blog by Deepart

Challenge 1

{"ops":[{"insert":"I build each of the pages and listed the structure in the readme\n"}]}

Yelp Camp Solution by Victor Evogor

{"ops":[{"insert":"Done with bootsrap 5\n"}]}

Portfolio template

Web developer portfolio

MikeAttah's Web Developer Portfolio Solution

Fiber landing page + signup page 

{"ops":[{"insert":"Done using HTML, CSS Flexbox, and couple lines of JS\n"}]}

techGuy08's Web Developer Portfolio Solution

{"ops":[{"insert":"made with HTML5 CSS3 and Javascript\n"}]}

made with HTML5 CSS3 and Javascript

{"ops":[{"insert":"Hecho con Bootstrap 5\n"}]}

Challenge Developer Portfolio

Fiber website solution

{"ops":[{"insert":"project created using react js and sass\n"}]}

YelpCamp - react app

Done with HTML CSS

fiber landing page

Responsive mobile first landing page Fiber

Developer Portfolio Challenge

{"ops":[{"insert":"Built with Flexbox, SASS and BEM.\n"}]}

Personal Portfolio

Fiber Starter

Web developer portfolio challenge solution

YelpCamp Next.js+Tailwindcss

Fiber landing page & signup

Yelp_Camp

Developer-Portfolio-Starter

Johnathan Specter

Developers Portfolio using HTML CSS JS

{"ops":[{"insert":"Landing page responsive website design. comment your thoughts\n"}]}

Portfolio Project

{"ops":[{"insert":"For the first time, I've learned many things with this small project.\n\n\n"}]}

Developer Portfoilio

{"ops":[{"insert":"Practica de portafolio responsive en html, css y bootstrap\n"}]}

NNN

Fiber landing page & signup

Fiber Starter