IndieBrew Landing Page

Snipper Landing Page

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

Newsletter Popup Template

{"ops":[{"insert":"A fun and simple project to practice responsiveness and positioning.\n"}]}

Meeet Waitlist Template

YelpCamp by Colt Steele

Web Developer Portfolio

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

Personal Blog

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 awesome, love the little animation you've added in the hamburger menu on mobile as well!

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

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.

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!

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! 

Correct link to live demo
https://competent-elion-cbde7a.netlify.app

Hi. Great work. I dwelled into this for a while. I'm reckon there might be an autonomous way but here is a simplified syntax.

<h1>Meet New Entrepre<span style="z-index: 4;margin: 0;">neurs</span></h1>

Instead of using two spans, just use one and remove all the margins from that span. 

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

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

First thing Ur Twitter logo is fixed change it. And responsiveness is sucked first divide everything in parts and make it full responsive first like logo first then the main section then the footer.

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.

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

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

My files dont contain the 6th avatar, is there any way i can get it please?

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.

How did you figure out the colors and the gradient? Great work btw!

Thanks bro, I took colors from figma file, gradient form previous solutions 🥺, or make it on special service(i dont remeber exactly)

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

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.

Good to see the page, but in laptop screen size I see twitter logo coinciding with button.

Every image have include alt attribute :)

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

If you pay the $8 monthly, you get the figma files. This file is kind of like photoshop where you can extract images (i.e. the 6th avatar). You can also find the width and height of things, the line height etc. You can use the ruler tool to to measure distances. 

Alternatively, you can also snippet tool the extract and save it as an image and import it into your html, give it a class and change the width and height to replicate it to the best of your ability.

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/

updated hamburger menu with small javascript code

My attempt at responsive development.

Snipper Landing Page - My First Codewell Challenge

I used this challenge to try out mint. 

Excellent gradient and flexbox practice. 

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

Request review NewsletterPopupTemplate

Snippet Template Solution

Short and sweet

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

Newsletter Popup

Snipper Landing Page.

Build Using SCSS

{"ops":[{"attributes":{"code-block":true},"insert":"\n"}]}

InderBrew -Codewell

Newsletter popup template challenge

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

Newsie - Codewell challenge

INDIE BREW 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"}]}

{"ops":[{"insert":"it's a good challenge,i learned more from it , and I advice anyone to do it\n"}]}

Website (html5 css3 bootstrap)

Meeet Challenge Solution

Fun, love this platform

Snipper Template complete 

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

React Tailwind css

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

Newsletter popup with email validation

IndieBrew (HTML/CSS) by Njorthr

IndieBrew Responsive Code With HTML Tailwind CSS and JS

Fantastic Practice!

Snipper Landing Page Challenge

{"ops":[{"insert":"Made it using html and css , responsive for mobile devices to laptop . \n"}]}

IndieBrew landing page and sign-up page

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

First Challenge 

Newsletter Popup | HTML CSS Sass

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

Newsletter Template - Mobile first

{"ops":[{"insert":"I don't know if my work is correct, I'm just a newbie in web development\n"}]}

Newsletter Popup Template Using HTML And CSS

{"ops":[{"insert":"Responsive IndieBrew landing page. Build with HTML&CSS.\n"}]}

IndieBrew Landing page 

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

{"ops":[{"insert":"Html and CSS only\n"}]}

IndieBrew landing page

Snipper landing page with HTML And Tailwind CSS

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

Snippet Template challenge codewell

Completed this website using html and css.

{"ops":[{"insert":"Built with Grid css and Flexbox.\nI hope your feedback\n"}]}

Snippet_Template_Starter_Files

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

newsletter popup

Landing Page

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

news-letter-card

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

Snipper-Landing-Page

Snipper - Gorgeous Code Snippets solution by psplawski

{"ops":[{"insert":"Made with HTML and CSS\n"}]}

Meeet-waitlist-template

YelpCamp Codewell Challenge

{"ops":[{"insert":"I made this challenge using html, css and js.\nAny feedback would be great.\n"}]}

{"ops":[{"insert":"Snipper Landing Page\nMade with pure HTML&CSS\n"}]}

Snipper-landing-page

{"ops":[{"insert":"I have learn a lot by making this real life template with starter files.\n"}]}

indiebrew solution

{"ops":[{"insert":"Feel free to ask for any questions, it was a fun challenge!\n"}]}

Katalina G / CW-Snippet-Template

IndieBrew Landing Page with Responsive menu

Yelpcamp by Colt Steele

{"ops":[{"insert":"CUALQUIER DUDA DE COMO LO HICE PREGUNTAR\n\n"}]}

PRIMER DESAFIO RESUELTO 

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

YelpCamp - Solution

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

YelpCamp Solution

Yelp Camp Project with React JS

{"ops":[{"insert":"This is my first project here. So, any feedback are welcome\n"}]}

Responsive Newsletter Popup

{"ops":[{"insert":"This Challenge was easy \n"}]}

Newsletter

Developer portfolio starter files  by ikram

{"ops":[{"insert":"Responsive landing page built with Svelte Kit and Tailwind CSS.\n"}]}

Snipper (Svelte Kit + Tailwind CSS)

Indie Brew Template

My solution

Task Completed

HTML5, CSS3, JavaScript, SASS

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

{"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":"Easy challenge, any feedback is still welcome tho\n"}]}

Popup newsletter built with HTML, CSS and JS

The challenge on responsiveness and positioning

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

newsletter challenge

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

Snipper Landing page solution. Pure css

{"ops":[{"insert":"Developed using CSS Flexbox.\n\nI used modal to visualize the PopUp.\n"}]}

Meeet Waitlist Template

I tried my best

Meeet Template Challange Solution