HTML and CSS kind the inspiration of contemporary web development. HTML defines how an online web page is structured, and CSS defines its type. Whereas each languages are comparatively straightforward to study, as soon as the fundamentals, you’ll nonetheless have to sharpen your expertise with apply.
Code challenges are a good way to sharpen your programming expertise and mix them in numerous methods. Listed below are 11 HTML and CSS code challenges that’ll provide help to take your expertise to the subsequent stage. To get began, simply choose a problem, open up a workspace, and begin coding.
Be aware that whereas these challenges are designed for rookies, you’ll nonetheless have to have a fundamental understanding of HTML and CSS. In the event you want a refresher, use the programs under:
1. Create a tribute web page
Select a historic determine who’s significant to you and create a webpage devoted to them. The webpage ought to embrace:
- A title or heading with the individual’s title
- A picture of the individual
- A caption for the picture
- A timeline of the individual’s life within the type of a list
This may be accomplished with solely HTML, however use CSS to offer it some type.
2. Create a Wikipedia web page
Wikipedia is without doubt one of the backbones of the web, and it has a comparatively easy structure. Create a Wikipedia web page on the subject of your selection. It ought to embrace:
- A title or heading
- A desk of contents with links to sections inside the web page
- Superscript quantity hyperlinks that hyperlink to the corresponding quantity within the reference part
- An ordered record of references
3. Create an HTML and CSS-only search outcomes web page
Create a mock Google search outcomes web page. It ought to embrace:
- The Google brand
- A search bar on the prime
- An inventory of search outcomes with clickable hyperlinks
Right here’s an example of what it’d appear like.
4. Create a survey kind
HTML forms are an necessary a part of many web sites. Create a kind for a survey on the subject of your selection.
Embrace a wide range of reply choices, together with textual content fields, dropdowns, radio buttons, checkboxes, and a submit button. Don’t overlook so as to add a title, and think about using CSS to enhance the look of your kind. Right here’s an example.
5. Create a picture gallery
Picture galleries may be a necessary template for a lot of web sites—like pictures portfolios, as an illustration. Choose a theme you want (movies, vegetation, structure) and create a picture gallery utilizing float or show flexbox.
This gallery ought to comprise:
- A title or heading
- 8+ clickable photographs with descriptions
- A prime navigation bar
- A footer, full with social media hyperlinks
6. Create a parallax web site
A parallax web site has a set picture within the background that stays in place when you scroll by different components of the web page. It’s a preferred impact in web design and offers a sublime feel and look to a web page.
Design a parallax webpage. Divide the web page into three or 4 sections. Set three or 4 background photographs and align textual content to every part. You’ll use margins, padding, and background positioning to create the impact. Right here’s an instance of a parallax web site.
7. Create a product touchdown web page
Many web sites are designed to showcase and promote merchandise. A product touchdown web page must be enticing, informative, and simple to learn to enchantment to customers. Your product touchdown web page ought to embrace:
- An image of the product
- A header and footer
- Columns
- A number of sections
Take into account the colour scheme and be sure that elements don’t overlap one another.
8. Create a restaurant web site
A restaurant web site is much like a product touchdown web page in that it ought to showcase the restaurant and menu gadgets appealingly. It’s extra advanced, although, with photographs of various meals and drinks. First, create a responsive restaurant web site utilizing a viewport and media queries.
9. Create a chessboard
This problem teaches you create and format a table. You’ll additionally have to discover ways to insert UNICODE characters.
Create a chessboard. The board needs to be alternating colours and an eight-by-eight grid. Listed below are the UNICODE characters you’ll want for the items.
- White King: ♔
- White Queen: ♕
- White Rook: ♖
- White Bishop: ♗
- White Knight: ♘
- White Pawn: ♙
- Black King: ♚
- Black Queen: ♛
- Black Rook: ♜
- Black Bishop: ♝
- Again Knight: ♞
- Black Pawn: ♟
10. Create an occasion or convention web site
This problem continues the theme of constructing enticing internet pages. This one will embrace a registration button that hyperlinks to a registration kind. You’ll additionally want particulars and pictures of the speaker or performer and venue. Describe the occasion and embrace a number of sections together with a header and footer. Take into account the colour scheme and use fonts which might be readable and mirror the theme of the occasion.
11. Create a portfolio web site
Take what you’ve realized all through the opposite challenges and create a portfolio web site. The web site ought to mirror your expertise.
Embrace a web page along with your resume, work samples, a photograph, and a prime menu with hyperlinks to an about web page, contact web page, and every other pages you’d like to incorporate. Within the footer, embrace your contact info and hyperlinks to your related social media accounts.
Constructing your HTML and CSS expertise
Code challenges are only one method to construct your HTML and CSS expertise. You can even brush up with programs like Learn HTML, Learn CSS, and Learn Intermediate CSS. These programs construct on each other, although you’ll be able to all the time bounce into an intermediate class if you have already got an excellent base information of CSS.
Talent Paths are one other nice method to study particular expertise. Our Learn How to Build Websites Talent Path walks you thru HTML and CSS, together with responsive design and accessibility. You’ll finish the category with a elegant web site that you should utilize in your portfolio. We even have a standalone course on responsive design.
In the event you really feel assured in your HTML and CSS expertise, it might be time to study one other language. Our course on JavaScript builds on HTML and CSS that can assist you make web sites much more responsive and dynamic. When you study JavaScript, we provide a course on Building Interactive JavaScript Websites that brings all these expertise collectively.
This weblog was initially printed in November 2021 and has been up to date to incorporate further HTML and CSS challenges for rookies.
Whether or not you’re seeking to break into a brand new profession, construct your technical expertise, or simply code for enjoyable, we’re right here to assist each step of the best way. Try our weblog publish about how to choose the best Codecademy plan for you to find out about our structured programs, skilled certifications, interview prep assets, profession companies, and extra.