{"ops":[{"insert":"Perfect to practice creating graphs, CSS grid, and much more.\n"}]}

Ideate Dashboard 

{"ops":[{"insert":"Perfect to practice your responsive design, flex and/or grid skills.\n"}]}

Accountable Social Media Feed

Web Developer Portfolio

Javascript30 Navbar

Hey Loctong! 

Looks like you've got this pretty good on 1920x1080 but it looks like it breaks at smaller breakpoints (<1080, you can check how it looks on other devices by using the developer tools on any browser), so that may worth looking at using Media Queries. 

Good start though!

Hi, moeminm!
 Thanks for your comments.
 I am on the way to update 
Thanks


btw, It is working well with Ipad (768) :D

Hmm, weird, iPad looks broken on my screen (maybe cuz i'm using Safari 👀)

Looks REALLY good. My 2c are as follows: The image on the second post seems VERY stretched out on Safari (looks fine on Chrome and Firefox). For the live stream on the right, ideally the live, viewer count, and title should be actually components instead of an image. 

Other than that, great job! 

Also just wanted to add that I've seen your other Codewell challenges and you seem to have a really good grasp on converting designs to actual websites in terms of dimensions, keep at it man!

Thanks for the advice and encouragement. It was a pleasure to read that my work is being done well. I will seek to improve it even more. Thank you very much man 😀

Nice work!
Here are some thoughts from looking at this.
I liked your semantic use of html elements including the time element.
I think the width on the header is a bit suprising:     width: clamp(374px, 86vw, 1240px);
I think some padding around it might be simpler (20px for mobile, 40px for tablet and up).

The input is not an input. Positioning the button in an input is tricky though.
The min-width for the media query on the final large screen grid layout is 1024px. Which a few hundred pixels less than the actual width of all the content so it overflows for some screen sizes and messes up your header too.



- raster image of diagram should be made vector, maybe using the svg path from the figma file, and adding a color linear gradient.
- colors are grey for all the cards, but should be white.
- scroll behaviour is non-existent. There is going to be lots of rows on the tables.
- margins/paddings are all different to the figma file.
- font sizes and font weights are all different to the figma file.
- horizontal scrolling is needed to see the referral image, and then the top-nav logos don't stay in place.
- everything overfows its containers with a small window. Would recommend fixed sizing for the graph / referral vertically to prevent overflow (e.g. 400px).

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.

You didn't set up GitHub Pages to see the website live.

Very great work and neat codes but you should try to reduce the width of the hero-image img so the hero image wont overlap the footer at full screen for desktop.
Also you can try reducing the (*) padding so the gradle menu in it can align well with the rest in the drop down menu 
great work!!! whoever you are

sorry the Repositorie is deleted by mistake check my another submission.
thankyou

You did so well. I want to know a few things about Bootstrap5.

I had issues when I viewed the page on my mobile phone, it all changed from what it was on the developers tool screen size for mobile, the issue now is, I don't know the specific breakpoints in my source code that I'll track modified and correct so that the page won't have issues.
I don't know what breakpoints to track, how can I do that

Hello Nicholas, you should have tried hiding the get-in-touch button for the mobile design, asides that, the code is Perfect.


Also the link you provided to view the source code isn't for this developer portfolio challenge, try making an adjustment, as I'd also like to see the code and check for the possible ways I've made mistakes while writing my own code for the same challenge.

Moreover, what was the breakpoints you used in designing for mobile and desktop?

The designs I Made for my mobile doesn't seem like the mobile design when I published the challenge and viewed it on a mobile phone, I'd like to know how you did yours or if you experience the same difficulty.
Thank you

Uploaded wrong netlify link, not in the index.html

Correct link: https://dazzling-druid-2cd454.netlify.app

Hello friend. At least in mobile when you open the menu and then products, you can close the menu En products is still visible. You can keep scrolling the page and touching outside the menu and it won't disappear until you select a product. Hope little feedback helps

Hey FreshtaM you made a wonderful project  as same as design  is provided. I think you do more work on it's mobile first version you can clearly se that your nav bar is started breaking in 1222px so at that time you could hide it as it is not looking appealing at that time. And I think you forgot to add functionality (products) in nav bar as given in design.

Please review my source code

Accountable

Tailwind, grid, flex, typescript

Solution to sidebar in tablet mode

a bit tricky for me

JavaScript30_Navbar

{"ops":[{"insert":"A responsive landing page of Ondeck - Video calling service app\n"}]}

Ondeck - Video Calling Service

{"ops":[{"insert":"Solution to On Deck landing page built with nuxt.js and fully responsive\n"}]}

On Deck solution built with nuxt.js

Ideate-Dashboard

accountable-starter

{"ops":[{"insert":"Ondeck - Javascript30 Navbar  Solution\n"}]}

Javascript30 Navbar Solution

{"ops":[{"insert":"solution to a codewell exercise\n"}]}

ondeck

{"ops":[{"insert":"this is my solution to the exercise\n"}]}

Solution to codewell navbar with js

Ondeck

{"ops":[{"insert":"I have coded for desktop/pc.\n"}]}

Barra de navegacion con JavaScript

JavaScript NavBar

{"ops":[{"insert":"Responsive, with grid and js. \nWithout figma file :( \n"}]}

CodeWell01 - Navbar

Javascript30 Navar

{"ops":[{"insert":"This project was a bit challenging 😅\n"}]}

Navbar javascript

{"ops":[{"insert":"Interesting project\n"}]}

js30NavBar

JavaScript30 Navbar 

javascript navbar

{"ops":[{"insert":"Gone pretty well ! added the responsive menu too.\n"}]}

Gone well

landing page navbar

navbar

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

javascript30 navbar

{"ops":[{"insert":"I only use a little bit of Javascript for mobile navigation.\n"}]}

This is my solution

JS30 Navbar Challenge

Javascript30

{"ops":[{"insert":"First Challenge complete✌🏻"},{"attributes":{"header":2},"insert":"\n"}]}

LandingPage_Javascript30

Javascript30-Navbar

It's alive

{"ops":[{"insert":"Made with React JS.\nGive me your feedback!\n"}]}

JS30NAVBAR

My navbar

{"ops":[{"insert":"developed a webpage using Tailwindcss Library.\n"}]}

Javascript 30 Navbar - Tushar Kanjariya

Navbar challenge using sass

Odneck Awsome Landing page

On desk

{"ops":[{"insert":"thats a small solution for the layout\n"}]}

My first simple solution!

Mywebpage1

{"ops":[{"insert":"my first web page landing\n"}]}

MyProject1

{"ops":[{"insert":"Developer Landing page, made with css. I love flexbox. \n"}]}

Developer Portfolio Landing Page

{"ops":[{"insert":"Interesting template.\nGive me your feedback!\n"}]}

JS30 Navbar

web-dev-portfolio

{"ops":[{"insert":"This Is My First Challenge!\n"}]}

{"ops":[{"insert":"Working with Images is still a problem for me...Any feedback is welcomed..\n"}]}

My First Codewell Project

{"ops":[{"insert":"This was fun. I used bootstrap to make it\n"}]}

First codewell project

Portfolio Starter with Bootstrap 5.

{"ops":[{"insert":"this is my first project\n"}]}

codewell project

Javascropt30-Navbar Challange COMPLETED

javascript30-navbar-starter

Beginner CSS

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

Developer Portfolio using Tailwind CSS

my project

{"ops":[{"insert":"What do you think ?\n"}]}

Solution !!

{"ops":[{"insert":"made width html scss javascript\n"}]}

portfolio-developer

social-media

{"ops":[{"insert":"Using HTML CSS Jquery\n"}]}

Solution

My First Time Learn BoooStraps 5

Web Developer Portfolio - GHLFernandes

{"ops":[{"insert":"very high responsive\n"}]}

{"ops":[{"insert":"Projet Codewell.cc\nthis is my work on # Web Developer Portfolio\n"}]}

Web-Developer-Portfolio

{"ops":[{"insert":"Developer Portfolio Starter Files using flexbox CSS\n"}]}

Developer Portfolio Starter Files

{"ops":[{"insert":"Ondeck landing page using Flexbox and css classes.\n"}]}

Javascript 30 NavBar using FlexBox

{"ops":[{"insert":"web developer portfolio using flexbox\n"}]}

Web developer portfolio

{"ops":[{"insert":"i used the grid for building this page\n"}]}

 Ideate-Dashboard

Ondeck landing with Flexbox

{"ops":[{"insert":"Just some CSS practice\n"}]}

Web Developer Portfolio Using HTML and CSS

NavBar responsivo 

{"ops":[{"insert":"I made use of grid system and bootsrap to build the landing page\n"}]}

web-developer-portfolio

Web Developer Portfolio (instructive)

{"ops":[{"insert":"Muito bom para praticar e fixar os conceitos do framework TailwindCSS.\n"}]}

Responsive Navbar ReactJS + Tailwind

The best navbar :)

{"ops":[{"insert":"Using react and tailwind\n"}]}

This is my solution for this challenge i hope you like it

{"ops":[{"insert":"I could not find information about drop-down menu. I create a new one.\n"}]}

Created with vue.js and tailwind.css

Responsive developer portfolio website with only pure HTML5 and CSS3

Challenge Done !

My Solution

{"ops":[{"insert":"Responsive landing page web designer portifolio using sass/scss\n"}]}

Responsive landing page web designer portifolio using sass/scss

{"ops":[{"insert":"Responsive landing page Navbar\n"}]}

Responsive landing page Navbar

Developer Portfolio

Web DEveloper Portfolio Solution

Challenge Web Developer Portfolio Solution

My portfolio

{"ops":[{"insert":"I have used Bootstrap to make this site.\n"}]}

Developer_Portfolio Challenge

Portifolio website

My Developer Portfolio starter Project

Web Developer Portfolio Challenge

{"ops":[{"insert":"Developer portfolio\n"}]}

Developer portfolio

Developer protfolio Template

JavaScript30 Landing Page

Landing Page With follow along Navbar

landing page

Toluwaleyi/Toluwaleyi-landing-page

Landing page using HTML and CSS

portifolio challenge

{"ops":[{"insert":"The code are all in the GitHub repository, I'm open to corrections\n"}]}

Developer-personal-website

Web Developer Portfolio Using Tailwindcss

Web-Developer-Portfolio-Project

{"ops":[{"insert":"Coded with only css and html.It was fun.\n"}]}

Portfolio

desafio

{"ops":[{"insert":"this nav bar is created using html and CSS and js \n"}]}

JavaScript Navbar with Sub Menu

{"ops":[{"insert":"I used only flex .\nIts not responsive yet , still learning ;)\n"}]}

Portofolio(only flex -no-responsive yet)

{"ops":[{"insert":"This is my first try with Tailwind .\n"}]}

Web-Developer-Portfolio (With Tailwind)

{"ops":[{"insert":"Only html and css\n"}]}

It's not one of my best projects, but I'm evolving!

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

Navbar Start

Done the challenge but there's a problem I can't solve

MySolution

Web Developer Portfolio responsive page solution 

{"ops":[{"insert":"Give me some tough Challenges.\n"}]}

{"ops":[{"insert":"amazing challenge.\nthanks you codewell \n"}]}

Evariste Nouaga

Created with React.js and Typescript

Web Developer Portfolio Challange

Codewell

Nav Bar responsive solution

{"ops":[{"attributes":{"bold":true},"insert":"Javascript30 Navbar"},{"insert":"\n"}]}

Desafio #001

{"ops":[{"insert":"made use of mostly divs to create nav bars and used css to style\n"}]}

project 1

{"ops":[{"insert":"Simple responsive code\n"}]}

HTML, CSS and JS

{"ops":[{"insert":"Used Pure HTML and CSS to create the frontend design.\n"}]}

Ondeck Codewell Challenge

{"ops":[{"insert":"Made using NextJS + TailwindCSS\n"}]}